fix menu not closing

Author: theelims

interface/src/routes/+layout.svelte

@@ -32,12 +32,11 @@
 		if ($user.bearer_token !== '') {
 			await validateUser($user);
 		}
-        if (!(page.data.features.security && $user.bearer_token === '')) {
+		if (!(page.data.features.security && $user.bearer_token === '')) {
 			initSocket();
 		}
 	});
 
-
 	const initSocket = () => {
 		const ws_token = page.data.features.security ? '?access_token=' + $user.bearer_token : '';
 		socket.init(
@@ -131,15 +130,14 @@
 	const handleOAT = (data: DownloadOTA) => telemetry.setDownloadOTA(data);
 
 	let menuOpen = $state(false);
-    
 </script>
 
 <svelte:head>
 	<title>{page.data.title}</title>
 </svelte:head>
 
 {#if page.data.features.security && $user.bearer_token === ''}
-	<Login on:signIn={initSocket}/>
+	<Login on:signIn={initSocket} />
 {:else}
 	<div class="drawer lg:drawer-open">
 		<input id="main-menu" type="checkbox" class="drawer-toggle" bind:checked={menuOpen} />
@@ -153,7 +151,11 @@
 		<!-- Side Navigation -->
 		<div class="drawer-side z-30 shadow-lg">
 			<label for="main-menu" class="drawer-overlay"></label>
-			<Menu bind:value={menuOpen}/>
+			<Menu
+				closeMenu={() => {
+					menuOpen = false;
+				}}
+			/>
 		</div>
 	</div>
 {/if}
@@ -162,11 +164,10 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	{#snippet backdrop({ close })}
 		<div
-			
 			class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur"
 			transition:fade|global
 			onclick={() => close()}
-		></div> 
+		></div>
 	{/snippet}
 </Modals>
 

interface/src/routes/menu.svelte

@@ -20,7 +20,7 @@
 	import { page } from '$app/state';
 	import { user } from '$lib/stores/user';
 
-	let { menuOpen = $bindable() } = $props();
+	let { closeMenu } = $props();
 
 	const github = { href: 'https://github.com/' + page.data.github, active: true };
 
@@ -132,8 +132,7 @@
 				subItem.active = subItem.title === targetTitle;
 			});
 		});
-		menuItems = menuItems;
-		menuOpen = false;
+		closeMenu();
 	}
 
 	$effect(() => {
@@ -156,7 +155,7 @@
 			{#if menuItem.feature}
 				<li>
 					{#if menuItem.submenu}
-						<details open={menuItem.submenu.some(subItem => subItem.active)}>
+						<details open={menuItem.submenu.some((subItem) => subItem.active)}>
 							<summary class="text-lg font-bold">
 								<menuItem.icon class="h-6 w-6" />
 								{menuItem.title}
@@ -171,7 +170,6 @@
 												class="text-ml font-bold"
 												onclick={() => {
 													setActiveMenuItem(subMenuItem.title);
-													menuItems = menuItems;
 												}}><subMenuItem.icon class="h-5 w-5" />{subMenuItem.title}</a
 											>
 										</li>
@@ -186,7 +184,6 @@
 							class="text-lg font-bold"
 							onclick={() => {
 								setActiveMenuItem(menuItem.title);
-								menuItems = menuItems;
 							}}><menuItem.icon class="h-6 w-6" />{menuItem.title}</a
 						>
 					{/if}