137 lines
8.7 KiB
HTML
Executable File
137 lines
8.7 KiB
HTML
Executable File
<div x-data="{
|
|
isSidebarOpen: false,
|
|
currentPath: window.location.pathname
|
|
}" class="flex min-h-screen">
|
|
|
|
<!-- Mobile menu button -->
|
|
<div class="md:hidden fixed top-3 left-3 z-50">
|
|
<button @click="isSidebarOpen = !isSidebarOpen"
|
|
class="p-2 rounded-xl shadow-lg text-white focus:outline-none"
|
|
style="background-color:#1e293b">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile overlay -->
|
|
<div x-show="isSidebarOpen"
|
|
@click="isSidebarOpen = false"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="fixed inset-0 bg-black/50 z-30 md:hidden"></div>
|
|
|
|
<!-- Sidebar -->
|
|
<div :class="{'translate-x-0': isSidebarOpen, '-translate-x-full': !isSidebarOpen}"
|
|
class="fixed z-40 transform md:translate-x-0 transition-transform duration-300 ease-in-out
|
|
w-64 h-screen flex flex-col"
|
|
style="background-color:#1e293b">
|
|
|
|
<!-- Logo Header -->
|
|
<div class="flex items-center justify-between px-5 h-16 flex-shrink-0"
|
|
style="border-bottom:1px solid rgba(255,255,255,0.07)">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0"
|
|
style="background-color:#8eb02f">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253M3 12c0 .778.099 1.533.284 2.253"/>
|
|
</svg>
|
|
</div>
|
|
<img src="/img/logo.webp" alt="U-site" class="h-6 w-auto object-contain opacity-90"
|
|
style="filter:brightness(0) invert(1)">
|
|
</div>
|
|
<!-- Close button for mobile -->
|
|
<button @click="isSidebarOpen = false"
|
|
class="md:hidden p-1 rounded-lg text-slate-400 hover:text-white hover:bg-white/10 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="flex-1 overflow-y-auto sidebar-scroll px-3 py-3">
|
|
<ul class="space-y-0.5">
|
|
{{range $moduleName, $submodules := .modules}}
|
|
<li x-data="{ showSubMenu: true }">
|
|
<!-- Module header -->
|
|
<button @click="showSubMenu = !showSubMenu"
|
|
class="w-full flex items-center justify-between px-3 py-2.5 rounded-xl transition-all duration-150 group"
|
|
:class="showSubMenu ? 'text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'">
|
|
<div class="flex items-center gap-2.5 min-w-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 flex-shrink-0 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/>
|
|
</svg>
|
|
<span class="text-xs font-semibold uppercase tracking-wider truncate">{{ $moduleName }}</span>
|
|
</div>
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="h-3.5 w-3.5 flex-shrink-0 transition-transform duration-200 opacity-50"
|
|
:class="showSubMenu ? 'rotate-180' : ''"
|
|
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Submodule links -->
|
|
<ul x-show="showSubMenu"
|
|
x-transition:enter="transition ease-out duration-150"
|
|
x-transition:enter-start="opacity-0 -translate-y-1"
|
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
class="mt-0.5 ml-3 pl-3 space-y-0.5"
|
|
style="border-left:1px solid rgba(255,255,255,0.07)">
|
|
{{range $submodule := $submodules}}
|
|
<li>
|
|
<a href="{{ $submodule.url }}"
|
|
class="flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium transition-all duration-150"
|
|
:class="currentPath === '{{ $submodule.url }}'
|
|
? 'text-white shadow-sm'
|
|
: 'text-slate-400 hover:text-white hover:bg-white/5'"
|
|
:style="currentPath === '{{ $submodule.url }}' ? 'background-color:#8eb02f' : ''">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 flex-shrink-0 opacity-70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
|
|
</svg>
|
|
{{ $submodule.title }}
|
|
</a>
|
|
</li>
|
|
{{end}}
|
|
</ul>
|
|
</li>
|
|
{{end}}
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- User section at bottom -->
|
|
<div class="flex-shrink-0 px-4 py-3" style="border-top:1px solid rgba(255,255,255,0.07)">
|
|
<div class="flex items-center gap-3">
|
|
<div class="ui-avatar ui-avatar-lg flex-shrink-0"
|
|
x-data="{n:'{{ .user.NombreUsuario }}'}"
|
|
x-text="n ? n.charAt(0).toUpperCase() : 'U'">
|
|
</div>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="text-sm font-semibold text-white truncate">{{ .user.NombreUsuario }}</p>
|
|
<p class="text-xs truncate" style="color:#64748b">{{ .user.Role.Name }}</p>
|
|
</div>
|
|
<a href="/do/logout"
|
|
onclick="event.preventDefault(); document.getElementById('sl-logout').submit();"
|
|
class="p-1.5 rounded-lg transition-colors flex-shrink-0"
|
|
style="color:#475569"
|
|
onmouseover="this.style.color='#f87171'; this.style.backgroundColor='rgba(255,255,255,0.05)'"
|
|
onmouseout="this.style.color='#475569'; this.style.backgroundColor=''"
|
|
title="Cerrar sesión">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/>
|
|
</svg>
|
|
</a>
|
|
<form id="sl-logout" action="/do/logout" method="POST" class="hidden"></form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Desktop spacer (pushes content) -->
|
|
<div class="hidden md:block w-64 flex-shrink-0"></div>
|
|
</div>
|