style: Various improvements

vanguardbackup · Jul 27, 2024 · e038a3a · e038a3a
1 parent 61b11dd
commit e038a3a
Show file tree

Hide file tree

Showing 9 changed files with 234 additions and 164 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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]) }}>