jselesan/gruperly-web
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Agregar menú mobile con hamburguesa y toggle de tema en el popup

Browse Source
This commit is contained in:
Jose Selesan
2026-09-16 16:01:43 -03:00
parent ee3d4d4192
commit 8e4ba6e3dd
2 changed files with 83 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/_includes/layouts/base.njk
View File

@@ -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>

49
src/_includes/partials/header.njk
View File

@@ -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>