diff --git a/src/lib/components/nav component/burger_icon.svelte b/src/lib/components/nav component/burger_icon.svelte
index 624de2f..3e37d29 100644
--- a/src/lib/components/nav component/burger_icon.svelte	
+++ b/src/lib/components/nav component/burger_icon.svelte	
@@ -1,17 +1,12 @@
 <script>
 	const amount = [1, 2, 3];
-	let state_class = $state('');
 
 	let { open = $bindable(false), arialabel = 'toggle menu' } = $props();
 
+	let state_class = $derived(open ? 'open' : '');
+
 	const onClick = () => {
 		open = !open;
-
-		if (open) {
-			state_class = 'open';
-		} else {
-			state_class = '';
-		}
 	};
 </script>
 
diff --git a/src/lib/components/nav component/mobile navbar.svelte b/src/lib/components/nav component/mobile navbar.svelte
index 2a5d6d9..238eced 100644
--- a/src/lib/components/nav component/mobile navbar.svelte	
+++ b/src/lib/components/nav component/mobile navbar.svelte	
@@ -7,7 +7,11 @@
 		transformX = '-50%',
 		transformY = '-20px'
 	} = $props();
-	let open = $state(false);
+	let open = $derived(false);
+
+	const onClick = () => {
+		open = false;
+	};
 </script>
 
 <nav id="mobile_navbar">
@@ -16,7 +20,7 @@
 	{#if open}
 		<ul style="transform: translateX({transformX}) translateY({transformY});">
 			{#each pages as { route, name } (route)}
-				<li><a href={resolve(route)}>{name}</a></li>
+				<li><a href={resolve(route)} onclick={onClick}>{name}</a></li>
 			{/each}
 		</ul>
 	{/if}