From 70dec7615e57cfd673c70bf809bb78deda04c125 Mon Sep 17 00:00:00 2001
From: Gbanyan <gbanyan.huang@gmail.com>
Date: Fri, 28 Nov 2025 00:17:02 +0800
Subject: [PATCH] Optimize Navigation Bar for overflow handling

- Grouped all Admin links into a 'Management' dropdown menu on desktop to prevent navbar overflow.
- Added a 'Management' section header to the mobile menu for better organization.
- Ensured the 'Management' dropdown trigger visually matches other nav links and indicates active state.
---
 resources/views/layouts/navigation.blade.php | 87 +++++++++++++-------
 1 file changed, 55 insertions(+), 32 deletions(-)

diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index 8659f59..edcc9a4 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -25,38 +25,56 @@
                     </x-nav-link>
 
                     @if(Auth::user())
-                        <x-nav-link :href="route('admin.members.index')" :active="request()->routeIs('admin.members.*')">
-                            {{ __('Admin: Members') }}
-                        </x-nav-link>
-                        <x-nav-link :href="route('admin.roles.index')" :active="request()->routeIs('admin.roles.*')">
-                            {{ __('Admin: Roles') }}
-                        </x-nav-link>
-                        <x-nav-link :href="route('admin.finance.index')" :active="request()->routeIs('admin.finance.*')">
-                            {{ __('Admin: Finance') }}
-                        </x-nav-link>
-                        <x-nav-link :href="route('admin.budgets.index')" :active="request()->routeIs('admin.budgets.*')">
-                            {{ __('Admin: Budgets') }}
-                        </x-nav-link>
-                        <x-nav-link :href="route('admin.transactions.index')" :active="request()->routeIs('admin.transactions.*')">
-                            {{ __('Admin: Transactions') }}
-                        </x-nav-link>
-                        <x-nav-link :href="route('admin.issues.index')" :active="request()->routeIs('admin.issues.*')">
-                            {{ __('Admin: Issues') }}
-                        </x-nav-link>
-                        <x-nav-link :href="route('admin.audit.index')" :active="request()->routeIs('admin.audit.*')">
-                            {{ __('Admin: Audit Logs') }}
-                        </x-nav-link>
-                        <x-nav-link :href="route('admin.document-categories.index')" :active="request()->routeIs('admin.document-categories.*')">
-                            {{ __('Admin: Document Categories') }}
-                        </x-nav-link>
-                        <x-nav-link :href="route('admin.documents.index')" :active="request()->routeIs('admin.documents.*')">
-                            {{ __('Admin: Documents') }}
-                        </x-nav-link>
-                        @can('manage_system_settings')
-                            <x-nav-link :href="route('admin.settings.general')" :active="request()->routeIs('admin.settings.*')">
-                                {{ __('Admin: System Settings') }}
-                            </x-nav-link>
-                        @endcan
+                        <div class="hidden sm:flex sm:items-center">
+                            <x-dropdown align="right" width="48">
+                                <x-slot name="trigger">
+                                    <button class="@if(request()->routeIs('admin.*')) inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out @else inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out @endif">
+                                        <div>{{ __('Management') }}</div>
+
+                                        <div class="ms-1">
+                                            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                                            </svg>
+                                        </div>
+                                    </button>
+                                </x-slot>
+
+                                <x-slot name="content">
+                                    <x-dropdown-link :href="route('admin.members.index')">
+                                        {{ __('Admin: Members') }}
+                                    </x-dropdown-link>
+                                    <x-dropdown-link :href="route('admin.roles.index')">
+                                        {{ __('Admin: Roles') }}
+                                    </x-dropdown-link>
+                                    <x-dropdown-link :href="route('admin.finance.index')">
+                                        {{ __('Admin: Finance') }}
+                                    </x-dropdown-link>
+                                    <x-dropdown-link :href="route('admin.budgets.index')">
+                                        {{ __('Admin: Budgets') }}
+                                    </x-dropdown-link>
+                                    <x-dropdown-link :href="route('admin.transactions.index')">
+                                        {{ __('Admin: Transactions') }}
+                                    </x-dropdown-link>
+                                    <x-dropdown-link :href="route('admin.issues.index')">
+                                        {{ __('Admin: Issues') }}
+                                    </x-dropdown-link>
+                                    <x-dropdown-link :href="route('admin.audit.index')">
+                                        {{ __('Admin: Audit Logs') }}
+                                    </x-dropdown-link>
+                                    <x-dropdown-link :href="route('admin.document-categories.index')">
+                                        {{ __('Admin: Document Categories') }}
+                                    </x-dropdown-link>
+                                    <x-dropdown-link :href="route('admin.documents.index')">
+                                        {{ __('Admin: Documents') }}
+                                    </x-dropdown-link>
+                                    @can('manage_system_settings')
+                                        <x-dropdown-link :href="route('admin.settings.general')">
+                                            {{ __('Admin: System Settings') }}
+                                        </x-dropdown-link>
+                                    @endcan
+                                </x-slot>
+                            </x-dropdown>
+                        </div>
                     @endif
                 </div>
             </div>
@@ -139,6 +157,11 @@
             </x-responsive-nav-link>
 
             @if(Auth::user())
+                <div class="pt-2 pb-1 border-t border-gray-200 dark:border-gray-700 mt-2">
+                    <div class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                        {{ __('Management') }}
+                    </div>
+                </div>
                 <x-responsive-nav-link :href="route('admin.members.index')" :active="request()->routeIs('admin.members.*')">
                     {{ __('Admin: Members') }}
                 </x-responsive-nav-link>