Marcel Raddatz
bd8e901685
Extracts isActiveRoute() into shared nav module. Matches exact path or path + '/' prefix, preventing /settings from matching /settings-advanced. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
43 lines
1.5 KiB
Svelte
43 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import { desktopNavSections, isActiveRoute } from './nav';
|
|
|
|
let { appName, householdName }: { appName: string; householdName: string } = $props();
|
|
</script>
|
|
|
|
<aside
|
|
class="hidden lg:flex flex-col sticky top-0 h-screen w-[224px] min-w-[224px] border-r border-[var(--color-border)] bg-white"
|
|
>
|
|
<div class="px-[18px] pt-[14px] pb-[14px] border-b border-[var(--color-border)]">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-[22px] h-[22px] bg-[var(--green)] rounded-[var(--radius-sm)]"></div>
|
|
<span class="font-[var(--font-display)] text-[15px] font-medium">{appName}</span>
|
|
</div>
|
|
<p class="text-[10px] text-[var(--color-text-muted)]">{householdName}</p>
|
|
</div>
|
|
|
|
<nav aria-label="Hauptnavigation" class="flex-1 overflow-y-auto px-2 py-1">
|
|
{#each desktopNavSections as section (section.title)}
|
|
<p
|
|
class="text-[8px] font-medium uppercase tracking-[0.1em] text-[var(--color-text-muted)] font-[var(--font-sans)] px-3 pt-4 pb-1"
|
|
>
|
|
{section.title}
|
|
</p>
|
|
{#each section.items as item (item.href)}
|
|
{@const active = isActiveRoute(item.href, $page.url.pathname)}
|
|
<a
|
|
href={item.href}
|
|
aria-current={active ? 'page' : undefined}
|
|
class="px-3 py-[7px] text-[13px] font-[var(--font-sans)] rounded-[var(--radius-md)] flex items-center gap-2 {active
|
|
? 'bg-[var(--green-tint)] text-[var(--green-dark)] font-medium'
|
|
: ''}"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
{/each}
|
|
{/each}
|
|
</nav>
|
|
|
|
<div data-testid="variety-widget-slot" class="mt-auto p-3"></div>
|
|
</aside>
|