src/lib/components/sidebar/links/Primary.svelte

<script lang="ts">
	import { page } from '$app/stores';
  export let href: string;
  export let type: string = "green"

  $: active_class = $page.url.pathname === href ? type === 'green' ? 'bg-green-600 !text-green-500' : 'bg-pink-500 !text-pink-500' : 'bg-slate-700';
</script>

<a href={href} data-sveltekit-preload-data class="p-5 transition-all duration-200 bg-opacity-20 border-transparent rounded-xl {active_class}">
  <li>
    <slot />
  </li>
</a>