79 lines
3.2 KiB
JavaScript
79 lines
3.2 KiB
JavaScript
/**
|
|
* 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 }
|
|
|
|
})();
|