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

add sandwich nav

Browse Source
This commit is contained in:
Bartal Læarsson
2026-06-22 13:29:26 +01:00
parent 9323d6e9c3
commit 74c28c4f35
2 changed files with 115 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/page.html
+32 -1
View File
@@ -19,16 +19,34 @@
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<header>
<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>
<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>
</nav>
<button id="nav-hamburger" class="nav-hamburger" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</header>
<!-- Off-canvas mobile menu -->
<div id="nav-overlay" class="nav-overlay"></div>
<div id="nav-offcanvas" class="nav-offcanvas">
<div class="offcanvas-header">
<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>
</div>
</div>
<div class="reset-banner" role="status" aria-live="polite">
<span class="reset-label">POC reset in</span>
<span id="reset-countdown" class="reset-countdown" data-reset-at="{{rfc3339 .ResetAt}}">--:--</span>
@@ -70,6 +88,19 @@
}
});
})();
(function () {
var overlay = document.getElementById('nav-overlay');
var panel = document.getElementById('nav-offcanvas');
var openBtn = document.getElementById('nav-hamburger');
var closeBtn = document.getElementById('nav-close');
function open() { panel.classList.add('open'); overlay.classList.add('open'); }
function close() { panel.classList.remove('open'); overlay.classList.remove('open'); }
if (openBtn) openBtn.addEventListener('click', open);
if (closeBtn) closeBtn.addEventListener('click', close);
if (overlay) overlay.addEventListener('click', close);
panel.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', close); });
})();
</script>
</body>
</html>{{end}}