From f8d888a5bee88fe2022c67167c2506689a40585c Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 27 Mar 2026 16:41:51 +0100
Subject: [PATCH] fix(#103): move language switcher from header into mobile nav
 drawer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On mobile the header is now cleaner — language buttons move to the
bottom of the hamburger panel. Desktop header is unchanged (sm:flex).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/+layout.svelte |  4 ++--
 frontend/src/routes/AppNav.svelte  | 21 +++++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 39b68ed4..b213ae32 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -46,8 +46,8 @@ const userInitials = $derived.by(() => {
 
 					<!-- Right Side -->
 					<div class="flex items-center gap-3">
-						<!-- Language selector -->
-						<div class="flex items-center gap-1 border-r border-line pr-3">
+						<!-- Language selector (desktop only — mobile lives in nav drawer) -->
+						<div class="hidden items-center gap-1 border-r border-line pr-3 sm:flex">
 							{#each locales as locale (locale)}
 								<button
 									type="button"
diff --git a/frontend/src/routes/AppNav.svelte b/frontend/src/routes/AppNav.svelte
index 76675dd7..1c4feae3 100644
--- a/frontend/src/routes/AppNav.svelte
+++ b/frontend/src/routes/AppNav.svelte
@@ -2,9 +2,14 @@
 import { page } from '$app/state';
 import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
+import { setLocale, getLocale } from '$lib/paraglide/runtime';
 
 let { isAdmin = false }: { isAdmin?: boolean } = $props();
 
+const locales = ['DE', 'EN', 'ES'] as const;
+const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
+const activeLocale = $derived(getLocale().toUpperCase());
+
 let mobileNavOpen = $state(false);
 
 $effect(() => {
@@ -180,6 +185,22 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 						{m.nav_admin()}
 					</a>
 				{/if}
+
+				<!-- Language switcher -->
+				<div class="flex items-center gap-2 border-t border-line px-4 py-3">
+					{#each locales as locale (locale)}
+						<button
+							type="button"
+							onclick={() => setLocale(localeMap[locale])}
+							class="min-h-[44px] px-3 font-sans text-sm tracking-widest transition-colors
+                               {activeLocale === locale
+                                ? 'font-bold text-ink'
+                                : 'font-normal text-ink-3 hover:text-ink'}"
+						>
+							{locale}
+						</button>
+					{/each}
+				</div>
 			</nav>
 		</div>
 	</div>