Add mobile dropdown nav to image collection pages

Desktop: two nav buttons side by side (unchanged).
Mobile: collapses to a ☰ Menu toggle, dropdown reveals both links.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-27 20:42:06 +02:00
parent 781d3ef1e7
commit 855f0bdba9
4 changed files with 220 additions and 12 deletions

View File

@@ -86,6 +86,51 @@
background: var(--accent-glow);
box-shadow: 0 0 10px var(--accent-glow);
}
.nav-menu { position: relative; }
.nav-menu-toggle {
display: none;
font-family: 'Share Tech Mono', monospace;
background: none;
border: 1px solid var(--text-muted);
color: var(--text-muted);
padding: 0.5rem 1rem;
cursor: pointer;
font-size: 1rem;
letter-spacing: 0.05em;
transition: var(--transition);
}
.nav-menu-toggle:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-glow);
}
.nav-menu-links {
display: flex;
gap: 1rem;
}
@media (max-width: 600px) {
.nav-menu-toggle { display: block; }
.nav-menu-links {
display: none;
flex-direction: column;
position: absolute;
right: 0;
top: calc(100% + 4px);
background: var(--bg-deep);
border: 1px solid var(--accent);
box-shadow: 0 4px 15px var(--accent-glow);
padding: 0.5rem;
gap: 0.5rem;
z-index: 200;
min-width: 180px;
}
.nav-menu-links.open { display: flex; }
}
main {
flex: 1;
@@ -224,9 +269,12 @@
<span class="subtitle">20152021 Collection</span>
<h1>YourNomadSoul</h1>
</div>
<div class="nav-actions">
<a href="images.html" class="nav-back">← Back to Hub</a>
<a href="https://files.exopraxist.org/share/yNytp9Di" class="nav-back" target="_blank">↓ Download Folder</a>
<div class="nav-menu">
<button class="nav-menu-toggle" id="nav-toggle" aria-label="Menu">&#9776; Menu</button>
<div class="nav-menu-links" id="nav-links">
<a href="images.html" class="nav-back">← Back to Hub</a>
<a href="https://files.exopraxist.org/share/yNytp9Di" class="nav-back" target="_blank">↓ Download Folder</a>
</div>
</div>
</header>
@@ -310,6 +358,10 @@
});
document.addEventListener('DOMContentLoaded', renderGallery);
document.getElementById('nav-toggle').onclick = function() {
document.getElementById('nav-links').classList.toggle('open');
};
</script>
</body>
</html>