🐛 Makes menu items stay open

app/src/lib/components/menu/MenuList.svelte

@@ -1,54 +1,54 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher } from 'svelte';
 
-	const dispatch = createEventDispatcher();
+    const dispatch = createEventDispatcher();
 
-	type menuItem = {
+    type menuItem = {
-		title: string;
+        title: string;
-		icon: ConstructorOfATypedSvelteComponent;
+        icon: ConstructorOfATypedSvelteComponent;
-		href?: string;
+        href?: string;
-		feature: boolean;
+        feature: boolean;
-		active?: boolean;
+        active?: boolean;
-		submenu?: menuItem[];
+        submenu?: menuItem[];
-	};
+    };
 
-	export let menuItems: menuItem[];
+    export let menuItems: menuItem[];
 
-	export let level = 0;
+    export let level = 0;
 
-	const selectMenuItem = (title: string) => {
+    const selectMenuItem = (title: string) => {
-		dispatch('select', title);
+        dispatch('select', title);
-	};
+    };
 </script>
 
 <ul class={$$props.class + ' menu'}>
-	{#each menuItems as menuItem, i (menuItem.title)}
+    {#each menuItems as menuItem, i (menuItem.title)}
-		{#if menuItem.feature}
+        {#if menuItem.feature}
-			<li>
+            <li>
-				{#if menuItem.submenu}
+                {#if menuItem.submenu}
-					<details>
+                    <details open={menuItem.submenu.some(subItem => subItem.active)}>
-						<summary class="text-lg font-bold">
+                        <summary class="text-lg font-bold">
-							<svelte:component this={menuItem.icon} class="h-6 w-6" />
+                            <svelte:component this={menuItem.icon} class="h-6 w-6" />
-							{menuItem.title}
+                            {menuItem.title}
-						</summary>
+                        </summary>
-						<div class="pl-4">
+                        <div class="pl-4">
-							<svelte:self menuItems={menuItem.submenu} level={level + 1} />
+                            <svelte:self menuItems={menuItem.submenu} level={level + 1} />
-						</div>
+                        </div>
-					</details>
+                    </details>
-				{:else}
+                {:else}
-					<a
+                    <a
-						href={menuItem.href}
+                        href={menuItem.href}
-						class="font-bold"
+                        class="font-bold"
-						class:bg-base-100={menuItem.active}
+                        class:bg-base-100={menuItem.active}
-						class:text-lg={level === 0}
+                        class:text-lg={level === 0}
-						class:text-md={level === 1}
+                        class:text-md={level === 1}
-						on:click={() => selectMenuItem(menuItem.title)}
+                        on:click={() => selectMenuItem(menuItem.title)}
-					>
+                    >
-						<svelte:component this={menuItem.icon} class="h-6 w-6" />
+                        <svelte:component this={menuItem.icon} class="h-6 w-6" />
-						{menuItem.title}
+                        {menuItem.title}
-					</a>
+                    </a>
-				{/if}
+                {/if}
-			</li>
+            </li>
-		{/if}
+        {/if}
-	{/each}
+    {/each}
 </ul>