FLO/zeitkort-web-golang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

footer

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
static/app.css
+9
View File
@@ -187,6 +187,15 @@ nav a {
} }
nav a:hover { color: var(--fg); border-bottom-color: transparent; } 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 { footer {
padding: 0.9rem 1.5rem; padding: 0.9rem 1.5rem;
color: var(--muted); color: var(--muted);
templates/page.html
+21 -7
View File
@@ -24,9 +24,9 @@
<a href="https://fló.fo" class="back-link">← FLÓ.FO</a> <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> <span class="brand">FLÓ <span class="brand-sep">/</span> <span class="brand-sub">ZEITKORT</span></span>
<nav class="nav-desktop"> <nav class="nav-desktop">
<a href="/">Timer</a> <a href="/">[TIMER]</a>
<a hx-get="/settings" hx-target="#main" href="javascript:void(0)">Settings</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 hx-get="/about" hx-target="#main" href="javascript:void(0)">[ABOUT]</a>
</nav> </nav>
<button id="nav-hamburger" class="nav-hamburger" aria-label="Open menu"> <button id="nav-hamburger" class="nav-hamburger" aria-label="Open menu">
<span></span><span></span><span></span> <span></span><span></span><span></span>
@@ -36,14 +36,14 @@
<!-- Off-canvas mobile menu --> <!-- Off-canvas mobile menu -->
<div id="nav-overlay" class="nav-overlay"></div> <div id="nav-overlay" class="nav-overlay"></div>
<div id="nav-offcanvas" class="nav-offcanvas"> <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> <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> <button id="nav-close" class="nav-close" aria-label="Close menu">&#x2715;</button>
</div> </div>
<div class="offcanvas-links"> <div class="offcanvas-links">
<a href="/">Timer</a> <a href="/">[TIMER]</a>
<a hx-get="/settings" hx-target="#main" href="javascript:void(0)">Settings</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 hx-get="/about" hx-target="#main" href="javascript:void(0)">[ABOUT]</a>
</div> </div>
</div> </div>
@@ -100,6 +100,20 @@
if (closeBtn) closeBtn.addEventListener('click', close); if (closeBtn) closeBtn.addEventListener('click', close);
if (overlay) overlay.addEventListener('click', close); if (overlay) overlay.addEventListener('click', close);
panel.querySelectorAll('a').forEach(function(a) { a.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> </script>
</body> </body>