ethiele/linkvault
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign header: theme toggle, user avatar, burger menu

Browse Source 
The app was dark-only with the email shown as plain text and a bare
"Abmelden" button. Header now has:

- A light/dark theme toggle (sun/moon icon). Choice persists via
  localStorage and is applied before first paint (inline script in
  <head>) to avoid a flash of the wrong theme; falls back to the
  system preference on first visit. Added a light CSS variable set
  alongside the existing dark palette.
- A circular user icon (head-and-shoulders) showing the email as a
  tooltip, replacing the plain-text address.
- A burger-menu dropdown with the email, disabled placeholder items
  ("Tags verwalten", "Einstellungen" — marked "bald") to make room
  for future features, and the actual Abmelden action.

Dropdown opens/closes via a small vanilla-JS handler in base.html
(click outside or Escape closes it), consistent with the project's
no-build-step, mostly-HTMX frontend.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Erik Thiele
2026-07-20 23:01:22 +02:00
parent dca6033c40
commit 4f99d51f9e
3 changed files with 144 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/templates/index.html
View File

@@ -10,10 +10,32 @@
{{ icons.alert(size=14) }} KI aus
</span>
{% endif %}
<span>{{ user.email }}</span>
<form method="post" action="/logout" style="margin:0;">
<button class="ghost" type="submit">Abmelden</button>
</form>
<button id="theme-toggle" type="button" class="ghost icon-btn" title="Farbschema wechseln">
<span class="theme-icon-dark">{{ icons.moon() }}</span>
<span class="theme-icon-light">{{ icons.sun() }}</span>
</button>
<div class="user-menu">
<button type="button" class="ghost icon-btn" title="{{ user.email }}">{{ icons.user() }}</button>
<button id="menu-toggle" type="button" class="ghost icon-btn" title="Menü"
aria-haspopup="true" aria-expanded="false">{{ icons.menu() }}</button>
<div id="user-dropdown" class="user-dropdown" hidden>
<div class="dropdown-email">{{ user.email }}</div>
<div class="dropdown-sep"></div>
<button type="button" class="dropdown-item" disabled>
{{ icons.tag(size=15) }} Tags verwalten <span class="soon">bald</span>
</button>
<button type="button" class="dropdown-item" disabled>
{{ icons.sliders(size=15) }} Einstellungen <span class="soon">bald</span>
</button>
<div class="dropdown-sep"></div>
<form method="post" action="/logout" style="margin:0;">
<button type="submit" class="dropdown-item">{{ icons.log_out(size=15) }} Abmelden</button>
</form>
</div>
</div>
</div>
</header>