lab: responsive sidebar toggle en todas las páginas del módulo lab

2026-03-19 11:43:01 -05:00
parent 8fb345c404
commit e89ec89c66
13 changed files with 137 additions and 0 deletions
@@ -0,0 +1,78 @@
+/**
+ * lab-sidebar.js — Toggle responsivo del sidebar para todas las páginas del Módulo Lab.
+ * Se auto-inyecta en el header y maneja el overlay.
+ */
+(function () {
+    'use strict';
+
+    // ── 1. Overlay ──────────────────────────────────────────────────────────
+    var overlay = document.createElement('div');
+    overlay.className = 'sidebar-overlay';
+    document.body.appendChild(overlay);
+
+    // ── 2. Botón hamburguesa ────────────────────────────────────────────────
+    var btn = document.createElement('button');
+    btn.id        = 'sidebar-toggle';
+    btn.className = 'btn btn-light btn-sm lab-sidebar-toggle';
+    btn.title     = 'Abrir menú';
+    btn.innerHTML = '<i class="fas fa-bars"></i>';
+
+    // Inyectar como primer hijo del content-header
+    var header = document.querySelector('.content-header');
+    if (header) {
+        header.insertBefore(btn, header.firstChild);
+        header.classList.add('has-sidebar-toggle');
+    }
+
+    // ── 3. Toggle logic ──────────────────────────────────────────────────────
+    var sidebar = document.querySelector('.sidebar');
+
+    function openSidebar() {
+        if (!sidebar) return;
+        sidebar.classList.add('open');
+        overlay.style.display = 'block';
+        document.body.classList.add('sidebar-open');
+    }
+
+    function closeSidebar() {
+        if (!sidebar) return;
+        sidebar.classList.remove('open');
+        overlay.style.display = 'none';
+        document.body.classList.remove('sidebar-open');
+    }
+
+    btn.addEventListener('click', function (e) {
+        e.stopPropagation();
+        if (sidebar && sidebar.classList.contains('open')) {
+            closeSidebar();
+        } else {
+            openSidebar();
+        }
+    });
+
+    // Cerrar al hacer clic en el overlay
+    overlay.addEventListener('click', closeSidebar);
+
+    // Cerrar con Escape
+    document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape') closeSidebar();
+    });
+
+    // Cerrar al navegar (móvil: clic en enlace del sidebar)
+    if (sidebar) {
+        sidebar.querySelectorAll('.nav-link').forEach(function (link) {
+            link.addEventListener('click', function () {
+                if (window.innerWidth < 992) closeSidebar();
+            });
+        });
+    }
+
+    // ── 4. Visibility control ────────────────────────────────────────────────
+    // El CSS ya maneja display vía media queries; solo necesitamos que el botón
+    // sea display:none en desktop y visible en mobile. Lo hacemos por CSS inline
+    // inicial y dejamos que styles.css lo maneje vía #sidebar-toggle.
+    // Aplicamos clase específica para que el CSS pueda targetarla:
+    // .lab-sidebar-toggle { display: none } en >=992px lo hace styles.css
+    // via #sidebar-toggle { display: none !important }
+
+})();