gbanyan/usher-manage-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize Navigation Bar for overflow handling

Browse Source 
- 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.
This commit is contained in:
Gbanyan
2025-11-28 00:17:02 +08:00
parent 56692bc540
commit 70dec7615e
1 changed files with 55 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
resources/views/layouts/navigation.blade.php
View File

@@ -25,38 +25,56 @@
</x-nav-link>
@if(Auth::user())
<x-nav-link :href="route('admin.members.index')" :active="request()->routeIs('admin.members.*')">
<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-nav-link>
<x-nav-link :href="route('admin.roles.index')" :active="request()->routeIs('admin.roles.*')">
</x-dropdown-link>
<x-dropdown-link :href="route('admin.roles.index')">
{{ __('Admin: Roles') }}
</x-nav-link>
<x-nav-link :href="route('admin.finance.index')" :active="request()->routeIs('admin.finance.*')">
</x-dropdown-link>
<x-dropdown-link :href="route('admin.finance.index')">
{{ __('Admin: Finance') }}
</x-nav-link>
<x-nav-link :href="route('admin.budgets.index')" :active="request()->routeIs('admin.budgets.*')">
</x-dropdown-link>
<x-dropdown-link :href="route('admin.budgets.index')">
{{ __('Admin: Budgets') }}
</x-nav-link>
<x-nav-link :href="route('admin.transactions.index')" :active="request()->routeIs('admin.transactions.*')">
</x-dropdown-link>
<x-dropdown-link :href="route('admin.transactions.index')">
{{ __('Admin: Transactions') }}
</x-nav-link>
<x-nav-link :href="route('admin.issues.index')" :active="request()->routeIs('admin.issues.*')">
</x-dropdown-link>
<x-dropdown-link :href="route('admin.issues.index')">
{{ __('Admin: Issues') }}
</x-nav-link>
<x-nav-link :href="route('admin.audit.index')" :active="request()->routeIs('admin.audit.*')">
</x-dropdown-link>
<x-dropdown-link :href="route('admin.audit.index')">
{{ __('Admin: Audit Logs') }}
</x-nav-link>
<x-nav-link :href="route('admin.document-categories.index')" :active="request()->routeIs('admin.document-categories.*')">
</x-dropdown-link>
<x-dropdown-link :href="route('admin.document-categories.index')">
{{ __('Admin: Document Categories') }}
</x-nav-link>
<x-nav-link :href="route('admin.documents.index')" :active="request()->routeIs('admin.documents.*')">
</x-dropdown-link>
<x-dropdown-link :href="route('admin.documents.index')">
{{ __('Admin: Documents') }}
</x-nav-link>
</x-dropdown-link>
@can('manage_system_settings')
<x-nav-link :href="route('admin.settings.general')" :active="request()->routeIs('admin.settings.*')">
<x-dropdown-link :href="route('admin.settings.general')">
{{ __('Admin: System Settings') }}
</x-nav-link>
</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>