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>