whatsapp/assets/js/lab-sidebar.js

/**
 * 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 header de página (cualquier variante)
    var header = document.querySelector('.content-header, .page-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 }

})();