Header: Simplified, split and re-orgranised view file(s)

- Moved "common" template partials, that are only used in layouts, to
  layouts/parts folder.
- Simplified HTML structure of header template.
- Extracted logo and links from header template to simplify.
- Added header-links-start template for easier extension/customization
  without needing to override full list of links.
  - Added test to cover usage of this.

For #4564

resources/sass/_header.scss

@@ -2,12 +2,12 @@
  * Includes the main navigation header and the faded toolbar.
  */
 
-header .grid {
+header.grid {
   grid-template-columns: minmax(max-content, 2fr) 1fr minmax(max-content, 2fr);
 }
 
 @include smaller-than($l) {
-  header .grid {
+  header.grid {
     grid-template-columns: 1fr;
     grid-row-gap: 0;
   }

resources/views/common/header.blade.php

@@ -1,74 +0,0 @@
-<header id="header" component="header-mobile-toggle" class="primary-background">
-    <div class="grid mx-l">
-
-        <div>
-            <a href="{{ url('/') }}" data-shortcut="home_view" class="logo">
-                @if(setting('app-logo', '') !== 'none')
-                    <img class="logo-image" src="{{ setting('app-logo', '') === '' ? url('/logo.png') : url(setting('app-logo', '')) }}" alt="Logo">
-                @endif
-                @if (setting('app-name-header'))
-                    <span class="logo-text">{{ setting('app-name') }}</span>
-                @endif
-            </a>
-            <button type="button"
-                    refs="header-mobile-toggle@toggle"
-                    title="{{ trans('common.header_menu_expand') }}"
-                    aria-expanded="false"
-                    class="mobile-menu-toggle hide-over-l">@icon('more')</button>
-        </div>
-
-        <div class="flex-container-column items-center justify-center hide-under-l">
-            @if (user()->hasAppAccess())
-            <form component="global-search" action="{{ url('/search') }}" method="GET" class="search-box" role="search" tabindex="0">
-                <button id="header-search-box-button"
-                        refs="global-search@button"
-                        type="submit"
-                        aria-label="{{ trans('common.search') }}"
-                        tabindex="-1">@icon('search')</button>
-                <input id="header-search-box-input"
-                       refs="global-search@input"
-                       type="text"
-                       name="term"
-                       data-shortcut="global_search"
-                       autocomplete="off"
-                       aria-label="{{ trans('common.search') }}" placeholder="{{ trans('common.search') }}"
-                       value="{{ $searchTerm ?? '' }}">
-                <div refs="global-search@suggestions" class="global-search-suggestions card">
-                    <div refs="global-search@loading" class="text-center px-m global-search-loading">@include('common.loading-icon')</div>
-                    <div refs="global-search@suggestion-results" class="px-m"></div>
-                    <button class="text-button card-footer-link" type="submit">{{ trans('common.view_all') }}</button>
-                </div>
-            </form>
-            @endif
-        </div>
-
-        <nav refs="header-mobile-toggle@menu" class="header-links">
-            <div class="links text-center">
-                @if (user()->hasAppAccess())
-                    <a class="hide-over-l" href="{{ url('/search') }}">@icon('search'){{ trans('common.search') }}</a>
-                    @if(userCanOnAny('view', \BookStack\Entities\Models\Bookshelf::class) || userCan('bookshelf-view-all') || userCan('bookshelf-view-own'))
-                        <a href="{{ url('/shelves') }}" data-shortcut="shelves_view">@icon('bookshelf'){{ trans('entities.shelves') }}</a>
-                    @endif
-                    <a href="{{ url('/books') }}" data-shortcut="books_view">@icon('books'){{ trans('entities.books') }}</a>
-                    @if(!user()->isGuest() && userCan('settings-manage'))
-                        <a href="{{ url('/settings') }}" data-shortcut="settings_view">@icon('settings'){{ trans('settings.settings') }}</a>
-                    @endif
-                    @if(!user()->isGuest() && userCan('users-manage') && !userCan('settings-manage'))
-                        <a href="{{ url('/settings/users') }}" data-shortcut="settings_view">@icon('users'){{ trans('settings.users') }}</a>
-                    @endif
-                @endif
-
-                @if(user()->isGuest())
-                    @if(setting('registration-enabled') && config('auth.method') === 'standard')
-                        <a href="{{ url('/register') }}">@icon('new-user'){{ trans('auth.sign_up') }}</a>
-                    @endif
-                    <a href="{{ url('/login')  }}">@icon('login'){{ trans('auth.log_in') }}</a>
-                @endif
-            </div>
-            @if(!user()->isGuest())
-                @include('common.header-user-menu', ['user' => user()])
-            @endif
-        </nav>
-
-    </div>
-</header>

resources/views/layouts/base.blade.php

@@ -32,8 +32,8 @@
     @yield('head')
 
     <!-- Custom Styles & Head Content -->
-    @include('common.custom-styles')
+    @include('layouts.parts.custom-styles')
-    @include('common.custom-head')
+    @include('layouts.parts.custom-head')
 
     @stack('head')
 
@@ -48,15 +48,15 @@
       class="@stack('body-class')">
 
     @include('layouts.parts.base-body-start')
-    @include('common.skip-to-content')
+    @include('layouts.parts.skip-to-content')
-    @include('common.notifications')
+    @include('layouts.parts.notifications')
-    @include('common.header')
+    @include('layouts.parts.header')
 
     <div id="content" components="@yield('content-components')" class="block">
         @yield('content')
     </div>
 
-    @include('common.footer')
+    @include('layouts.parts.footer')
 
     <div component="back-to-top" class="back-to-top print-hidden">
         <div class="inner">

resources/views/layouts/parts/header-links-start.blade.php

@@ -0,0 +1,2 @@
+{{-- This is a placeholder template file provided as a --}}
+{{-- convenience to users of the visual theme system. --}}

resources/views/layouts/parts/header-links.blade.php

@@ -0,0 +1,25 @@
+@include('layouts.parts.header-links-start')
+
+@if (user()->hasAppAccess())
+    <a class="hide-over-l" href="{{ url('/search') }}">@icon('search'){{ trans('common.search') }}</a>
+    @if(userCanOnAny('view', \BookStack\Entities\Models\Bookshelf::class) || userCan('bookshelf-view-all') || userCan('bookshelf-view-own'))
+        <a href="{{ url('/shelves') }}"
+           data-shortcut="shelves_view">@icon('bookshelf'){{ trans('entities.shelves') }}</a>
+    @endif
+    <a href="{{ url('/books') }}" data-shortcut="books_view">@icon('books'){{ trans('entities.books') }}</a>
+    @if(!user()->isGuest() && userCan('settings-manage'))
+        <a href="{{ url('/settings') }}"
+           data-shortcut="settings_view">@icon('settings'){{ trans('settings.settings') }}</a>
+    @endif
+    @if(!user()->isGuest() && userCan('users-manage') && !userCan('settings-manage'))
+        <a href="{{ url('/settings/users') }}"
+           data-shortcut="settings_view">@icon('users'){{ trans('settings.users') }}</a>
+    @endif
+@endif
+
+@if(user()->isGuest())
+    @if(setting('registration-enabled') && config('auth.method') === 'standard')
+        <a href="{{ url('/register') }}">@icon('new-user'){{ trans('auth.sign_up') }}</a>
+    @endif
+    <a href="{{ url('/login')  }}">@icon('login'){{ trans('auth.log_in') }}</a>
+@endif

resources/views/layouts/parts/header-logo.blade.php

@@ -0,0 +1,8 @@
+<a href="{{ url('/') }}" data-shortcut="home_view" class="logo">
+    @if(setting('app-logo', '') !== 'none')
+        <img class="logo-image" src="{{ setting('app-logo', '') === '' ? url('/logo.png') : url(setting('app-logo', '')) }}" alt="Logo">
+    @endif
+    @if (setting('app-name-header'))
+        <span class="logo-text">{{ setting('app-name') }}</span>
+    @endif
+</a>

resources/views/layouts/parts/header-search.blade.php

@@ -0,0 +1,20 @@
+<form component="global-search" action="{{ url('/search') }}" method="GET" class="search-box" role="search" tabindex="0">
+    <button id="header-search-box-button"
+            refs="global-search@button"
+            type="submit"
+            aria-label="{{ trans('common.search') }}"
+            tabindex="-1">@icon('search')</button>
+    <input id="header-search-box-input"
+           refs="global-search@input"
+           type="text"
+           name="term"
+           data-shortcut="global_search"
+           autocomplete="off"
+           aria-label="{{ trans('common.search') }}" placeholder="{{ trans('common.search') }}"
+           value="{{ $searchTerm ?? '' }}">
+    <div refs="global-search@suggestions" class="global-search-suggestions card">
+        <div refs="global-search@loading" class="text-center px-m global-search-loading">@include('common.loading-icon')</div>
+        <div refs="global-search@suggestion-results" class="px-m"></div>
+        <button class="text-button card-footer-link" type="submit">{{ trans('common.view_all') }}</button>
+    </div>
+</form>

resources/views/layouts/parts/header.blade.php

@@ -0,0 +1,25 @@
+<header id="header" component="header-mobile-toggle" class="primary-background px-xl grid">
+    <div>
+        @include('layouts.parts.header-logo')
+        <button type="button"
+                refs="header-mobile-toggle@toggle"
+                title="{{ trans('common.header_menu_expand') }}"
+                aria-expanded="false"
+                class="mobile-menu-toggle hide-over-l">@icon('more')</button>
+    </div>
+
+    <div class="flex-container-column items-center justify-center hide-under-l">
+    @if(user()->hasAppAccess())
+        @include('layouts.parts.header-search')
+    @endif
+    </div>
+
+    <nav refs="header-mobile-toggle@menu" class="header-links">
+        <div class="links text-center">
+            @include('layouts.parts.header-links')
+        </div>
+        @if(!user()->isGuest())
+            @include('layouts.parts.header-user-menu', ['user' => user()])
+        @endif
+    </nav>
+</header>

resources/views/layouts/plain.blade.php

@@ -14,8 +14,8 @@
     <link rel="stylesheet" media="print" href="{{ versioned_asset('dist/print-styles.css') }}">
 
     <!-- Custom Styles & Head Content -->
-    @include('common.custom-styles')
+    @include('layouts.parts.custom-styles')
-    @include('common.custom-head')
+    @include('layouts.parts.custom-head')
 </head>
 <body>
     @yield('content')

tests/ThemeTest.php

@@ -366,6 +366,20 @@ class ThemeTest extends TestCase
         });
     }
 
+    public function test_header_links_start_template_file_can_be_used()
+    {
+        $content = 'This is added text in the header bar';
+
+        $this->usingThemeFolder(function (string $folder) use ($content) {
+            $viewDir = theme_path('layouts/parts');
+            mkdir($viewDir, 0777, true);
+            file_put_contents($viewDir . '/header-links-start.blade.php', $content);
+            $this->setSettings(['registration-enabled' => 'true']);
+
+            $this->get('/login')->assertSee($content);
+        });
+    }
+
     protected function usingThemeFolder(callable $callback)
     {
         // Create a folder and configure a theme