195 lines
6.6 KiB
Svelte
195 lines
6.6 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/state';
|
|
import { untrack } from 'svelte';
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
|
|
|
|
let { isAdmin = false }: { isAdmin?: boolean } = $props();
|
|
|
|
let mobileNavOpen = $state(false);
|
|
|
|
$effect(() => {
|
|
// Read pathname to establish the reactive dependency.
|
|
// Write via untrack so the effect doesn't re-run on its own write.
|
|
void page.url.pathname;
|
|
untrack(() => {
|
|
mobileNavOpen = false;
|
|
});
|
|
});
|
|
|
|
function closeMobileNav() {
|
|
mobileNavOpen = false;
|
|
}
|
|
|
|
function handleOverlayKeydown(event: KeyboardEvent) {
|
|
if (event.key === 'Escape') {
|
|
mobileNavOpen = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<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-white uppercase"
|
|
>Familienarchiv</span
|
|
>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Desktop nav -->
|
|
<nav class="hidden items-stretch lg:flex lg:space-x-1">
|
|
<a
|
|
href="/documents"
|
|
class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
|
|
{page.url.pathname.startsWith('/documents')
|
|
? 'border-b-2 border-accent text-white'
|
|
: 'text-white/70 hover:text-white'}"
|
|
>
|
|
{m.nav_documents()}
|
|
</a>
|
|
|
|
<a
|
|
href="/persons"
|
|
class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
|
|
{page.url.pathname.startsWith('/persons')
|
|
? 'border-b-2 border-accent text-white'
|
|
: 'text-white/70 hover:text-white'}"
|
|
>
|
|
{m.nav_persons()}
|
|
</a>
|
|
|
|
<a
|
|
href="/briefwechsel"
|
|
class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
|
|
{page.url.pathname.startsWith('/briefwechsel')
|
|
? 'border-b-2 border-accent text-white'
|
|
: 'text-white/70 hover:text-white'}"
|
|
>
|
|
{m.nav_conversations()}
|
|
</a>
|
|
{#if isAdmin}
|
|
<a
|
|
href="/admin"
|
|
class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
|
|
{page.url.pathname.startsWith('/admin')
|
|
? 'border-b-2 border-accent text-white'
|
|
: 'text-white/70 hover:text-white'}"
|
|
>
|
|
{m.nav_admin()}
|
|
</a>
|
|
{/if}
|
|
</nav>
|
|
|
|
<!-- Hamburger toggle (mobile only) -->
|
|
<button
|
|
class="ml-auto flex h-11 w-11 items-center justify-center self-center rounded text-white/70 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring lg:hidden"
|
|
aria-label={mobileNavOpen ? 'Menü schließen' : 'Menü öffnen'}
|
|
aria-expanded={mobileNavOpen}
|
|
aria-controls="mobile-nav"
|
|
onclick={() => (mobileNavOpen = !mobileNavOpen)}
|
|
>
|
|
{#if mobileNavOpen}
|
|
<!-- X icon -->
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="22"
|
|
height="22"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<line x1="18" y1="6" x2="6" y2="18" />
|
|
<line x1="6" y1="6" x2="18" y2="18" />
|
|
</svg>
|
|
{:else}
|
|
<!-- Hamburger icon -->
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="22"
|
|
height="22"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<line x1="3" y1="6" x2="21" y2="6" />
|
|
<line x1="3" y1="12" x2="21" y2="12" />
|
|
<line x1="3" y1="18" x2="21" y2="18" />
|
|
</svg>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile nav overlay -->
|
|
{#if mobileNavOpen}
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="fixed inset-0 top-[68px] z-40 lg:hidden" onkeydown={handleOverlayKeydown}>
|
|
<!-- Backdrop -->
|
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="absolute inset-0 bg-black/20" onclick={closeMobileNav}></div>
|
|
|
|
<!-- 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="/documents"
|
|
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-focus-ring focus-visible:ring-inset
|
|
{page.url.pathname.startsWith('/documents')
|
|
? '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 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
|
|
{page.url.pathname.startsWith('/persons')
|
|
? 'bg-accent-bg text-ink'
|
|
: 'text-ink-2 hover:bg-muted hover:text-ink'}"
|
|
>
|
|
{m.nav_persons()}
|
|
</a>
|
|
|
|
<a
|
|
href="/briefwechsel"
|
|
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-focus-ring focus-visible:ring-inset
|
|
{page.url.pathname.startsWith('/briefwechsel')
|
|
? 'bg-accent-bg text-ink'
|
|
: 'text-ink-2 hover:bg-muted hover:text-ink'}"
|
|
>
|
|
{m.nav_conversations()}
|
|
</a>
|
|
|
|
{#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 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
|
|
{page.url.pathname.startsWith('/admin')
|
|
? 'bg-accent-bg text-ink'
|
|
: 'text-ink-2 hover:bg-muted hover:text-ink'}"
|
|
>
|
|
{m.nav_admin()}
|
|
</a>
|
|
{/if}
|
|
|
|
<!-- Language switcher -->
|
|
<div
|
|
class="flex items-center gap-2 border-t border-line px-4 py-3 [&_button]:min-h-[44px] [&_button]:px-3 [&_button]:text-sm"
|
|
>
|
|
<LanguageSwitcher />
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
{/if}
|