Active style in sveltekit

+layout.svelte

<script lang="ts">
	import NavLink from '$lib/components/nav-link.svelte';
	import { User } from 'lucide-svelte';
</script>

<NavLink href="/settings">
	<User size="16" strokeWidth={2} />
	<span> Settings </span>
</NavLink>

nav-link.scelte

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

	export let href: string;
</script>

<a
	{href}
	class:active={$page.url.pathname === href}
	class="flex items-center gap-2 rounded-md px-3 py-1 duration-200 hover:bg-[#2C2C2C] hover:text-aqua-green hover:opacity-100 [&.active]:bg-[#232323] [&.active]:text-green-500"
>
	<slot />
</a>