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

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

  $: active_class = $page.url.pathname === href ? '!text-slate-800 !bg-white/90 !from-transparent' : 'hover:text-slate-200 hover:border-slate-800';
</script>

<a href={href} data-sveltekit-preload-data class="px-5 py-3.5 rounded-xl bg-gradient-to-r border from-slate-800/70 to-slate-900 border-slate-800/50 text-slate-400 flex items-center justify-start gap-4 cursor-pointer {active_class}">
    <slot />
</a>