blob: d18fe3e743cdaa89a44bde6ada84c525ef768532 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<script lang="ts">
import { page } from '$app/state';
import { accelerator, type Shortcut } from '$lib/Shortcuts';
import type { Snippet } from 'svelte';
import type { HTMLAnchorAttributes } from 'svelte/elements';
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-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">
{@render children?.()}
</div>
</a>
</li>
|
