rf index

js/main.js

@@ -32,6 +32,13 @@ async function loadIncludes() {
       const headerRes = await fetch('./includes/header.html', { cache: 'no-store' });
       if (headerRes.ok) {
         headerElem.innerHTML = await headerRes.text();
+        // Mover drawer y overlay fuera del header: #site-header usa
+        // backdrop-filter, que crea un "containing block" para position:fixed
+        // y rompía el dimensionado del drawer.
+        ['mobile-menu-overlay', 'mobile-menu-drawer'].forEach(id => {
+          const el = document.getElementById(id);
+          if (el) document.body.appendChild(el);
+        });
         highlightActiveNavLink();
         attachHeaderEvents();
       } else {
@@ -108,7 +115,7 @@ function attachHeaderEvents() {
   function openDrawer() {
     if (!drawer) return;
     drawer.classList.add('is-open');
-    drawer.setAttribute('aria-hidden', 'false');
+    drawer.inert = false;
     if (overlay) overlay.classList.add('is-open');
     document.body.style.overflow = 'hidden'; // evita scroll del fondo
     const btn = document.getElementById('mobile-menu-btn');
@@ -118,10 +125,12 @@ function attachHeaderEvents() {
   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');
+    // Devolver el foco al botón antes de ocultar (evita el bloqueo de aria en foco)
+    if (btn && drawer.contains(document.activeElement)) btn.focus();
+    drawer.inert = true;
     if (btn) btn.setAttribute('aria-expanded', 'false');
   }
 
@@ -182,18 +191,11 @@ function updateThemeIcon(theme) {
 }
 
 function toggleLogoTheme(theme) {
-  const logoLight = document.querySelector('.logo-light-only');
-  const logoDark = document.querySelector('.logo-dark-only');
+  const logosLight = document.querySelectorAll('.logo-light-only');
+  const logosDark = document.querySelectorAll('.logo-dark-only');
 
-  if (logoLight && logoDark) {
-    if (theme === 'dark') {
-      logoLight.style.display = 'none';
-      logoDark.style.display = 'block';
-    } else {
-      logoLight.style.display = 'block';
-      logoDark.style.display = 'none';
-    }
-  }
+  logosLight.forEach(el => { el.style.display = theme === 'dark' ? 'none' : 'block'; });
+  logosDark.forEach(el => { el.style.display = theme === 'dark' ? 'block' : 'none'; });
 }
 
 /* ==========================================================================