diff options
| author | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-06 16:45:56 -0700 |
|---|---|---|
| committer | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-06 16:45:56 -0700 |
| commit | 11554ed790e63ff5ec8ba778c2161923b2c4fcf8 (patch) | |
| tree | c4cc494189922eb6efb0c672707372f378aeffaf /templates/base.html | |
| parent | 77115979e3f132de64448fccfd723f12a90ef451 (diff) | |
Add hamburger menu for mobile navigation
Hide nav-actions on mobile (<= 760px) and show a hamburger menu button
instead. Menu opens/closes on click and closes when a link is clicked
or when clicking outside. Hamburger icon created with CSS pseudo-elements.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Diffstat (limited to 'templates/base.html')
| -rw-r--r-- | templates/base.html | 3 |
1 files changed, 2 insertions, 1 deletions
diff --git a/templates/base.html b/templates/base.html index a3b54ef..925d161 100644 --- a/templates/base.html +++ b/templates/base.html @@ -12,7 +12,8 @@ <div class="shell"> <header class="topbar"> <a class="brand" href="/">Lumière</a> - <nav class="nav-actions" aria-label="Primary"> + <button id="menu-toggle" class="menu-toggle" aria-label="Menu" aria-expanded="false"></button> + <nav class="nav-actions" id="nav-actions" aria-label="Primary"> <a class="{% if active_shelf == 'diary' %}is-active{% endif %}" href="/diary">Diary</a> <a class="{% if active_shelf == 'queue' %}is-active{% endif %}" href="/queue">Queue</a> <a class="{% if active_shelf == 'abandoned' %}is-active{% endif %}" href="/abandoned">Abandoned</a> |