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

28
app/templates/_icons.html
View File

@@ -49,3 +49,31 @@
{% macro spinner(size=16) -%}
{{ base('<path d="M21 12a9 9 0 1 1-6.219-8.56"/>', size) }}
{%- endmacro %}
{% macro sun(size=16) -%}
{{ base('<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>', size) }}
{%- endmacro %}
{% macro moon(size=16) -%}
{{ base('<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>', size) }}
{%- endmacro %}
{% macro menu(size=16) -%}
{{ base('<line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="18" y2="18"/>', size) }}
{%- endmacro %}
{% macro user(size=16) -%}
{{ base('<circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/>', size) }}
{%- endmacro %}
{% macro log_out(size=16) -%}
{{ base('<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/>', size) }}
{%- endmacro %}
{% macro sliders(size=16) -%}
{{ base('<line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/>', size) }}
{%- endmacro %}
{% macro tag(size=16) -%}
{{ base('<path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r="1.5"/>', size) }}
{%- endmacro %}