Create comonent for collapsing menu entries

svelte/src/wrap/MenuEntry.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+import ToggleButton from "layout/ToggleButton.svelte";
+import { onMount } from "svelte";
+
+type Expandable = {[key: string]: boolean}
+
+let {
+	id,
+	collapsed = false,
+	title,
+	body,
+}: {
+	id: string
+	collapsed: boolean
+	title: import('svelte').Snippet
+	body: import('svelte').Snippet
+} = $props();
+
+let expanded: boolean = $state(true)
+
+const get_status = (): Expandable => {
+	let exp = localStorage.getItem("menu_expanded")
+	if (exp === null) {
+		exp = "{}"
+	}
+
+	return JSON.parse(exp) as Expandable
+}
+
+onMount(() => {
+	let exp = get_status()
+	if (exp[id] !== undefined) {
+		expanded = exp[id]
+	}
+})
+
+const toggle = (e: MouseEvent) => {
+	let exp = get_status()
+
+	exp[id] = expanded
+
+	localStorage.setItem("menu_expanded", JSON.stringify(exp))
+}
+</script>
+
+<div class="title">
+	<ToggleButton bind:on={expanded} action={toggle} icon_on="arrow_drop_down" icon_off="arrow_drop_up" highlight={false}/>
+
+	{#if !collapsed}
+		{@render title()}
+	{/if}
+</div>
+
+{#if expanded}
+	{@render body()}
+
+	<div class="separator"></div>
+{/if}
+
+
+<style>
+.title {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	border-bottom: 1px solid var(--separator);
+}
+.separator {
+	height: 1px;
+	width: 100%;
+	background-color: var(--separator);
+}
+</style>