<script lang="ts">
	import { page } from '$app/stores';
	import { accelerator, type Shortcut } from '$lib/Shortcuts';
	import type { HTMLAttributeAnchorTarget } 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);
</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}>
		<div class="flex p-3">
			<slot />
		</div>
	</a>
</li>