2 files changed, 35 insertions, 12 deletions
diff --git a/frontend/src/lib/navigation/Link.svelte b/frontend/src/lib/navigation/Link.svelte
index 7297a69..d18fe3e 100644
--- a/frontend/src/lib/navigation/Link.svelte
+++ b/frontend/src/lib/navigation/Link.svelte
@@ -1,20 +1,37 @@
 <script lang="ts">
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { accelerator, type Shortcut } from '$lib/Shortcuts';
-	import type { HTMLAttributeAnchorTarget } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
 
-	export let href: string;
-	export let title: string;
-	export let accel: Shortcut;
-	export let matchExact = false;
-	export let target: HTMLAttributeAnchorTarget | undefined = undefined;
-	$: active = matchExact ? $page.url.pathname === href : $page.url.pathname.startsWith(href);
+	interface Props extends Pick<HTMLAnchorAttributes, 'title' | 'target'> {
+		href: string;
+		accel: Shortcut;
+		matchExact?: boolean;
+		children?: Snippet;
+	}
+
+	let { href, title, accel, matchExact = false, target, children }: Props = $props();
+
+	let active = $derived.by(() => {
+		if (matchExact) {
+			return page.url.pathname === href;
+		} else {
+			return page.url.pathname.startsWith(href);
+		}
+	});
 </script>
 
-<li class:active class="items-center hover:bg-indigo-700 [&.active]:bg-indigo-700">
-	<a class="flex items-center" {target} {title} {href} use:accelerator={accel}>
+<li class:active class="items-center hover:bg-slate-600 [&.active]:bg-indigo-700">
+	<a
+		class="flex items-center focus-visible:bg-slate-600 focus-visible:outline-hidden"
+		{target}
+		{title}
+		{href}
+		use:accelerator={accel}
+	>
 		<div class="flex p-3">
-			<slot />
+			{@render children?.()}
 		</div>
 	</a>
 </li>
diff --git a/frontend/src/lib/navigation/Navigation.svelte b/frontend/src/lib/navigation/Navigation.svelte
index 76096c8..6734272 100644
--- a/frontend/src/lib/navigation/Navigation.svelte
+++ b/frontend/src/lib/navigation/Navigation.svelte
@@ -1,5 +1,11 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children?: Snippet } = $props();
+</script>
+
 <nav>
 	<ul class="flex h-full flex-col bg-slate-700/70 font-medium">
-		<slot />
+		{@render children?.()}
 	</ul>
 </nav>