<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>
