<script lang="ts">
  import { page } from '$app/stores';

  export let href: string;

  $: active_class = $page.url.pathname === href ? 'bg-neutral-900 !border-neutral-800' : '';
</script>

<li>
  <a href={href} class="transition-all duration-200 w-full flex items-center justify-start text-neutral-200 rounded-xl text-base font-regular px-5 py-3.5 gap-2.5 border border-transparent {active_class}">
    <slot />
  </a>
</li>