fix burguer menu

js/main.js

@@ -80,33 +80,56 @@ function highlightActiveNavLink() {
 }
 
 function attachHeaderEvents() {
-  // Switch de Tema: usar clonación para evitar listeners duplicados
+  // Theme toggle
   const themeToggle = document.getElementById('theme-toggle-btn');
   if (themeToggle) {
     const newThemeToggle = themeToggle.cloneNode(true);
     themeToggle.parentNode.replaceChild(newThemeToggle, themeToggle);
     newThemeToggle.addEventListener('click', toggleTheme);
   }
-  
-  // Botón de menú móvil y cierre del drawer: event delegation global.
-  // Evita depender de un nodo único (el header se inyecta de forma modular),
-  // de modo que funcione aunque el botón sea reemplazado por cloneNode.
-  const mobileDrawer = document.getElementById('mobile-menu-drawer');
 
-  document.addEventListener('click', (e) => {
-    const toggleClicked = e.target.closest('#mobile-menu-btn');
-    const insideDrawer = mobileDrawer && mobileDrawer.contains(e.target);
+  const drawer  = document.getElementById('mobile-menu-drawer');
+  const overlay = document.getElementById('mobile-menu-overlay');
 
-    if (toggleClicked) {
-      if (mobileDrawer) {
-        const isOpen = mobileDrawer.classList.toggle('is-open');
-        toggleClicked.setAttribute('aria-expanded', isOpen);
-      }
-    } else if (mobileDrawer && mobileDrawer.classList.contains('is-open') && !insideDrawer) {
-      mobileDrawer.classList.remove('is-open');
-      const toggle = document.querySelector('#mobile-menu-btn');
-      if (toggle) toggle.setAttribute('aria-expanded', 'false');
-    }
+  function openDrawer() {
+    if (!drawer) return;
+    drawer.classList.add('is-open');
+    drawer.setAttribute('aria-hidden', 'false');
+    if (overlay) overlay.classList.add('is-open');
+    document.body.style.overflow = 'hidden'; // evita scroll del fondo
+    const btn = document.getElementById('mobile-menu-btn');
+    if (btn) btn.setAttribute('aria-expanded', 'true');
+  }
+
+  function closeDrawer() {
+    if (!drawer) return;
+    drawer.classList.remove('is-open');
+    drawer.setAttribute('aria-hidden', 'true');
+    if (overlay) overlay.classList.remove('is-open');
+    document.body.style.overflow = '';
+    const btn = document.getElementById('mobile-menu-btn');
+    if (btn) btn.setAttribute('aria-expanded', 'false');
+  }
+
+  // Botón hamburguesa abre
+  document.getElementById('mobile-menu-btn')
+    ?.addEventListener('click', openDrawer);
+
+  // Botón X dentro del drawer cierra
+  document.getElementById('drawer-close-btn')
+    ?.addEventListener('click', closeDrawer);
+
+  // Clic en overlay cierra
+  if (overlay) overlay.addEventListener('click', closeDrawer);
+
+  // Clic en cualquier link del drawer cierra
+  drawer?.querySelectorAll('.nav-link').forEach(link => {
+    link.addEventListener('click', closeDrawer);
+  });
+
+  // Tecla ESC cierra
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeDrawer();
   });
 
   const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';