From d9285bbdc0ad6b66e297ff034f7b54dfe708d189 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Wed, 26 Feb 2025 21:47:34 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Makes=20menu=20items=20stay=20op?=
 =?UTF-8?q?en?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/lib/components/menu/MenuList.svelte | 88 ++++++++++-----------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/app/src/lib/components/menu/MenuList.svelte b/app/src/lib/components/menu/MenuList.svelte
index 5c0f4a9..3e4009a 100644
--- a/app/src/lib/components/menu/MenuList.svelte
+++ b/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 = {
-		title: string;
-		icon: ConstructorOfATypedSvelteComponent;
-		href?: string;
-		feature: boolean;
-		active?: boolean;
-		submenu?: menuItem[];
-	};
+    type menuItem = {
+        title: string;
+        icon: ConstructorOfATypedSvelteComponent;
+        href?: string;
+        feature: boolean;
+        active?: boolean;
+        submenu?: menuItem[];
+    };
 
-	export let menuItems: menuItem[];
+    export let menuItems: menuItem[];
 
-	export let level = 0;
+    export let level = 0;
 
-	const selectMenuItem = (title: string) => {
-		dispatch('select', title);
-	};
+    const selectMenuItem = (title: string) => {
+        dispatch('select', title);
+    };
 </script>
 
 <ul class={$$props.class + ' menu'}>
-	{#each menuItems as menuItem, i (menuItem.title)}
-		{#if menuItem.feature}
-			<li>
-				{#if menuItem.submenu}
-					<details>
-						<summary class="text-lg font-bold">
-							<svelte:component this={menuItem.icon} class="h-6 w-6" />
-							{menuItem.title}
-						</summary>
-						<div class="pl-4">
-							<svelte:self menuItems={menuItem.submenu} level={level + 1} />
-						</div>
-					</details>
-				{:else}
-					<a
-						href={menuItem.href}
-						class="font-bold"
-						class:bg-base-100={menuItem.active}
-						class:text-lg={level === 0}
-						class:text-md={level === 1}
-						on:click={() => selectMenuItem(menuItem.title)}
-					>
-						<svelte:component this={menuItem.icon} class="h-6 w-6" />
-						{menuItem.title}
-					</a>
-				{/if}
-			</li>
-		{/if}
-	{/each}
+    {#each menuItems as menuItem, i (menuItem.title)}
+        {#if menuItem.feature}
+            <li>
+                {#if menuItem.submenu}
+                    <details open={menuItem.submenu.some(subItem => subItem.active)}>
+                        <summary class="text-lg font-bold">
+                            <svelte:component this={menuItem.icon} class="h-6 w-6" />
+                            {menuItem.title}
+                        </summary>
+                        <div class="pl-4">
+                            <svelte:self menuItems={menuItem.submenu} level={level + 1} />
+                        </div>
+                    </details>
+                {:else}
+                    <a
+                        href={menuItem.href}
+                        class="font-bold"
+                        class:bg-base-100={menuItem.active}
+                        class:text-lg={level === 0}
+                        class:text-md={level === 1}
+                        on:click={() => selectMenuItem(menuItem.title)}
+                    >
+                        <svelte:component this={menuItem.icon} class="h-6 w-6" />
+                        {menuItem.title}
+                    </a>
+                {/if}
+            </li>
+        {/if}
+    {/each}
 </ul>