responsive: wip navbar

This commit is contained in:
Agahnim 2026-03-20 16:30:01 +01:00
parent 6e0e250a7c
commit be0d4ff236
Signed by: Agahnim
SSH key fingerprint: SHA256:Zj65PJnE0dRYye8Ltk/qDglynyXUxJngQ9qqx/VI+b4
3 changed files with 141 additions and 7 deletions

View file

@ -53,12 +53,18 @@
}
}
function closeMobileMenu() {
const checkbox = document.getElementById('nav-toggle-checkbox');
if (checkbox) checkbox.checked = false;
}
updateMiniplayerVisibility();
updateNavState();
document.body.addEventListener('htmx:afterSwap', () => {
updateMiniplayerVisibility();
updateNavState();
closeMobileMenu();
window.scrollTo(0, 0);
});
</script>

View file

@ -1,11 +1,19 @@
<navbar>
<input type="checkbox" id="nav-toggle-checkbox">
<navbar-toggle>
<label for="nav-toggle-checkbox" class="hamburger">
<span></span>
<span></span>
<span></span>
</label>
</navbar-toggle>
<navbar-content>
<a href="/">Home</a>
<input type="radio" name="nav" id="nav-home" checked>
<a href="/about">About me</a>
<input type="radio" name="nav" id="nav-home" checked>
<input type="radio" name="nav" id="nav-about">
<a href="/projects">Projects</a>
<input type="radio" name="nav" id="nav-home" checked>
<input type="radio" name="nav" id="nav-projects">
<a href="/music">Music</a>
<input type="radio" name="nav" id="nav-music">
</navbar-content>