From 8e4ba6e3dd9c90cdcc6abe116b4efba2dd96e445 Mon Sep 17 00:00:00 2001
From: Jose Selesan <jose.selesan@solotechnologies.us>
Date: Wed, 16 Sep 2026 16:01:43 -0300
Subject: [PATCH] =?UTF-8?q?Agregar=20men=C3=BA=20mobile=20con=20hamburgues?=
 =?UTF-8?q?a=20y=20toggle=20de=20tema=20en=20el=20popup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_includes/layouts/base.njk    | 55 ++++++++++++++++++++++++-------
 src/_includes/partials/header.njk | 49 ++++++++++++++++++++++-----
 2 files changed, 83 insertions(+), 21 deletions(-)

diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index 65b4e70..62b33d3 100644
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -97,23 +97,54 @@
   {% include "partials/footer.njk" %}
 
   <script>
-    const themeToggle = document.getElementById('theme-toggle');
-    const iconSun = document.getElementById('icon-sun');
-    const iconMoon = document.getElementById('icon-moon');
+    function setupThemeToggle(toggleId, sunId, moonId) {
+      const toggle = document.getElementById(toggleId);
+      const iconSun = document.getElementById(sunId);
+      const iconMoon = document.getElementById(moonId);
 
-    function syncIcons() {
-      const isDark = document.documentElement.classList.contains('dark');
-      iconSun.classList.toggle('hidden', !isDark);
-      iconMoon.classList.toggle('hidden', isDark);
+      function syncIcons() {
+        const isDark = document.documentElement.classList.contains('dark');
+        iconSun.classList.toggle('hidden', !isDark);
+        iconMoon.classList.toggle('hidden', isDark);
+      }
+
+      toggle.addEventListener('click', () => {
+        const isDark = document.documentElement.classList.toggle('dark');
+        localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        syncIcons();
+      });
+
+      syncIcons();
     }
 
-    themeToggle.addEventListener('click', () => {
-      const isDark = document.documentElement.classList.toggle('dark');
-      localStorage.setItem('theme', isDark ? 'dark' : 'light');
-      syncIcons();
+    setupThemeToggle('theme-toggle', 'icon-sun', 'icon-moon');
+    setupThemeToggle('theme-toggle-mobile', 'icon-sun-mobile', 'icon-moon-mobile');
+
+    const menuToggle = document.getElementById('menu-toggle');
+    const mobileMenu = document.getElementById('mobile-menu');
+    const iconMenu = document.getElementById('icon-menu');
+    const iconClose = document.getElementById('icon-close');
+
+    function setMenu(open) {
+      mobileMenu.classList.toggle('hidden', !open);
+      iconMenu.classList.toggle('hidden', open);
+      iconClose.classList.toggle('hidden', !open);
+      menuToggle.setAttribute('aria-expanded', String(open));
+      menuToggle.setAttribute('aria-label', open ? 'Cerrar menú' : 'Abrir menú');
+    }
+
+    menuToggle.addEventListener('click', () => setMenu(mobileMenu.classList.contains('hidden')));
+
+    document.querySelectorAll('[data-menu-link]').forEach(link => {
+      link.addEventListener('click', () => setMenu(false));
     });
 
-    syncIcons();
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && !mobileMenu.classList.contains('hidden')) {
+        setMenu(false);
+        menuToggle.focus();
+      }
+    });
   </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk
index 64fe870..de9ace8 100644
--- a/src/_includes/partials/header.njk
+++ b/src/_includes/partials/header.njk
@@ -15,8 +15,16 @@
 
     <!-- Actions -->
     <div class="flex items-center gap-3">
-      <!-- Dark mode toggle -->
-      <button id="theme-toggle" type="button" aria-label="Cambiar tema claro/oscuro" class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white dark:focus-visible:ring-offset-slate-950">
+      <!-- CTA -->
+      <a href="{{ site.app.login }}" class="hidden items-center gap-2 text-sm font-semibold text-slate-700 transition hover:text-brand-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:text-slate-200 dark:hover:text-brand-400 dark:focus-visible:ring-offset-slate-950 sm:inline-flex">
+        Iniciar sesión
+      </a>
+      <a href="{{ site.app.signup }}" class="inline-flex items-center justify-center rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand-600/25 transition hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950">
+        Crear cuenta
+      </a>
+
+      <!-- Dark mode toggle (desktop only) -->
+      <button id="theme-toggle" type="button" aria-label="Cambiar tema claro/oscuro" class="hidden h-10 w-10 items-center justify-center rounded-full border border-slate-200 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 md:inline-flex dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white dark:focus-visible:ring-offset-slate-950">
         <!-- Sun icon (shown in dark mode to switch to light) -->
         <svg id="icon-sun" class="hidden h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
           <circle cx="12" cy="12" r="4" />
@@ -28,13 +36,36 @@
         </svg>
       </button>
 
-      <!-- CTA -->
-      <a href="{{ site.app.login }}" class="hidden items-center gap-2 text-sm font-semibold text-slate-700 transition hover:text-brand-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:text-slate-200 dark:hover:text-brand-400 dark:focus-visible:ring-offset-slate-950 sm:inline-flex">
-        Iniciar sesión
-      </a>
-      <a href="{{ site.app.signup }}" class="inline-flex items-center justify-center rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand-600/25 transition hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950">
-        Crear cuenta
-      </a>
+      <!-- Menu toggle (mobile only, far right) -->
+      <button id="menu-toggle" type="button" aria-label="Abrir menú" aria-expanded="false" aria-controls="mobile-menu" class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 md:hidden dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white dark:focus-visible:ring-offset-slate-950">
+        <svg id="icon-menu" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
+        <svg id="icon-close" class="hidden h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" /></svg>
+      </button>
     </div>
   </nav>
+
+  <!-- Mobile menu -->
+  <div id="mobile-menu" class="hidden border-t border-slate-200/70 bg-white/95 backdrop-blur-lg md:hidden dark:border-slate-800 dark:bg-slate-950/95">
+    <div class="space-y-1 px-4 py-4 sm:px-6">
+      <!-- Dark mode toggle (mobile) -->
+      <div class="flex items-center justify-between gap-4 border-b border-slate-200/70 px-3 pb-3 dark:border-slate-800">
+        <span class="text-base font-medium text-slate-700 dark:text-slate-200">Tema</span>
+        <button id="theme-toggle-mobile" type="button" aria-label="Cambiar tema claro/oscuro" class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white dark:focus-visible:ring-offset-slate-950">
+          <svg id="icon-sun-mobile" class="hidden h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="12" cy="12" r="4" />
+            <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+          </svg>
+          <svg id="icon-moon-mobile" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+          </svg>
+        </button>
+      </div>
+      {% for item in site.nav %}
+      <a href="{{ item.href }}" class="block rounded-lg px-3 py-2.5 text-base font-medium text-slate-700 transition hover:bg-slate-100 hover:text-brand-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-brand-400" data-menu-link>{{ item.label }}</a>
+      {% endfor %}
+      <div class="pt-3">
+        <a href="{{ site.app.login }}" class="block rounded-lg px-3 py-2.5 text-base font-medium text-slate-700 transition hover:bg-slate-100 hover:text-brand-600 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-brand-400" data-menu-link>Iniciar sesión</a>
+      </div>
+    </div>
+  </div>
 </header>
\ No newline at end of file