footer
This commit is contained in:
@@ -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
@@ -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">✕</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>
|
||||
|
||||
Reference in New Issue
Block a user