55e681c209
Provides logo + language switcher on brand-navy background with 4px accent strip. Used on login and forgot-password pages in place of the floating language switcher. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
35 lines
1.1 KiB
Svelte
35 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { setLocale, getLocale } from '$lib/paraglide/runtime';
|
|
|
|
const locales = ['DE', 'EN', 'ES'] as const;
|
|
const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
|
|
const activeLocale = $derived(getLocale().toUpperCase());
|
|
</script>
|
|
|
|
<header class="bg-brand-navy">
|
|
<div class="h-1 bg-accent"></div>
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div class="flex h-12 items-center justify-between">
|
|
<a href="/" class="flex items-center" aria-label="Familienarchiv">
|
|
<span class="font-sans text-sm font-bold tracking-widest text-white uppercase"
|
|
>Familienarchiv</span
|
|
>
|
|
</a>
|
|
<div class="flex items-center gap-1">
|
|
{#each locales as locale (locale)}
|
|
<button
|
|
type="button"
|
|
onclick={() => setLocale(localeMap[locale])}
|
|
class="px-1.5 py-1 font-sans text-xs tracking-widest transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
|
|
{activeLocale === locale
|
|
? 'font-bold text-white'
|
|
: 'font-normal text-white/55 hover:text-white/85'}"
|
|
>
|
|
{locale}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|