separacion de footer y menu

js/main.js

@@ -4,38 +4,109 @@
 (function () {
   "use strict";
 
-  /* ---------- Tema claro / oscuro ---------- */
-  const root = document.documentElement;
-  const stored = localStorage.getItem("ar-theme");
-  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-  const initial = stored || (prefersDark ? "dark" : "light");
-  root.setAttribute("data-theme", initial);
+  /* ---------- Función central para cambiar tema ---------- */
+  function setTheme(theme) {
+    const root = document.documentElement;
+    root.setAttribute("data-theme", theme);
+    localStorage.setItem("ar-theme", theme);
+  }
 
-  document.querySelectorAll("[data-theme-toggle]").forEach((btn) => {
-    btn.addEventListener("click", () => {
-      const current = root.getAttribute("data-theme");
-      const next = current === "dark" ? "light" : "dark";
-      root.setAttribute("data-theme", next);
-      localStorage.setItem("ar-theme", next);
+  function toggleTheme() {
+    const root = document.documentElement;
+    const current = root.getAttribute("data-theme");
+    const next = current === "dark" ? "light" : "dark";
+    setTheme(next);
+  }
+
+  function getPreferredTheme() {
+    const stored = localStorage.getItem("ar-theme");
+    if (stored) return stored;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+
+  /* ---------- Inicializar tema ---------- */
+  setTheme(getPreferredTheme());
+
+  /* ---------- Inicializar toggle (se puede llamar varias veces) ---------- */
+  function initThemeToggle() {
+    document.querySelectorAll("[data-theme-toggle]").forEach((btn) => {
+      // Remover listeners duplicados
+      btn.removeEventListener("click", toggleTheme);
+      btn.addEventListener("click", toggleTheme);
     });
-  });
+  }
 
   /* ---------- Menú móvil ---------- */
-  const navToggle = document.querySelector("[data-nav-toggle]");
-  const mobileMenu = document.querySelector("[data-mobile-menu]");
-  if (navToggle && mobileMenu) {
-    navToggle.addEventListener("click", () => {
-      mobileMenu.classList.toggle("open");
-      const expanded = mobileMenu.classList.contains("open");
-      navToggle.setAttribute("aria-expanded", String(expanded));
-    });
-    mobileMenu.querySelectorAll("a").forEach((a) =>
-      a.addEventListener("click", () => mobileMenu.classList.remove("open"))
-    );
+  function initMobileMenu() {
+    const navToggle = document.querySelector("[data-nav-toggle]");
+    const mobileMenu = document.querySelector("[data-mobile-menu]");
+    if (navToggle && mobileMenu) {
+      // Remover listeners duplicados
+      const newToggle = navToggle.cloneNode(true);
+      navToggle.parentNode.replaceChild(newToggle, navToggle);
+      
+      newToggle.addEventListener("click", function () {
+        mobileMenu.classList.toggle("open");
+        const expanded = mobileMenu.classList.contains("open");
+        this.setAttribute("aria-expanded", String(expanded));
+      });
+
+      mobileMenu.querySelectorAll("a").forEach((a) =>
+        a.addEventListener("click", () => {
+          mobileMenu.classList.remove("open");
+          const toggle = document.querySelector("[data-nav-toggle]");
+          if (toggle) toggle.setAttribute("aria-expanded", "false");
+        })
+      );
+    }
   }
 
+  /* ---------- Inicializar todo al cargar ---------- */
+  initThemeToggle();
+  initMobileMenu();
+
   /* ---------- Año dinámico en footer ---------- */
   document.querySelectorAll("[data-year]").forEach((el) => {
     el.textContent = new Date().getFullYear();
   });
+
+  /* ============================================
+     EMBED PARCIALS (header + footer)
+     ============================================ */
+  document.addEventListener('DOMContentLoaded', function () {
+    const headerPlaceholder = document.getElementById('header-placeholder');
+    const footerPlaceholder = document.getElementById('footer-placeholder');
+
+    if (headerPlaceholder) {
+      fetch('partials/header.html')
+        .then(res => {
+          if (!res.ok) throw new Error('HTTP ' + res.status);
+          return res.text();
+        })
+        .then(html => {
+          headerPlaceholder.outerHTML = html;
+          // Re-inicializar componentes después del fetch
+          initThemeToggle();
+          initMobileMenu();
+        })
+        .catch(err => console.warn('Header no cargado:', err));
+    }
+
+    if (footerPlaceholder) {
+      fetch('partials/footer.html')
+        .then(res => {
+          if (!res.ok) throw new Error('HTTP ' + res.status);
+          return res.text();
+        })
+        .then(html => {
+          footerPlaceholder.outerHTML = html;
+          // Actualizar año automático
+          document.querySelectorAll("[data-year]").forEach((el) => {
+            el.textContent = new Date().getFullYear();
+          });
+        })
+        .catch(err => console.warn('Footer no cargado:', err));
+    }
+  });
+
 })();