From 53666b6c8745ab98804eae9a5f7660d410f40f87 Mon Sep 17 00:00:00 2001 From: marsalva Date: Wed, 11 Feb 2026 21:56:33 +0000 Subject: [PATCH] Actualizar js/layout.js --- js/layout.js | 125 ++++++++++++++++++++++++++------------------------- 1 file changed, 64 insertions(+), 61 deletions(-) diff --git a/js/layout.js b/js/layout.js index 6551a83..30653ad 100644 --- a/js/layout.js +++ b/js/layout.js @@ -1,117 +1,115 @@ // CONFIGURACIÓN GLOBAL const API_URL = "https://integrarepara-api.integrarepara.es"; -document.addEventListener("DOMContentLoaded", async () => { - +document.addEventListener("DOMContentLoaded", () => { // 1. Verificar Token const token = localStorage.getItem("token"); if (!token) { - window.location.href = "index.html"; - return; + if (!window.location.pathname.endsWith("index.html") && window.location.pathname !== "/") { + window.location.href = "index.html"; + return; + } } - // 2. Generar Sidebar (Con los nuevos enlaces) + // 2. Generar Sidebar y Header renderSidebar(); + renderHeader(); - // 3. Cargar Header (Mantenemos carga externa para la cabecera) - await loadComponent("header-container", "header.html"); - - // 4. Inicializar Iconos + // 3. Inicializar Iconos if (window.lucide) lucide.createIcons(); - // 5. Lógica del Usuario (Header) - setupUserInfo(token); - - // 6. Configurar Logout (Ahora manejado dentro de renderSidebar para asegurar que existe el botón) - const btnLogout = document.getElementById("globalBtnLogout"); - if(btnLogout) { - btnLogout.addEventListener("click", () => { - localStorage.removeItem("token"); - window.location.href = "index.html"; - }); - } + // 4. Datos usuario + if (token) setupUserInfo(token); }); -// --- GENERADOR DE SIDEBAR (NUEVO) --- +// --- GENERADOR DE BARRA LATERAL (DISEÑO ORIGINAL RESTAURADO) --- function renderSidebar() { const container = document.getElementById('sidebar-container'); if (!container) return; - // Detectar página actual const path = window.location.pathname.split("/").pop() || "index.html"; - // DEFINICIÓN DE MENÚ (Aquí añadimos Calendario y Automatizaciones) + // MENU ITEMS (Recuperados Dashboard y Usuarios) const menuItems = [ + { name: "Dashboard", link: "panel.html", icon: "layout-dashboard" }, { name: "Servicios", link: "servicios.html", icon: "briefcase" }, - { name: "Calendario", link: "calendario.html", icon: "calendar-days" }, // ✅ NUEVO + { name: "Calendario", link: "calendario.html", icon: "calendar" }, { name: "Clientes", link: "clientes.html", icon: "users" }, - { name: "Automatizaciones", link: "automatizaciones.html", icon: "zap" }, // ✅ NUEVO (Icono rayo) + { name: "Usuarios", link: "usuarios.html", icon: "user-cog" }, + { name: "Automatizaciones", link: "automatizaciones.html", icon: "zap" }, { name: "Configuración", link: "configuracion.html", icon: "settings" }, ]; - // Construir HTML de los enlaces const linksHtml = menuItems.map(item => { const isActive = path === item.link; - // Estilos basados en tu diseño actual (Slate oscuro) - const baseClasses = "flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 font-medium mb-1 text-sm"; - const activeClasses = "bg-blue-600 text-white shadow-lg shadow-blue-500/30"; - const inactiveClasses = "text-slate-400 hover:text-white hover:bg-slate-800"; + // ESTILOS ORIGINALES (Texto Slate-400, Hover Blanco/Slate-800) + const baseClasses = "nav-item flex items-center gap-3 px-4 py-3 rounded-lg transition-all text-sm font-medium"; + // Si está activo, usamos el azul original de tu diseño, si no, el gris + const activeClasses = isActive + ? "bg-blue-600 text-white shadow-lg shadow-blue-500/30" + : "text-slate-400 hover:text-white hover:bg-slate-800"; return ` - + - ${item.name} + ${item.name} `; }).join(""); - // Inyectar HTML completo del Sidebar container.innerHTML = ` -