29 lines
652 B
Svelte
29 lines
652 B
Svelte
<script lang="ts">
|
|
import Icon from "$lib/components/ui/Icon.svelte";
|
|
import { page } from "$app/stores";
|
|
|
|
export let icon: string;
|
|
export let iconActive: string = icon;
|
|
export let title: string;
|
|
export let href = "/";
|
|
|
|
let active: boolean;
|
|
$: active = $page.url.pathname == href;
|
|
</script>
|
|
|
|
<li class:active>
|
|
<a {href} class="max-w-full"
|
|
><span class="flex-none"><Icon path={active ? iconActive : icon} /></span>
|
|
<span class="ellipsis">{title}</span></a
|
|
>
|
|
</li>
|
|
|
|
<style lang="postcss">
|
|
li {
|
|
@apply max-w-full text-base-content font-semibold text-opacity-60;
|
|
}
|
|
|
|
.active {
|
|
@apply text-opacity-100;
|
|
}
|
|
</style>
|