usite-sas-bic/sirpremiumv2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor navigation layout for improved structure

Browse Source 
Reorganized the navigation sidebar to use a flex column layout and moved the menu and user info into a scrollable container. Improved sticky header behavior, added a logout button at the bottom, and fixed minor styling issues for better usability and maintainability.
This commit is contained in:
Juan Felipe Duarte
2025-09-23 09:48:02 -05:00
parent 9b9ada492a
commit 35b4f51aee
1 changed files with 225 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/layouts/navigation.blade.php
+12 -7
View File
@@ -4,25 +4,26 @@
$bg = $config->color_barra ?? '#0000ff'; $bg = $config->color_barra ?? '#0000ff';
@endphp @endphp
<aside x-cloak :class="openAside ? 'translate-x-0' : '-translate-x-full'" class="z-20 fixed inset-y-0 left-0 w-64 transform transition-transform duration-300 ease-in-out h-screen overflow-y-auto shadow-lg" style="background: {{ $bg }};"> <aside x-cloak :class="openAside ? 'translate-x-0' : '-translate-x-full'" class="z-20 fixed inset-y-0 left-0 w-64 transform transition-transform duration-300 ease-in-out min-h-screen shadow-lg flex flex-col" style="background: {{ $bg }};">
<div class="flex items-center justify-between px-4 py-3 text-white border-b border-white/20"> <div class="flex items-center justify-between px-4 py-3 text-white border-b border-white/20 sticky top-0 bg-[{{ $bg }}] z-30">
<div> <div class="w-20">
<x-application-logo /> <x-application-logo />
</div> </div>
<button @click="openAside = !openAside" class="p-2 rounded-md text-white hover:bg-blue-900 focus:outline-none cursor-pointer"> <button @click="openAside = !openAside"
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> class="p-2 rounded-md text-white hover:bg-blue-900 focus:outline-none cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg> </svg>
</button> </button>
</div> </div>
<div class="flex-1 overflow-y-auto select-none">
<div class="text-center py-4 ms:py-6"> <div class="text-center py-4 ms:py-6">
<div class="font-medium text-base text-white">{{ Auth::user()->name ?? ''}}</div> <div class="font-medium text-base text-white">{{ Auth::user()->name ?? ''}}</div>
<div class="font-medium text-sm text-gray-500">{{ Auth::user()->email ?? ''}}</div> <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email ?? ''}}</div>
<div class="font-semibold text-sm text-gray-500 capitalize">{{ Auth::user()->rol->nombre ?? ''}}</div> <div class="font-semibold text-sm text-gray-500 capitalize">{{ Auth::user()->rol->nombre ?? ''}}</div>
</div>
<!-- Items del menú --> <!-- Items del menú -->
<nav class="px-4 mt-2 space-y-2 pb-4"> <nav class="px-4 mt-2 space-y-2 pb-4">
<a href="{{ route('dashboard') }}" class="flex items-center justify-start gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('dashboard') ? 'bg-white/20' : 'hover:bg-white/10' }}"> <a href="{{ route('dashboard') }}" class="flex items-center justify-start gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('dashboard') ? 'bg-white/20' : 'hover:bg-white/10' }}">
@@ -234,6 +235,10 @@
</button> </button>
</form> </form>
</nav> </nav>
</div>
</div>
</aside> </aside>