From d9ab4ee1512cdaf53c718210b3a9050d7e5e5ee3 Mon Sep 17 00:00:00 2001 From: Alexander Bocken Date: Sun, 1 Mar 2026 20:41:36 +0100 Subject: [PATCH] header: add colored icon fills for active nav links, cospend icons Active nav icons now fill with per-link colors (recipes, faith, cospend). Cospend gets Lucide icons with background shape fills for Wallet and RefreshCw. Shrink profile picture and use solid grey for inactive nav text. --- src/lib/components/Header.svelte | 40 +++++++++++++++++-- src/lib/components/UserHeader.svelte | 6 +-- .../[faithLang=faithLang]/+layout.svelte | 4 +- .../[recipeLang=recipeLang]/+layout.svelte | 12 +++--- src/routes/cospend/+layout.svelte | 7 ++-- 5 files changed, 52 insertions(+), 17 deletions(-) diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index d7349ed..a015621 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -60,7 +60,7 @@ nav { view-transition-name: site-header; /* token defaults (dark bar) */ - --nav-text: rgba(255,255,255,0.65); + --nav-text: #999; --nav-text-hover: white; --nav-text-active: white; --nav-hover-bg: rgba(255,255,255,0.1); @@ -86,7 +86,7 @@ nav { --nav-bg: rgba(255, 255, 255, 0.82); --nav-border: rgba(0,0,0,0.08); --nav-shadow: rgba(0,0,0,0.1); - --nav-text: rgba(0,0,0,0.55); + --nav-text: #888; --nav-text-hover: var(--nord0); --nav-text-active: var(--nord0); --nav-hover-bg: rgba(0,0,0,0.06); @@ -101,7 +101,7 @@ nav { --nav-bg: rgba(255, 255, 255, 0.82); --nav-border: rgba(0,0,0,0.08); --nav-shadow: rgba(0,0,0,0.1); - --nav-text: rgba(0,0,0,0.55); + --nav-text: #888; --nav-text-hover: var(--nord0); --nav-text-active: var(--nord0); --nav-hover-bg: rgba(0,0,0,0.06); @@ -188,6 +188,40 @@ nav { color: var(--nav-text-active) !important; background: var(--nav-active-bg); } +:global(.site_header li:has(a.active) > a > .nav-icon) { + fill: var(--active-fill, none); +} +/* For stroke-based icons: colored shape behind the icon */ +:global(.site_header li:has(a.active) .nav-icon-wrap) { + position: relative; + display: flex; + align-items: center; + justify-content: center; +} +:global(.site_header li:has(a.active) .nav-icon-wrap::before) { + content: ''; + position: absolute; + inset: 2px; + background: var(--active-fill); + clip-path: var(--active-shape, inset(0 round 3px)); + z-index: -1; +} +/* Wallet: two rectangles — main body + top flap */ +:global(.site_header li:has(a.active) .nav-icon-wallet::before) { + inset: 4px 2px 2px 2px; + clip-path: inset(0 round 2px); +} +:global(.site_header li:has(a.active) .nav-icon-wallet::after) { + content: ''; + position: absolute; + top: 2px; + left: 2px; + right: 18%; + height: 3px; + background: var(--active-fill); + border-radius: 1.5px; + z-index: -1; +} /* ═══════════════════════════════════════════ DIVIDER & RIGHT SIDE diff --git a/src/lib/components/UserHeader.svelte b/src/lib/components/UserHeader.svelte index 4956228..dce0619 100644 --- a/src/lib/components/UserHeader.svelte +++ b/src/lib/components/UserHeader.svelte @@ -83,12 +83,12 @@ button{ - --margin-right: 1rem; + --margin-right: 0; position: relative; background-color: transparent; border: none; - width: 2.5rem; - height: 2.5rem; + width: 1.8rem; + height: 1.8rem; border-radius: 50%; margin-right: var(--margin-right); background-color: var(--nord4); diff --git a/src/routes/[faithLang=faithLang]/+layout.svelte b/src/routes/[faithLang=faithLang]/+layout.svelte index a2d6f51..0cb287e 100644 --- a/src/routes/[faithLang=faithLang]/+layout.svelte +++ b/src/routes/[faithLang=faithLang]/+layout.svelte @@ -27,8 +27,8 @@ function isActive(path) {
{#snippet links()} {/snippet} diff --git a/src/routes/[recipeLang=recipeLang]/+layout.svelte b/src/routes/[recipeLang=recipeLang]/+layout.svelte index aedea6c..ab3216f 100644 --- a/src/routes/[recipeLang=recipeLang]/+layout.svelte +++ b/src/routes/[recipeLang=recipeLang]/+layout.svelte @@ -74,14 +74,14 @@ function isActive(path) {
{#snippet links()} {/snippet} diff --git a/src/routes/cospend/+layout.svelte b/src/routes/cospend/+layout.svelte index 1b03c22..342fbf7 100644 --- a/src/routes/cospend/+layout.svelte +++ b/src/routes/cospend/+layout.svelte @@ -7,6 +7,7 @@ import PaymentModal from '$lib/components/cospend/PaymentModal.svelte'; import Header from '$lib/components/Header.svelte'; import UserHeader from '$lib/components/UserHeader.svelte'; + import { LayoutDashboard, Wallet, RefreshCw } from 'lucide-svelte'; let { data, children } = $props(); @@ -55,9 +56,9 @@
{#snippet links()} {/snippet}