gp
This commit is contained in:
@@ -1,120 +1,5 @@
|
||||
<!-- container -->
|
||||
<nav
|
||||
class="fixed bottom-0 w-full border bg-white hidden
|
||||
overflow-x-auto">
|
||||
<!-- Bottom Icon Navigation Menu -->
|
||||
|
||||
<a
|
||||
href="."
|
||||
class="flex flex-col flex-grow items-center justify-center
|
||||
overflow-hidden whitespace-no-wrap text-sm transition-colors
|
||||
duration-100 ease-in-out hover:bg-gray-200 focus:text-orange-500">
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
|
||||
<path
|
||||
d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0
|
||||
2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
|
||||
</svg>
|
||||
|
||||
<span class="hidden text-sm capitalize">Inbox</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="."
|
||||
class="flex flex-col flex-grow items-center justify-center
|
||||
overflow-hidden whitespace-no-wrap text-sm transition-colors
|
||||
duration-100 ease-in-out hover:bg-gray-200 text-orange-500">
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-github">
|
||||
<path
|
||||
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0
|
||||
0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77
|
||||
5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7
|
||||
0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0
|
||||
0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
||||
</svg>
|
||||
|
||||
<span class="text-sm capitalize">github</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="."
|
||||
class="flex flex-col flex-grow items-center justify-center
|
||||
overflow-hidden whitespace-no-wrap text-sm transition-colors
|
||||
duration-100 ease-in-out hover:bg-gray-200 focus:text-orange-500">
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-bookmark">
|
||||
<path
|
||||
d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
|
||||
</svg>
|
||||
|
||||
<span class="hidden text-sm capitalize">bookmark</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="."
|
||||
class="flex flex-col flex-grow items-center justify-center
|
||||
overflow-hidden whitespace-no-wrap text-sm transition-colors
|
||||
duration-100 ease-in-out hover:bg-gray-200 focus:text-orange-500">
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<path
|
||||
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83
|
||||
2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65
|
||||
0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0
|
||||
0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2
|
||||
2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0
|
||||
0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0
|
||||
4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2
|
||||
0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0
|
||||
1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1
|
||||
1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0
|
||||
0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0
|
||||
1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0
|
||||
0-1.51 1z"></path>
|
||||
</svg>
|
||||
|
||||
<span class="hidden text-sm capitalize">Settings</span>
|
||||
</a>
|
||||
|
||||
</nav>
|
||||
<!-- Footer minimal — oculto en desktop, visible solo en impresión -->
|
||||
<footer class="hidden print:flex items-center justify-between px-6 py-3 border-t border-slate-200 bg-white text-xs text-slate-400">
|
||||
<span>U-site © 2025</span>
|
||||
<span>Panel de administración</span>
|
||||
</footer>
|
||||
|
||||
@@ -1,41 +1,82 @@
|
||||
<nav class="px-1 md:px-4 flex justify-between bg-white h-16 border-b-2" x-data="{
|
||||
open: false,
|
||||
}">
|
||||
<!-- top bar -->
|
||||
<header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-4 md:px-6 flex-shrink-0 z-20"
|
||||
x-data="{
|
||||
open: false,
|
||||
initial: '{{ .user.NombreUsuario }}'.charAt(0).toUpperCase() || 'U',
|
||||
userName: '{{ .user.NombreUsuario }}',
|
||||
roleName: '{{ .user.Role.Name }}'
|
||||
}">
|
||||
|
||||
<ul class="flex items-center md:hidden">
|
||||
<!-- top bar left -->
|
||||
<div class="items-center justify-start h-16 md:px-10 py-2 object-cover">
|
||||
<img src="/img/logo.webp" alt="" class="w-20 ml-11 mt-1 md:mt-0 md:ml-0">
|
||||
<!-- Left: page context -->
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Mobile logo placeholder (sidebar button is in lateral.html) -->
|
||||
<div class="md:hidden w-8"></div>
|
||||
<!-- Breadcrumb / title area -->
|
||||
<div class="hidden sm:flex items-center gap-2 text-sm text-slate-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>
|
||||
</svg>
|
||||
<span class="text-slate-400">Panel de control</span>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="flex items-center">
|
||||
<!-- top bar center -->
|
||||
<li>
|
||||
<h1 class="mx-2 lg:pl-0 text-gray-700 md:text-sm text-xs" >{{ .user.NombreUsuario }} - {{ .user.Role.Name }}</h1>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Right: actions + user menu -->
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- User info (desktop) -->
|
||||
<div class="hidden md:flex flex-col items-end mr-1">
|
||||
<span class="text-xs font-semibold text-slate-700 leading-tight" x-text="userName"></span>
|
||||
<span class="text-xs text-slate-400 leading-tight" x-text="roleName"></span>
|
||||
</div>
|
||||
|
||||
<ul class="flex items-center">
|
||||
<!-- top bar right -->
|
||||
<li class="h-8 w-8 relative profile-action">
|
||||
<button @click="open = !open" class="block h-8 w-8 rounded-full overflow-hidden border-1 border-gray-600 focus:outline-none focus:border-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
<!-- Avatar dropdown -->
|
||||
<div class="relative">
|
||||
<button @click="open = !open"
|
||||
class="flex items-center gap-2 p-1 rounded-xl hover:bg-slate-100 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1"
|
||||
style="--tw-ring-color:#8eb02f">
|
||||
<div class="ui-avatar ui-avatar-lg" x-text="initial"></div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-3.5 w-3.5 text-slate-400 transition-transform duration-150"
|
||||
:class="open ? '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>
|
||||
|
||||
<!-- dropdown menu -->
|
||||
<div x-show="open" @click.outside="open = false" class="profile-action-dropdown absolute bg-gray-100 border border-t-0 shadow-xl text-gray-700 rounded-lg overflow-hidden w-48 top-10 right-0 mr-6 z-10">
|
||||
<a href="/app/profile" class="block px-4 py-2 hover:bg-gray-200">Mi cuenta</a>
|
||||
<a href="/do/logout" class="block px-4 py-2 hover:bg-gray-200"
|
||||
onclick="event.preventDefault(); document.getElementById('logout-form-profile').submit();">
|
||||
Cerrar sesión
|
||||
</a>
|
||||
<form id="logout-form-profile" action="/do/logout" method="POST" style="display: none;"></form>
|
||||
<!-- Dropdown -->
|
||||
<div x-show="open"
|
||||
@click.outside="open = false"
|
||||
x-transition:enter="transition ease-out duration-150"
|
||||
x-transition:enter-start="opacity-0 scale-95 -translate-y-1"
|
||||
x-transition:enter-end="opacity-100 scale-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-100"
|
||||
x-transition:leave-start="opacity-100 scale-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 scale-95 -translate-y-1"
|
||||
class="absolute right-0 top-12 w-52 bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden z-50">
|
||||
<!-- User info in dropdown -->
|
||||
<div class="px-4 py-3 border-b border-slate-100">
|
||||
<p class="text-sm font-semibold text-slate-800 truncate" x-text="userName"></p>
|
||||
<p class="text-xs text-slate-500 truncate" x-text="roleName"></p>
|
||||
</div>
|
||||
<!-- Links -->
|
||||
<div class="py-1">
|
||||
<a href="/app/profile"
|
||||
class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
Mi cuenta
|
||||
</a>
|
||||
<div class="border-t border-slate-100 my-1"></div>
|
||||
<a href="/do/logout"
|
||||
class="flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 transition-colors"
|
||||
onclick="event.preventDefault(); document.getElementById('header-logout').submit();">
|
||||
<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>
|
||||
Cerrar sesión
|
||||
</a>
|
||||
<form id="header-logout" action="/do/logout" method="POST" class="hidden"></form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- dropdown menu end -->
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -1,88 +1,136 @@
|
||||
<div x-data="{
|
||||
<div x-data="{
|
||||
isSidebarOpen: false,
|
||||
currentPath: window.location.pathname
|
||||
}" class="flex min-h-screen">
|
||||
|
||||
<!-- Botón de menú para dispositivos móviles -->
|
||||
<div class="md:hidden fixed top-4 left-4 z-50">
|
||||
<button @click="isSidebarOpen = !isSidebarOpen" class="text-black focus:outline-none">
|
||||
<svg x-show="!isSidebarOpen" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<svg x-show="isSidebarOpen" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
<!-- 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>
|
||||
|
||||
<!-- Overlay para dispositivos móviles -->
|
||||
<div x-show="isSidebarOpen" @click="isSidebarOpen = false"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden"></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>
|
||||
|
||||
<!-- Barra lateral -->
|
||||
<div :class="{'translate-x-0': isSidebarOpen, '-translate-x-full': !isSidebarOpen}" class="fixed z-30 md:relative transform md:translate-x-0 transition-transform duration-300 ease-in-out w-64 md:w-52 drop-shadow-md text-black shadow flex flex-col justify-between bg-white h-screen">
|
||||
<!-- Sidebar -->
|
||||
<div :class="{'translate-x-0': isSidebarOpen, '-translate-x-full': !isSidebarOpen}"
|
||||
class="fixed z-40 md:relative transform md:translate-x-0 transition-transform duration-300 ease-in-out
|
||||
w-64 h-screen flex flex-col"
|
||||
style="background-color:#1e293b">
|
||||
|
||||
<!-- Encabezado de la barra lateral -->
|
||||
<div class="flex items-center justify-between h-16 px-10 py-2">
|
||||
<img src="/img/logo.webp" alt="Logo" class="w-36 mt-4 mb-2">
|
||||
<div class="md:hidden">
|
||||
<button @click="isSidebarOpen = false" class="text-black focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12" />
|
||||
<!-- 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>
|
||||
</button>
|
||||
</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>
|
||||
|
||||
<!-- Contenido de la barra lateral -->
|
||||
<div class="overflow-y-auto h-full">
|
||||
<nav class="px-4 py-2">
|
||||
<ul>
|
||||
<!-- Recorrer módulos -->
|
||||
{{range $moduleName, $submodules := .modules}}
|
||||
<li class="my-1 cursor-pointer" x-data="{ showSubMenu: true }">
|
||||
<div class="flex items-center hover:bg-gray-200 px-2 rounded-lg py-2 font-semibold border" @click="showSubMenu = !showSubMenu">
|
||||
<div class="flex-shrink-0">
|
||||
<svg x-show="showSubMenu" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
<svg x-show="!showSubMenu" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-2 text-sm font-medium">
|
||||
{{ $moduleName }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Submenú -->
|
||||
<ul class="pl-6" x-show="showSubMenu" x-transition>
|
||||
{{range $submodule := $submodules}}
|
||||
<li>
|
||||
<a href="{{ $submodule.url }}"
|
||||
class="block hover:bg-gray-200 hover:font-semibold rounded-md px-3 py-2 text-sm text-black">
|
||||
{{ $submodule.title }}
|
||||
</a>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contenido principal -->
|
||||
<div class="flex-1">
|
||||
<!-- Tu contenido principal aquí -->
|
||||
</div>
|
||||
<!-- Desktop spacer (pushes content) -->
|
||||
<div class="hidden md:block w-64 flex-shrink-0"></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user