Darkages/SpotMicroESP32-Leika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 Makes menu items stay open

Browse Source
This commit is contained in:
Rune Harlyk
2025-02-26 21:47:34 +01:00
parent a4eca1460e
commit d9285bbdc0
1 changed files with 44 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/lib/components/menu/MenuList.svelte
+44 -44
View File
@@ -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>