This commit is contained in:
Bartal Læarsson
2026-06-22 13:29:26 +01:00
parent 74c28c4f35
commit 3f10dd4c07
2 changed files with 30 additions and 7 deletions
+9
View File
@@ -187,6 +187,15 @@ nav a {
}
nav a:hover { color: var(--fg); border-bottom-color: transparent; }
nav a.active {
color: var(--fg);
border-bottom-color: var(--fg);
}
.offcanvas-links a.active {
color: var(--fg);
border-bottom-color: var(--fg);
}
footer {
padding: 0.9rem 1.5rem;
color: var(--muted);
+21 -7
View File
@@ -24,9 +24,9 @@
<a href="https://fló.fo" class="back-link">← FLÓ.FO</a>
<span class="brand">FLÓ <span class="brand-sep">/</span> <span class="brand-sub">ZEITKORT</span></span>
<nav class="nav-desktop">
<a href="/">Timer</a>
<a hx-get="/settings" hx-target="#main" href="javascript:void(0)">Settings</a>
<a hx-get="/about" hx-target="#main" href="javascript:void(0)">About</a>
<a href="/">[TIMER]</a>
<a hx-get="/settings" hx-target="#main" href="javascript:void(0)">[SETTINGS]</a>
<a hx-get="/about" hx-target="#main" href="javascript:void(0)">[ABOUT]</a>
</nav>
<button id="nav-hamburger" class="nav-hamburger" aria-label="Open menu">
<span></span><span></span><span></span>
@@ -36,14 +36,14 @@
<!-- Off-canvas mobile menu -->
<div id="nav-overlay" class="nav-overlay"></div>
<div id="nav-offcanvas" class="nav-offcanvas">
<div class="offcanvas-header">
<div class="offcanvas-header">I
<span class="brand">FLÓ <span class="brand-sep">/</span> <span class="brand-sub">ZEITKORT</span></span>
<button id="nav-close" class="nav-close" aria-label="Close menu">&#x2715;</button>
</div>
<div class="offcanvas-links">
<a href="/">Timer</a>
<a hx-get="/settings" hx-target="#main" href="javascript:void(0)">Settings</a>
<a hx-get="/about" hx-target="#main" href="javascript:void(0)">About</a>
<a href="/">[TIMER]</a>
<a hx-get="/settings" hx-target="#main" href="javascript:void(0)">[SETTINGS]</a>
<a hx-get="/about" hx-target="#main" href="javascript:void(0)">[ABOUT]</a>
</div>
</div>
@@ -100,6 +100,20 @@
if (closeBtn) closeBtn.addEventListener('click', close);
if (overlay) overlay.addEventListener('click', close);
panel.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', close); });
// Mark active link on click
document.querySelectorAll('nav a, .offcanvas-links a').forEach(function(a) {
a.addEventListener('click', function() {
document.querySelectorAll('nav a, .offcanvas-links a').forEach(function(el) {
el.classList.remove('active');
});
var href = a.getAttribute('hx-get') || a.getAttribute('href');
document.querySelectorAll('nav a, .offcanvas-links a').forEach(function(el) {
var elHref = el.getAttribute('hx-get') || el.getAttribute('href');
if (elHref === href) el.classList.add('active');
});
});
});
})();
</script>
</body>