src/lib/components/sidebar/Menu.svelte

<script lang="ts">
  import { page } from '$app/stores';
  import Banner from "$lib/assets/banner.webp";

  export let href: string;
  export let colorful: boolean = false;
  export let target: string = '_self';

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

<li>
  {#if colorful}
    <a
      href={href}
      {target}
      class="transition-all duration-200 w-full flex items-center justify-start text-white font-bold rounded-xl text-base font-regular px-5 py-3.5 gap-2.5 border border-transparent relative z-[1] overflow-hidden"
    >
      <div
        class="absolute top-0 left-0 w-full h-full bg-black brightness-75 rounded-xl z-[-1] transition-all duration-200 bg-cover hover:brightness-100"
        style="background-image: url({Banner}); background-position: 0% 0%;"
      />
      <slot />
    </a>
  {:else}
    <a href={href} {target} 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>
  {/if}
</li>