Redesigned application header

app/config/app.php

@@ -22,12 +22,12 @@ return [
     'language' => DI\env('APP_LANGUAGE', 'en'),
 
     /**
-     * Text of the 'home' link in the navigation breadcrumbs. If undefined or
-     * null will use the translated form of "home" from your selected language.
+     * The title of your directory listing. This will be displayed in the
+     * browser tab/title bar along with the current path.
      *
-     * Default value: null
+     * Default value: 'Directory Lister'
      */
-    'home_text' => DI\env('HOME_TEXT', null),
+    'site_title' => DI\env('SITE_TITLE', 'Directory Lister'),
 
     /**
      * Meta tag description text.
@@ -36,6 +36,14 @@ return [
      */
     'meta_description' => DI\env('META_DESCRIPTION', 'Yet another directory listing, powered by Directory Lister.'),
 
+    /**
+     * Text of the 'home' link in the navigation breadcrumbs. If undefined or
+     * null will use the translated form of "home" from your selected language.
+     *
+     * Default value: null
+     */
+    'home_text' => DI\env('HOME_TEXT', null),
+
     /**
      * Parse and render README files on the page.
      *

app/resources/js/app.js

@@ -7,7 +7,6 @@ const app = new Vue({
     data: () => ({
         loading: true,
         theme: 'light',
-        menuOpen: false,
     }),
     computed: {
         darkMode() {

app/resources/sass/app.scss

@@ -13,7 +13,7 @@ $fa-font-path: "./webfonts";
 @import "~highlight.js/scss/github.scss";
 
 // Fonts
-@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Work+Sans:wght@200;400&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:400&family=Source+Code+Pro&family=Work+Sans:wght@200;400&display=swap");
 
 // Additional Styles
 @import "markdown.scss";

app/views/components/breadcrumbs.twig

@@ -0,0 +1,11 @@
+<div class="flex-1 font-mono text-white text-sm tracking-tight overflow-x-auto whitespace-nowrap py-1">
+    <a href="." class="inline-block hover:underline">
+        {{ config('home_text') | default(translate('home')) }}
+    </a>
+
+    {% if path is not null %}
+        {% for name, path in breadcrumbs(path) %}
+            / <a href="{{ path }}" class="inline-block hover:underline">{{ name }}</a>
+        {% endfor %}
+    {% endif %}
+</div>

app/views/components/header.twig

@@ -1,38 +1,31 @@
 <header id="header" class="bg-blue-600 shadow sticky top-0 dark:bg-purple-700">
-    <div class="container flex justify-between flex-wrap items-center mx-auto p-4 md:flex-row xl:max-w-screen-xl">
-        <div class="flex-1 font-mono text-white text-sm tracking-tight overflow-x-auto whitespace-nowrap py-1">
-            <a href="." class="inline-block hover:underline">
-                {{ config('home_text') | default(translate('home')) }}
+    <div class="border-b border-blue-700 dark:border-purple-800">
+        <div class="container flex flex-wrap justify-between items-center space-x-6 mx-auto p-4 md:flex-row xl:max-w-screen-xl">
+            <a href="." class="flex items-center space-x-2 p-1" title="{{ config('site_title') }}">
+                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="folder-tree" class="inline-block fill-current text-white w-8 h-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+                    <path fill="currentColor" d="M544 32H432L400 0h-80a32 32 0 0 0-32 32v160a32 32 0 0 0 32 32h224a32 32 0 0 0 32-32V64a32 32 0 0 0-32-32zm0 288H432l-32-32h-80a32 32 0 0 0-32 32v160a32 32 0 0 0 32 32h224a32 32 0 0 0 32-32V352a32 32 0 0 0-32-32zM64 16A16 16 0 0 0 48 0H16A16 16 0 0 0 0 16v400a32 32 0 0 0 32 32h224v-64H64V160h192V96H64z"></path>
+                </svg>
             </a>
 
-            {% if path is not null %}
-                {% for name, path in breadcrumbs(path) %}
-                    / <a href="{{ path }}" class="inline-block hover:underline">{{ name }}</a>
-                {% endfor %}
-            {% endif %}
-        </div>
-
-        <button class="inline-block text-white mx-2 hover:text-gray-400 md:hidden" v-on:click="menuOpen = ! menuOpen">
-            <i class="fas fa-times fa-lg fa-fw" v-if="menuOpen"></i>
-            <i class="fas fa-ellipsis-v fa-lg fa-fw" v-else></i>
-        </button>
-
-        <div class="flex items-center flex-grow flex-shrink-0 w-full pt-4 space-x-3 md:flex md:max-w-xs md:p-0" v-bind:class="{ 'hidden': ! menuOpen }">
-            {% if path and files is not empty and config('zip_downloads') %}
-                <a href="{{ zip_url(path) }}" title="{{ translate('download') }}" class="inline-block text-white p-1 hover:text-gray-300">
-                    <i class="fas fa-download fa-lg"></i>
-                </a>
-            {% endif %}
-
-            <div class="w-4 h-8 flex flex-col justify-center items-center bg-gray-900 bg-opacity-30 rounded-full cursor-pointer duration-300 ease-in-out" title="{{ translate('toggle_theme') }}" v-on:click="toggleTheme">
-                <div class="flex justify-center items-center bg-white w-5 h-5 rounded-full shadow-md transform duration-300 ease-in-out" v-bind:class="{ '-translate-y-2': lightMode, 'translate-y-2': darkMode }">
-                    <i class="fas fa-lightbulb fa-xs" v-bind:class="{ 'text-gray-600': darkMode, 'text-yellow-400': lightMode }"></i>
-                </div>
+            <div class="flex-1 max-w-xl">
+                {% include 'components/search.twig' %}
             </div>
 
-            <div class="flex-1">
-                {% include 'components/search.twig' %}
+            <div class="flex items-center p-1">
+                {% include 'components/theme-toggle.twig' %}
             </div>
         </div>
     </div>
+
+    <div class="border-t border-blue-500 dark:border-purple-600">
+        <div class="container flex flex-wrap justify-between items-center space-x-6 mx-auto px-4 py-1 md:flex-row xl:max-w-screen-xl">
+            {% include 'components/breadcrumbs.twig' %}
+
+            {% if path and files is not empty and config('zip_downloads') %}
+                <a href="{{ zip_url(path) }}" title="{{ translate('download') }}" class="inline-block text-white p-1 hover:text-gray-300">
+                    <i class="fas fa-download"></i>
+                </a>
+            {% endif %}
+        </div>
+    </div>
 </header>

app/views/components/search.twig

@@ -10,7 +10,6 @@
         </div>
     </div>
 
-
     {% if search %}
         <div class="flex items-center absolute right-0 inset-y-0 mr-2">
             <a href="."  class="flex justify-center items-center rounded-full text-gray-900 text-opacity-50 w-6 h-6 hover:bg-red-700 hover:text-white hover:text-opacity-100 hover:shadow">

app/views/components/theme-toggle.twig

@@ -0,0 +1,5 @@
+<div class="flex flex-col justify-evenly items-center bg-gray-900 bg-opacity-30 rounded-full cursor-pointer w-4 h-8" title="{{ translate('toggle_theme') }}" v-on:click="toggleTheme">
+    <div class="flex justify-center items-center bg-white w-5 h-5 rounded-full shadow-md transform duration-300 ease-in-out" v-bind:class="{ '-translate-y-2': lightMode, 'translate-y-2': darkMode }">
+        <i class="fas fa-lightbulb fa-xs" v-bind:class="{ 'text-gray-600': darkMode, 'text-yellow-400': lightMode }"></i>
+    </div>
+</div>

app/views/layouts/app.twig

@@ -15,7 +15,7 @@
     {% include 'components/analytics/matomo.twig' %}
 {% endif %}
 
-<title>{{ title }} &bull; Directory Lister</title>
+<title>{{ title }} &bull; {{ config('site_title') }}</title>
 
 <div id="app" v-bind:class="{ dark: darkMode }">
     <div class="flex flex-col min-h-screen font-sans dark:bg-gray-800" v-cloak>

tailwind.config.js

@@ -26,8 +26,9 @@ module.exports = {
                 purple: colors.violet,
             },
             fontFamily: {
+                merriweather: ['Merriweather', ...defaultTheme.fontFamily.serif],
                 mono: ['Source Code Pro', ...defaultTheme.fontFamily.mono],
-                sans: ['Work Sans', ...defaultTheme.fontFamily.sans]
+                sans: ['Work Sans', ...defaultTheme.fontFamily.sans],
             },
             textColor: {
                 github: '#171515',