90 lines
4.5 KiB
HTML
90 lines
4.5 KiB
HTML
<div x-data="{
|
|
isSidebarOpen: false,
|
|
}" 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" />
|
|
</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-40 md:hidden"></div>
|
|
|
|
<!-- Barra lateral -->
|
|
<div :class="{'translate-x-0': isSidebarOpen, '-translate-x-full': !isSidebarOpen}"
|
|
class="fixed z-50 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">
|
|
|
|
<!-- 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" />
|
|
</svg>
|
|
</button>
|
|
</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>
|
|
</div>
|