Close SideNav when clicking on NavAnchor

Author: Discusser

src/lib/components/shared/NavAnchor.svelte

@@ -2,6 +2,7 @@
 	import { page } from '$app/stores';
 	import { isAnchorActive } from '$lib/utils/index';
 	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
 	import { twMerge } from 'tailwind-merge';
 
 	let {
@@ -17,7 +18,7 @@
 		target?: string;
 		fuzzy?: boolean;
 		class?: string;
-	} = $props();
+	} & HTMLAnchorAttributes = $props();
 </script>
 
 <a

src/lib/components/shared/NavBar.svelte

@@ -7,7 +7,10 @@
 
 	let sidebarOpen = $state(false);
 
-	const toggleSidebar = () => (sidebarOpen = !sidebarOpen);
+	const toggleSidebar = () => {
+		console.log('test');
+		sidebarOpen = !sidebarOpen;
+	};
 
 	$effect(() => {
 		if (sidebarOpen) {
@@ -26,7 +29,7 @@
 			<Button variant="outline" size="icon" onclick={toggleSidebar}>
 				<IconX />
 			</Button>
-			<SideNav class="-ml-4" />
+			<SideNav class="-ml-4" onclick={toggleSidebar} />
 		</div>
 	{/if}
 	<div class="flex flex-grow justify-center p-4">

src/lib/components/shared/SideNav.svelte

@@ -1,27 +1,30 @@
 <script lang="ts">
 	import NavAnchor from '$lib/components/shared/NavAnchor.svelte';
+	import type { MouseEventHandler } from 'svelte/elements';
 
 	let {
 		class: className,
+		onclick,
 		...restProps
 	}: {
 		class?: string;
+		onclick?: MouseEventHandler<HTMLAnchorElement>;
 	} = $props();
 </script>
 
 <div class={className} {...restProps}>
 	<ul>
-		<li><NavAnchor href="/">Home</NavAnchor></li>
+		<li><NavAnchor {onclick} href="/">Home</NavAnchor></li>
 		<li>
-			<NavAnchor href="/projects">Projects</NavAnchor>
+			<NavAnchor {onclick} href="/projects">Projects</NavAnchor>
 			<ul>
-				<li><NavAnchor fuzzy href="/projects/web">Web</NavAnchor></li>
-				<li><NavAnchor fuzzy href="/projects/cpp">C/C++</NavAnchor></li>
-				<li><NavAnchor fuzzy href="/projects/python">Python</NavAnchor></li>
-				<li><NavAnchor fuzzy href="/projects/other">Other</NavAnchor></li>
+				<li><NavAnchor {onclick} fuzzy href="/projects/web">Web</NavAnchor></li>
+				<li><NavAnchor {onclick} fuzzy href="/projects/cpp">C/C++</NavAnchor></li>
+				<li><NavAnchor {onclick} fuzzy href="/projects/python">Python</NavAnchor></li>
+				<li><NavAnchor {onclick} fuzzy href="/projects/other">Other</NavAnchor></li>
 			</ul>
 		</li>
-		<li><NavAnchor href="/blog">Blog</NavAnchor></li>
-		<li><NavAnchor href="/hobbies">Hobbies</NavAnchor></li>
+		<li><NavAnchor {onclick} href="/blog">Blog</NavAnchor></li>
+		<li><NavAnchor {onclick} href="/hobbies">Hobbies</NavAnchor></li>
 	</ul>
 </div>