From e038a3a436468b46cb566ff0fb4dafb5234cf07b Mon Sep 17 00:00:00 2001
From: Lewis Larsen <lewis@larsens.dev>
Date: Sat, 27 Jul 2024 16:50:49 +0100
Subject: [PATCH] style: Various improvements

---
 .../partials/account-wrapper.blade.php        |  16 ++-
 .../views/account/partials/sidebar.blade.php  |  48 +++----
 .../views/components/dropdown-link.blade.php  |  13 +-
 resources/views/components/dropdown.blade.php |  53 ++++---
 resources/views/components/nav-link.blade.php |  14 +-
 .../components/responsive-nav-link.blade.php  |  14 +-
 .../components/sidebar-nav-link.blade.php     |   8 +-
 .../views/components/theme-switcher.blade.php | 130 ++++++++++--------
 .../livewire/layout/navigation.blade.php      | 102 +++++++++-----
 9 files changed, 234 insertions(+), 164 deletions(-)

diff --git a/resources/views/account/partials/account-wrapper.blade.php b/resources/views/account/partials/account-wrapper.blade.php
index c057f5ad..0a606e0b 100644
--- a/resources/views/account/partials/account-wrapper.blade.php
+++ b/resources/views/account/partials/account-wrapper.blade.php
@@ -6,13 +6,15 @@
             {{ $pageTitle }}
         </h2>
     </x-slot>
-    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div class="flex flex-col lg:flex-row xl:mt-8">
-            <nav class="relative mb-4 w-full lg:mb-0 lg:w-1/5 xl:w-1/6 lg:pr-6">
-                <x-account-sidebar />
-            </nav>
-            <div class="flex flex-col lg:w-4/5 xl:w-5/6">
-                {{ $slot }}
+    <div class="py-6 sm:py-8 lg:py-12">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <div class="flex flex-col lg:flex-row gap-6 lg:gap-8">
+                <nav class="w-full lg:w-64 xl:w-72 shrink-0">
+                    <x-account-sidebar/>
+                </nav>
+                <main class="flex-1 min-w-0">
+                    {{ $slot }}
+                </main>
             </div>
         </div>
     </div>
diff --git a/resources/views/account/partials/sidebar.blade.php b/resources/views/account/partials/sidebar.blade.php
index be225fb5..532c4378 100644
--- a/resources/views/account/partials/sidebar.blade.php
+++ b/resources/views/account/partials/sidebar.blade.php
@@ -1,46 +1,34 @@
-<nav class="bg-gray-100 dark:bg-gray-800 rounded-lg p-1.5 lg:p-3 w-full">
-    <ul class="flex lg:flex-col space-x-1 lg:space-x-0 lg:space-y-2 justify-center lg:justify-start">
-        <li class="flex-1 lg:flex-none">
+<nav class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-2 w-full">
+    <ul class="flex lg:flex-col space-x-1 lg:space-x-0 lg:space-y-1 justify-around lg:justify-start">
+        <li class="flex-1 lg:flex-initial">
             <x-sidebar-nav-link :href="route('profile')" :active="request()->routeIs('profile')" wire:navigate>
-                <span class="lg:hidden flex items-center justify-center h-10">
-                    @svg('heroicon-o-user', 'h-5 w-5')
-                </span>
-                <span class="hidden lg:inline-flex items-center w-full">
-                    @svg('heroicon-o-user', 'h-5 w-5 mr-3')
-                    {{ __('Profile') }}
+                <span class="flex flex-col lg:flex-row items-center justify-center lg:justify-start py-2 lg:py-1.5">
+                    @svg('heroicon-o-user', 'h-6 w-6 lg:h-5 lg:w-5 lg:mr-2')
+                    <span class="text-xs mt-1 lg:mt-0 lg:text-sm">{{ __('Profile') }}</span>
                 </span>
             </x-sidebar-nav-link>
         </li>
-        <li class="flex-1 lg:flex-none">
+        <li class="flex-1 lg:flex-initial">
             <x-sidebar-nav-link :href="route('tags.index')" :active="request()->routeIs('tags.index')" wire:navigate>
-                <span class="lg:hidden flex items-center justify-center h-10">
-                    @svg('heroicon-o-tag', 'h-5 w-5')
-                </span>
-                <span class="hidden lg:inline-flex items-center w-full">
-                    @svg('heroicon-o-tag', 'h-5 w-5 mr-3')
-                    {{ __('Tags') }}
+                <span class="flex flex-col lg:flex-row items-center justify-center lg:justify-start py-2 lg:py-1.5">
+                    @svg('heroicon-o-tag', 'h-6 w-6 lg:h-5 lg:w-5 lg:mr-2')
+                    <span class="text-xs mt-1 lg:mt-0 lg:text-sm">{{ __('Tags') }}</span>
                 </span>
             </x-sidebar-nav-link>
         </li>
-        <li class="flex-1 lg:flex-none">
+        <li class="flex-1 lg:flex-initial">
             <x-sidebar-nav-link :href="route('notification-streams.index')" :active="request()->routeIs('notification-streams.index')" wire:navigate>
-                <span class="lg:hidden flex items-center justify-center h-10">
-                    @svg('heroicon-o-bell', 'h-5 w-5')
-                </span>
-                <span class="hidden lg:inline-flex items-center w-full">
-                    @svg('heroicon-o-bell', 'h-5 w-5 mr-3')
-                    {{ __('Notifications') }}
+                <span class="flex flex-col lg:flex-row items-center justify-center lg:justify-start py-2 lg:py-1.5">
+                    @svg('heroicon-o-bell', 'h-6 w-6 lg:h-5 lg:w-5 lg:mr-2')
+                    <span class="text-xs mt-1 lg:mt-0 lg:text-sm">{{ __('Notifications') }}</span>
                 </span>
             </x-sidebar-nav-link>
         </li>
-        <li class="flex-1 lg:flex-none">
+        <li class="flex-1 lg:flex-initial">
             <x-sidebar-nav-link :href="route('account.remove-account')" :active="request()->routeIs('account.remove-account')" wire:navigate>
-                <span class="lg:hidden flex items-center justify-center h-10">
-                    @svg('heroicon-o-trash', 'h-5 w-5')
-                </span>
-                <span class="hidden lg:inline-flex items-center w-full">
-                    @svg('heroicon-o-trash', 'h-5 w-5 mr-3')
-                    {{ __('Remove Account') }}
+                <span class="flex flex-col lg:flex-row items-center justify-center lg:justify-start py-2 lg:py-1.5">
+                    @svg('heroicon-o-trash', 'h-6 w-6 lg:h-5 lg:w-5 lg:mr-2')
+                    <span class="text-xs mt-1 lg:mt-0 lg:text-sm">{{ __('Remove') }}</span>
                 </span>
             </x-sidebar-nav-link>
         </li>
diff --git a/resources/views/components/dropdown-link.blade.php b/resources/views/components/dropdown-link.blade.php
index 6d5279d8..525bbd9b 100644
--- a/resources/views/components/dropdown-link.blade.php
+++ b/resources/views/components/dropdown-link.blade.php
@@ -1 +1,12 @@
-<a {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out']) }}>{{ $slot }}</a>
+@props(['active' => false])
+
+@php
+    $classes = 'block w-full px-4 py-2 text-start text-sm leading-5 transition duration-150 ease-in-out ';
+    $classes .= $active
+        ? 'text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-700'
+        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700';
+@endphp
+
+<a {{ $attributes->merge(['class' => $classes]) }}>
+    {{ $slot }}
+</a>
diff --git a/resources/views/components/dropdown.blade.php b/resources/views/components/dropdown.blade.php
index 65d29d88..9fb83ca9 100644
--- a/resources/views/components/dropdown.blade.php
+++ b/resources/views/components/dropdown.blade.php
@@ -1,42 +1,35 @@
-@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white dark:bg-gray-700'])
+@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white dark:bg-gray-800'])
 
 @php
-switch ($align) {
-    case 'left':
-        $alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0';
-        break;
-    case 'top':
-        $alignmentClasses = 'origin-top';
-        break;
-    case 'right':
-    default:
-        $alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0';
-        break;
-}
+    $alignmentClasses = match ($align) {
+        'left' => 'ltr:origin-top-left rtl:origin-top-right start-0',
+        'top' => 'origin-top',
+        'right' => 'ltr:origin-top-right rtl:origin-top-left end-0',
+        default => 'ltr:origin-top-right rtl:origin-top-left end-0',
+    };
 
-switch ($width) {
-    case '48':
-        $width = 'w-48';
-        break;
-}
+    $width = match ($width) {
+        '48' => 'w-48',
+        default => $width,
+    };
 @endphp
 
-<div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
-    <div @click="open = ! open">
+<div class="relative" x-data="{ open: false }" @click.away="open = false" @close.stop="open = false">
+    <div @click="open = !open">
         {{ $trigger }}
     </div>
 
     <div x-show="open"
-            x-transition:enter="transition ease-out duration-200"
-            x-transition:enter-start="opacity-0 scale-95"
-            x-transition:enter-end="opacity-100 scale-100"
-            x-transition:leave="transition ease-in duration-75"
-            x-transition:leave-start="opacity-100 scale-100"
-            x-transition:leave-end="opacity-0 scale-95"
-            class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
-            style="display: none;"
-            @click="open = false">
-        <div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
+         x-transition:enter="transition ease-out duration-300"
+         x-transition:enter-start="opacity-0 transform scale-95 translate-y-2"
+         x-transition:enter-end="opacity-100 transform scale-100 translate-y-0"
+         x-transition:leave="transition ease-in duration-200"
+         x-transition:leave-start="opacity-100 transform scale-100 translate-y-0"
+         x-transition:leave-end="opacity-0 transform scale-95 translate-y-2"
+         class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
+         style="display: none;"
+         @click="open = false">
+        <div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }} overflow-hidden">
             {{ $content }}
         </div>
     </div>
diff --git a/resources/views/components/nav-link.blade.php b/resources/views/components/nav-link.blade.php
index 5d655a56..18d0fb8b 100644
--- a/resources/views/components/nav-link.blade.php
+++ b/resources/views/components/nav-link.blade.php
@@ -2,13 +2,23 @@
 
 @php
     $classes = ($active ?? false)
-                ? 'flex items-center h-16 text-sm font-semibold leading-5 text-white focus:outline-none transition duration-150 ease-in-out relative group'
-                : 'flex items-center h-16 text-sm font-semibold leading-5 text-gray-200 hover:text-white focus:outline-none focus:text-white transition duration-150 ease-in-out relative group';
+                ? 'flex items-center h-16 text-sm font-semibold leading-5 text-white focus:outline-none transition duration-300 ease-in-out relative group overflow-hidden'
+                : 'flex items-center h-16 text-sm font-semibold leading-5 text-gray-200 hover:text-white focus:outline-none focus:text-white transition duration-300 ease-in-out relative group overflow-hidden';
 @endphp
 
 <a {{ $attributes->merge(['class' => $classes]) }}>
     <span class="flex items-center px-3 h-full relative z-10">
         {{ $slot }}
     </span>
+
+    {{-- Active indicator --}}
+    @if($active ?? false)
+        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white"></span>
+    @endif
+
+    {{-- Hover indicator --}}
     <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 origin-left transition-transform duration-300 ease-out group-hover:scale-x-100"></span>
+
+    {{-- Subtle glow effect --}}
+    <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300 ease-in-out"></span>
 </a>
diff --git a/resources/views/components/responsive-nav-link.blade.php b/resources/views/components/responsive-nav-link.blade.php
index e55b1748..f321f07f 100644
--- a/resources/views/components/responsive-nav-link.blade.php
+++ b/resources/views/components/responsive-nav-link.blade.php
@@ -1,11 +1,17 @@
 @props(['active'])
 
 @php
-    $classes = ($active ?? false)
-                ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-white text-start text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-800 focus:border-white transition duration-150 ease-in-out'
-                : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-200 hover:text-gray-200 hover:bg-gray-700 hover:border-gray-100 focus:outline-none focus:text-gray-200 focus:bg-gray-800 focus:border-gray-100 transition duration-150 ease-in-out';
+    $classes = 'block w-full px-4 py-2 text-base font-medium transition duration-200 ease-in-out ';
+    $classes .= ($active ?? false)
+        ? 'text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white'
+        : 'text-gray-300 hover:bg-gray-700 hover:text-white focus:outline-none focus:bg-gray-700 focus:text-white';
 @endphp
 
 <a {{ $attributes->merge(['class' => $classes]) }}>
-    {{ $slot }}
+    <div class="flex items-center">
+        @if ($active ?? false)
+            <span class="absolute left-0 inset-y-0 w-1 bg-white rounded-r-full" aria-hidden="true"></span>
+        @endif
+        <span class="relative">{{ $slot }}</span>
+    </div>
 </a>
diff --git a/resources/views/components/sidebar-nav-link.blade.php b/resources/views/components/sidebar-nav-link.blade.php
index 0fca0e2a..e5e5697b 100644
--- a/resources/views/components/sidebar-nav-link.blade.php
+++ b/resources/views/components/sidebar-nav-link.blade.php
@@ -1,11 +1,11 @@
 @props(['active'])
 
 @php
-    $classes = 'block rounded-md text-sm font-medium transition-colors duration-150 ease-in-out w-full ';
+    $classes = 'block rounded text-xs lg:text-sm font-medium transition-all duration-200 ease-in-out w-full ';
     $classes .= ($active ?? false)
-        ? 'bg-white dark:bg-gray-700 text-gray-950 dark:text-gray-200 shadow-none'
-        : 'text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-400';
-    $classes .= ' py-2 px-3 lg:py-2.5 lg:px-3'; // Added padding here
+        ? 'bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-100 shadow-sm'
+        : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100';
+    $classes .= ' px-1 py-1 lg:px-2 lg:py-1.5';
 @endphp
 
 <a {{ $attributes->merge(['class' => $classes]) }}>
diff --git a/resources/views/components/theme-switcher.blade.php b/resources/views/components/theme-switcher.blade.php
index a672a14d..f60988a2 100644
--- a/resources/views/components/theme-switcher.blade.php
+++ b/resources/views/components/theme-switcher.blade.php
@@ -1,71 +1,91 @@
 <script>
-    setDarkClass = () => {
-        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            document.documentElement.classList.add('dark')
-            window.dispatchEvent(new CustomEvent('themeChanged', { detail: 'dark' }))
-        } else {
-            document.documentElement.classList.remove('dark')
-            window.dispatchEvent(new CustomEvent('themeChanged', { detail: 'light' }))
+    function setupThemeSwitcher() {
+        return {
+            theme: localStorage.theme || 'system',
+            isOpen: false,
+            setTheme(newTheme) {
+                this.theme = newTheme;
+                localStorage.theme = newTheme === 'system' ? '' : newTheme;
+                this.updateTheme();
+                this.isOpen = false;
+            },
+            updateTheme() {
+                if (this.theme === 'dark' || (this.theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                    document.documentElement.classList.add('dark');
+                } else {
+                    document.documentElement.classList.remove('dark');
+                }
+                window.dispatchEvent(new CustomEvent('themeChanged', { detail: this.theme }));
+            },
+            init() {
+                this.updateTheme();
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => this.updateTheme());
+            }
         }
     }
-
-    setDarkClass()
-
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', setDarkClass)
 </script>
 
-<div
-    class="relative"
-    x-data="{
-        menu: false,
-        theme: localStorage.theme || 'system',
-        darkMode() {
-            this.theme = 'dark'
-            localStorage.theme = 'dark'
-            setDarkClass()
-        },
-        lightMode() {
-            this.theme = 'light'
-            localStorage.theme = 'light'
-            setDarkClass()
-        },
-        systemMode() {
-            this.theme = 'system'
-            localStorage.removeItem('theme')
-            setDarkClass()
-        },
-    }"
-    @click.outside="menu = false"
->
+<div x-data="setupThemeSwitcher()" x-init="init()" class="relative" @keydown.escape="isOpen = false">
     <button
-        x-cloak
-        class="block p-1 text-gray-400 hover:text-gray-200 ease-in-out"
-        :class="{'text-white dark:text-gray-300': theme !== 'system'}"
-        @click="menu = !menu"
+        @click="isOpen = !isOpen"
+        class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none focus:text-gray-700 dark:focus:text-gray-200 transition duration-150 ease-in-out"
+        :aria-expanded="isOpen"
     >
-        <template x-if="theme === 'light'">
-            @svg('heroicon-o-sun', 'w-5 h-5')
-        </template>
-        <template x-if="theme === 'dark'">
-            @svg('heroicon-o-moon', 'w-5 h-5')
-        </template>
-        <template x-if="theme === 'system'">
-            @svg('heroicon-o-computer-desktop', 'w-5 h-5')
-        </template>
+        <span class="sr-only">{{ __('Toggle theme') }}</span>
+        <svg x-show="theme === 'light'" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+        </svg>
+        <svg x-show="theme === 'dark'" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+        </svg>
+        <svg x-show="theme === 'system'" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+        </svg>
+        <svg class="ml-1 w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
     </button>
 
-    <div x-show="menu" class="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 z-50" style="display: none;">
-        <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
-            <button class="flex items-center w-full px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600" role="menuitem" @click="lightMode(); menu = false">
-                @svg('heroicon-o-sun', 'w-5 h-5 mr-3')
+    <div
+        x-show="isOpen"
+        x-transition:enter="transition ease-out duration-100"
+        x-transition:enter-start="transform opacity-0 scale-95"
+        x-transition:enter-end="transform opacity-100 scale-100"
+        x-transition:leave="transition ease-in duration-75"
+        x-transition:leave-start="transform opacity-100 scale-100"
+        x-transition:leave-end="transform opacity-0 scale-95"
+        class="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-50 divide-y divide-gray-100 dark:divide-gray-700"
+        style="display: none;"
+    >
+        <div class="py-1" role="menu" aria-orientation="vertical">
+            <button
+                @click="setTheme('light')"
+                class="flex items-center w-full px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+                role="menuitem"
+            >
+                <svg class="w-4 h-4 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
                 {{ __('Light') }}
             </button>
-            <button class="flex items-center w-full px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600" role="menuitem" @click="darkMode(); menu = false">
-                @svg('heroicon-o-moon', 'w-5 h-5 mr-3')
+            <button
+                @click="setTheme('dark')"
+                class="flex items-center w-full px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+                role="menuitem"
+            >
+                <svg class="w-4 h-4 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                </svg>
                 {{ __('Dark') }}
             </button>
-            <button class="flex items-center w-full px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600" role="menuitem" @click="systemMode(); menu = false">
-                @svg('heroicon-o-computer-desktop', 'w-5 h-5 mr-3')
+            <button
+                @click="setTheme('system')"
+                class="flex items-center w-full px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+                role="menuitem"
+            >
+                <svg class="w-4 h-4 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                </svg>
                 {{ __('System') }}
             </button>
         </div>
diff --git a/resources/views/livewire/layout/navigation.blade.php b/resources/views/livewire/layout/navigation.blade.php
index 2ed9c1da..72fa6669 100644
--- a/resources/views/livewire/layout/navigation.blade.php
+++ b/resources/views/livewire/layout/navigation.blade.php
@@ -29,13 +29,14 @@ public function toggleUserDropdown(): void
     open: @entangle('isMobileMenuOpen'),
     userOpen: @entangle('isUserDropdownOpen'),
     desktopDropdownOpen: false
-}" class="bg-primary-950 border-b border-gray-900">
+}" class="bg-primary-950 border-b border-gray-900 sticky top-0 z-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between h-16">
             <!-- Logo and Primary Navigation -->
-            <div class="flex items-center">
-                <a href="{{ route('overview') }}" wire:navigate class="flex-shrink-0 flex items-center">
-                    <x-application-logo class="block h-6 w-auto fill-current text-white"/>
+            <div class="flex items-center justify-between w-full md:w-auto">
+                <div class="md:hidden flex-grow"></div>
+                <a href="{{ route('overview') }}" wire:navigate class="flex-shrink-0 flex items-center mx-auto md:mx-0 group">
+                    <x-application-logo class="block h-7 w-auto fill-current text-white transition duration-300 ease-in-out transform group-hover:scale-110"/>
                 </a>
                 <div class="hidden md:ml-6 md:flex md:space-x-1">
                     <x-nav-link :href="route('overview')" :active="request()->routeIs('overview')" wire:navigate>
@@ -49,6 +50,18 @@ public function toggleUserDropdown(): void
                         </x-nav-link>
                     @endif
                 </div>
+                <div class="md:hidden flex-grow flex justify-end">
+                    <!-- Mobile menu button -->
+                    <button wire:click="toggleMobileMenu" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white transition duration-150 ease-in-out" aria-label="Toggle mobile menu">
+                        <span class="sr-only">Open main menu</span>
+                        <svg class="h-6 w-6 transition-opacity duration-200 ease-in-out" :class="{'opacity-0': open, 'opacity-100': !open}" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                        <svg class="h-6 w-6 transition-opacity duration-200 ease-in-out absolute" :class="{'opacity-100': open, 'opacity-0': !open}" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
             </div>
 
             <!-- Secondary Navigation and User Menu -->
@@ -71,7 +84,8 @@ public function toggleUserDropdown(): void
                     <x-theme-switcher />
                     <x-dropdown align="right" width="48">
                         <x-slot name="trigger">
-                            <button @click="desktopDropdownOpen = !desktopDropdownOpen" class="flex items-center text-sm font-medium text-gray-50 hover:text-gray-100 focus:outline-none transition duration-150 ease-in-out">
+                            <button @click="desktopDropdownOpen = !desktopDropdownOpen" class="flex items-center text-sm font-medium text-gray-50 hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white transition duration-150 ease-in-out" aria-expanded="false">
+                                <span class="sr-only">Open user menu</span>
                                 <img class="h-8 w-8 rounded-full mr-2 border border-gray-950" src="{{ Auth::user()->gravatar() }}" alt="{{ Auth::user()->name }}"/>
                                 <span x-data="{ name: @js(auth()->user()->first_name) }" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></span>
                                 <svg class="ml-2 h-4 w-4 transition-transform duration-200 ease-in-out" :class="{'rotate-180': desktopDropdownOpen}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -80,37 +94,45 @@ public function toggleUserDropdown(): void
                             </button>
                         </x-slot>
                         <x-slot name="content">
-                            <x-dropdown-link :href="route('profile')" wire:navigate>{{ __('Profile') }}</x-dropdown-link>
-                            <x-dropdown-link :href="route('tags.index')" wire:navigate>{{ __('Tags') }}</x-dropdown-link>
-                            <x-dropdown-link :href="route('notification-streams.index')" wire:navigate>{{ __('Notifications') }}</x-dropdown-link>
+                            <x-dropdown-link :href="route('profile')" wire:navigate>
+                                @svg('heroicon-o-user-circle', 'h-5 w-5 mr-2 inline')
+                                {{ __('Profile') }}
+                            </x-dropdown-link>
+                            <x-dropdown-link :href="route('tags.index')" wire:navigate>
+                                @svg('heroicon-o-tag', 'h-5 w-5 mr-2 inline')
+                                {{ __('Tags') }}
+                            </x-dropdown-link>
+                            <x-dropdown-link :href="route('notification-streams.index')" wire:navigate>
+                                @svg('heroicon-o-bell', 'h-5 w-5 mr-2 inline')
+                                {{ __('Notifications') }}
+                            </x-dropdown-link>
                             @if (Auth::user()->isAdmin())
-                                <x-dropdown-link href="{{ url('/pulse') }}">Laravel Pulse</x-dropdown-link>
-                                <x-dropdown-link href="{{ url('/horizon/dashboard') }}">Laravel Horizon</x-dropdown-link>
+                                <div class="border-t border-gray-200 dark:border-gray-600"></div>
+                                <x-dropdown-link href="{{ url('/pulse') }}">
+                                    @svg('heroicon-o-chart-bar', 'h-5 w-5 mr-2 inline')
+                                    Laravel Pulse
+                                </x-dropdown-link>
+                                <x-dropdown-link href="{{ url('/horizon/dashboard') }}">
+                                    @svg('heroicon-o-cpu-chip', 'h-5 w-5 mr-2 inline')
+                                    Laravel Horizon
+                                </x-dropdown-link>
                             @endif
-                            <button wire:click="logout" class="w-full text-start">
-                                <x-dropdown-link>{{ __('Log Out') }}</x-dropdown-link>
+                            <div class="border-t border-gray-200 dark:border-gray-600"></div>
+                            <button wire:click="logout" class="w-full text-start" role="menuitem">
+                                <x-dropdown-link>
+                                    @svg('heroicon-o-arrow-left-on-rectangle', 'h-5 w-5 mr-2 inline')
+                                    {{ __('Log Out') }}
+                                </x-dropdown-link>
                             </button>
                         </x-slot>
                     </x-dropdown>
                 </div>
             </div>
-
-            <!-- Mobile menu button -->
-            <div class="flex items-center md:hidden">
-                <button wire:click="toggleMobileMenu" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white transition duration-150 ease-in-out" aria-label="Toggle mobile menu">
-                    <svg class="h-6 w-6 transition-opacity duration-200 ease-in-out" :class="{'opacity-0': open, 'opacity-100': !open}" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                    </svg>
-                    <svg class="h-6 w-6 transition-opacity duration-200 ease-in-out absolute" :class="{'opacity-100': open, 'opacity-0': !open}" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                </button>
-            </div>
         </div>
     </div>
 
     <!-- Mobile menu -->
-    <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform translate-y-0" x-transition:leave-end="opacity-0 transform -translate-y-2" class="md:hidden">
+    <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform translate-y-0" x-transition:leave-end="opacity-0 transform -translate-y-2" class="md:hidden" x-trap="open">
         <div class="px-2 pt-2 pb-3 space-y-1">
             <x-responsive-nav-link :href="route('overview')" :active="request()->routeIs('overview')" wire:navigate>
                 @svg('heroicon-o-' . (Auth::user()->backupTasks->isNotEmpty() ? 'book-open' : 'rocket-launch'), 'h-5 w-5 text-gray-50 mr-2 inline')
@@ -146,15 +168,33 @@ public function toggleUserDropdown(): void
                 </div>
             </div>
             <div class="mt-3 px-2 space-y-1">
-                <x-responsive-nav-link :href="route('profile')" wire:navigate>{{ __('Profile') }}</x-responsive-nav-link>
-                <x-responsive-nav-link :href="route('tags.index')" wire:navigate>{{ __('Tags') }}</x-responsive-nav-link>
-                <x-responsive-nav-link :href="route('notification-streams.index')" wire:navigate>{{ __('Notifications') }}</x-responsive-nav-link>
+                <x-responsive-nav-link :href="route('profile')" wire:navigate>
+                    @svg('heroicon-o-user-circle', 'h-5 w-5 text-gray-50 mr-2 inline')
+                    {{ __('Profile') }}
+                </x-responsive-nav-link>
+                <x-responsive-nav-link :href="route('tags.index')" wire:navigate>
+                    @svg('heroicon-o-tag', 'h-5 w-5 text-gray-50 mr-2 inline')
+                    {{ __('Tags') }}
+                </x-responsive-nav-link>
+                <x-responsive-nav-link :href="route('notification-streams.index')" wire:navigate>
+                    @svg('heroicon-o-bell', 'h-5 w-5 text-gray-50 mr-2 inline')
+                    {{ __('Notifications') }}
+                </x-responsive-nav-link>
                 @if (Auth::user()->isAdmin())
-                    <x-responsive-nav-link href="{{ url('/pulse') }}">Laravel Pulse</x-responsive-nav-link>
-                    <x-responsive-nav-link href="{{ url('/horizon/dashboard') }}">Laravel Horizon</x-responsive-nav-link>
+                    <x-responsive-nav-link href="{{ url('/pulse') }}">
+                        @svg('heroicon-o-chart-bar', 'h-5 w-5 text-gray-50 mr-2 inline')
+                        Laravel Pulse
+                    </x-responsive-nav-link>
+                    <x-responsive-nav-link href="{{ url('/horizon/dashboard') }}">
+                        @svg('heroicon-o-cpu-chip', 'h-5 w-5 text-gray-50 mr-2 inline')
+                        Laravel Horizon
+                    </x-responsive-nav-link>
                 @endif
                 <button wire:click="logout" class="w-full text-start">
-                    <x-responsive-nav-link>{{ __('Log Out') }}</x-responsive-nav-link>
+                    <x-responsive-nav-link>
+                        @svg('heroicon-o-arrow-left-on-rectangle', 'h-5 w-5 text-gray-50 mr-2 inline')
+                        {{ __('Log Out') }}
+                    </x-responsive-nav-link>
                 </button>
                 <div class="px-2 py-2">
                     <x-responsive-theme-switcher />