Bryam105
cc44c2e8aa
- Creada sidebar para mejora visual. - Removidos excesos de links. - Modificado el footer para consistencia de estilos.
93 lines
3.1 KiB
PHP
93 lines
3.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<script type="module">
|
|
// Revisamos únicamente las preferencias del sistema
|
|
function applySystemTheme() {
|
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
}
|
|
|
|
applySystemTheme();
|
|
|
|
// Escuchar cambios en la preferencia del sistema
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applySystemTheme);
|
|
</script>
|
|
<title>{{ $title ?? 'Lauck Dashboard' }}</title>
|
|
@stack('styles')
|
|
|
|
<!-- VITE: Esto carga tu Tailwind compilado y JS -->
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
</head>
|
|
|
|
<body class="bg-gray-50 dark:bg-dark-bg text-gray-900 dark:text-gray-300 font-sans antialiased min-h-screen flex flex-col relative transition-colors overflow-x-hidden">
|
|
|
|
<!-- Fondo grilla global -->
|
|
<div class="inset-0 bg-grid-pattern opacity-[0.15] z-0 pointer-events-none fixed"></div>
|
|
|
|
<!-- Navbar Component -->
|
|
<x-navbar />
|
|
|
|
<!-- Sidebar Component -->
|
|
<x-sidebar />
|
|
|
|
<!-- Contenido Principal -->
|
|
<main class="grow flex flex-col items-center justify-start pt-10 pb-20 px-4 w-full max-w-7xl mx-auto z-10">
|
|
{{ $slot }}
|
|
</main>
|
|
|
|
<!-- Footer Component -->
|
|
<x-footer />
|
|
|
|
<x-ui.alert />
|
|
<x-ui.confirm-delete />
|
|
|
|
<!-- Scripts globales -->
|
|
<script>
|
|
// Lógica del menú móvil tradicional (navbar)
|
|
const btn = document.querySelector('[data-collapse-toggle="navbar-default"]');
|
|
const menu = document.getElementById('navbar-default');
|
|
if(btn && menu) {
|
|
btn.addEventListener('click', () => menu.classList.toggle('hidden'));
|
|
}
|
|
|
|
// Lógica del Sidebar
|
|
const sidebar = document.getElementById('main-sidebar');
|
|
const backdrop = document.getElementById('sidebar-backdrop');
|
|
const openSidebarBtns = document.querySelectorAll('.open-sidebar-btn');
|
|
const closeSidebarBtn = document.getElementById('close-sidebar-btn');
|
|
|
|
function toggleSidebar() {
|
|
sidebar.classList.toggle('-translate-x-full');
|
|
backdrop.classList.toggle('hidden');
|
|
// Pequeño delay para la transición de opacidad
|
|
setTimeout(() => {
|
|
backdrop.classList.toggle('opacity-0');
|
|
}, 10);
|
|
|
|
// Prevenir scroll en el body cuando el sidebar está abierto
|
|
document.body.classList.toggle('overflow-hidden');
|
|
}
|
|
|
|
openSidebarBtns.forEach(btn => {
|
|
btn.addEventListener('click', toggleSidebar);
|
|
});
|
|
|
|
if (closeSidebarBtn) {
|
|
closeSidebarBtn.addEventListener('click', toggleSidebar);
|
|
}
|
|
|
|
if (backdrop) {
|
|
backdrop.addEventListener('click', toggleSidebar);
|
|
}
|
|
</script>
|
|
@stack('scripts')
|
|
|
|
</body>
|
|
</html> |