From 14b1cc7539837fb377771e783300d3d35a7e07cf Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 21:59:38 +0200
Subject: [PATCH] feat(AppNav): brand-navy header styles for logo and nav links

- Logo: always visible (remove hidden md:flex), text-white
- Outer wrapper: items-stretch so active border reaches header bottom
- Desktop nav: items-stretch, active = border-b-2 border-accent text-white
- Inactive links: text-white/55, hover text-white/85
- Hamburger: text-white/70, hover text-white
- Mobile drawer active: bg-accent-bg replacing removed bg-nav-active
- Focus rings: focus-visible:ring-2 ring-accent on all interactive elements

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/AppNav.svelte | 60 +++++++++++++++----------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/frontend/src/routes/AppNav.svelte b/frontend/src/routes/AppNav.svelte
index a9f66408..24ecbd0f 100644
--- a/frontend/src/routes/AppNav.svelte
+++ b/frontend/src/routes/AppNav.svelte
@@ -28,53 +28,53 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 }
 </script>
 
-<div class="flex items-center">
-	<div class="mr-10 hidden flex-shrink-0 items-center md:flex">
+<div class="flex items-stretch">
+	<div class="mr-10 flex flex-shrink-0 items-center">
 		<a href="/" class="flex items-center" aria-label="Familienarchiv">
-			<span class="font-sans text-xl font-bold tracking-widest text-ink uppercase"
+			<span class="font-sans text-xl font-bold tracking-widest text-white uppercase"
 				>Familienarchiv</span
 			>
 		</a>
 	</div>
 
 	<!-- Desktop nav -->
-	<nav class="hidden items-center sm:flex sm:space-x-1">
+	<nav class="hidden items-stretch sm:flex sm:space-x-1">
 		<a
 			href="/"
-			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+			class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
                    {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
-                    ? 'bg-nav-active rounded text-ink'
-                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+				? 'border-b-2 border-accent text-white'
+				: 'text-white/55 hover:text-white/85'}"
 		>
 			{m.nav_documents()}
 		</a>
 
 		<a
 			href="/persons"
-			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+			class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
                    {page.url.pathname.startsWith('/persons')
-                    ? 'bg-nav-active rounded text-ink'
-                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+				? 'border-b-2 border-accent text-white'
+				: 'text-white/55 hover:text-white/85'}"
 		>
 			{m.nav_persons()}
 		</a>
 
 		<a
 			href="/korrespondenz"
-			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+			class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
                    {page.url.pathname.startsWith('/korrespondenz')
-                    ? 'bg-nav-active rounded text-ink'
-                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+				? 'border-b-2 border-accent text-white'
+				: 'text-white/55 hover:text-white/85'}"
 		>
 			{m.nav_conversations()}
 		</a>
 		{#if isAdmin}
 			<a
 				href="/admin"
-				class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+				class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
                    {page.url.pathname.startsWith('/admin')
-                        ? 'bg-nav-active rounded text-ink'
-                        : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+					? 'border-b-2 border-accent text-white'
+					: 'text-white/55 hover:text-white/85'}"
 			>
 				{m.nav_admin()}
 			</a>
@@ -83,7 +83,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 
 	<!-- Hamburger toggle (mobile only) -->
 	<button
-		class="ml-auto flex h-11 w-11 items-center justify-center rounded text-ink-2 transition-colors hover:bg-muted hover:text-ink sm:hidden"
+		class="ml-auto flex h-11 w-11 items-center justify-center rounded text-white/70 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent sm:hidden"
 		aria-label={mobileNavOpen ? 'Menü schließen' : 'Menü öffnen'}
 		aria-expanded={mobileNavOpen}
 		aria-controls="mobile-nav"
@@ -137,35 +137,35 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div class="absolute inset-0 bg-black/20" onclick={closeMobileNav}></div>
 
-		<!-- Panel -->
+		<!-- Panel — white background with navy text (reverses the dark header) -->
 		<div class="relative border-b border-line bg-surface shadow-md">
 			<nav id="mobile-nav">
 				<a
 					href="/"
-					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors
+					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset
                            {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
-                            ? 'bg-nav-active text-ink'
-                            : 'text-ink-2 hover:bg-muted hover:text-ink'}"
+						? 'bg-accent-bg text-ink'
+						: 'text-ink-2 hover:bg-muted hover:text-ink'}"
 				>
 					{m.nav_documents()}
 				</a>
 
 				<a
 					href="/persons"
-					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors
+					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset
                            {page.url.pathname.startsWith('/persons')
-                            ? 'bg-nav-active text-ink'
-                            : 'text-ink-2 hover:bg-muted hover:text-ink'}"
+						? 'bg-accent-bg text-ink'
+						: 'text-ink-2 hover:bg-muted hover:text-ink'}"
 				>
 					{m.nav_persons()}
 				</a>
 
 				<a
 					href="/korrespondenz"
-					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors
+					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset
                            {page.url.pathname.startsWith('/korrespondenz')
-                            ? 'bg-nav-active text-ink'
-                            : 'text-ink-2 hover:bg-muted hover:text-ink'}"
+						? 'bg-accent-bg text-ink'
+						: 'text-ink-2 hover:bg-muted hover:text-ink'}"
 				>
 					{m.nav_conversations()}
 				</a>
@@ -173,10 +173,10 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 				{#if isAdmin}
 					<a
 						href="/admin"
-						class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors
+						class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset
                                {page.url.pathname.startsWith('/admin')
-                                ? 'bg-nav-active text-ink'
-                                : 'text-ink-2 hover:bg-muted hover:text-ink'}"
+							? 'bg-accent-bg text-ink'
+							: 'text-ink-2 hover:bg-muted hover:text-ink'}"
 					>
 						{m.nav_admin()}
 					</a>