disable autofold for nav accordion

intuitem · Jan 8, 2025 · 6a629fe · 6a629fe
1 parent 84572a5
commit 6a629fe
Showing 1 changed file with 22 additions and 39 deletions.
diff --git a/frontend/src/lib/components/SideBar/SideBarNavigation.svelte b/frontend/src/lib/components/SideBar/SideBarNavigation.svelte
@@ -1,31 +1,18 @@
 <script lang="ts">
 	import { navData } from '$lib/components/SideBar/navData';
-
 	import SideBarItem from '$lib/components/SideBar/SideBarItem.svelte';
 	import SideBarCategory from '$lib/components/SideBar/SideBarCategory.svelte';
 	import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
 	import { page } from '$app/stores';
 	import { URL_MODEL_MAP } from '$lib/utils/crud';
+	import { writable } from 'svelte/store';
 
-	// if (browser) {
-	// 	let buttonList = document.querySelectorAll('button');
-	// 	buttonList.forEach((button) => {
-	// 		button.addEventListener('click', () => {
-	// 			buttonList.forEach((button) => {
-	// 				button.classList.remove('bg-primary-100');
-	// 				button.classList.remove('text-primary-800');
-	// 			});
-	// 			button.classList.add('bg-primary-100');
-	// 			button.classList.add('text-primary-800');
-	// 		});
-	// 	});
-	// }
+	// Create a store to track the open state of accordion items
+	const openItems = writable<string[]>([]);
 
 	const user = $page.data.user;
-
 	const items = navData.items
 		.map((item) => {
-			// Check and filter the sub-items based on user permissions
 			const filteredSubItems = item.items.filter((subItem) => {
 				if (subItem.exclude) {
 					return subItem.exclude.some((role) => user?.roles && !user.roles.includes(role));
@@ -41,46 +28,42 @@
 				}
 				return false;
 			});
-
 			return {
 				...item,
 				items: filteredSubItems
 			};
 		})
-		.filter((item) => item.items.length > 0); // Filter out items with no sub-items
+		.filter((item) => item.items.length > 0);
 
-	import { lastAccordionItem } from '$lib/utils/stores';
-
-	function lastAccordionItemOpened(value: string) {
-		lastAccordionItem.set(value);
+	// Modified function to handle accordion item state
+	function handleAccordionClick(itemName: string) {
+		openItems.update((items) => {
+			const index = items.indexOf(itemName);
+			if (index === -1) {
+				// If item is not open, add it to the open items
+				return [...items, itemName];
+			} else {
+				// If item is already open, remove it
+				return items.filter((item) => item !== itemName);
+			}
+		});
+		lastAccordionItem.set(itemName);
 	}
+
+	import { lastAccordionItem } from '$lib/utils/stores';
 </script>
 
 <nav class="flex-grow scrollbar">
-	<Accordion
-		autocollapse
-		spacing="space-y-4"
-		regionPanel="space-y-2"
-		caretClosed="-rotate-90"
-		caretOpen=""
-	>
+	<Accordion spacing="space-y-4" regionPanel="space-y-2" caretClosed="-rotate-90" caretOpen="">
 		{#each items as item}
-			<!-- This commented code adds Accordion persistency but changes its visual behavior -->
-			<!-- {#if $lastAccordionItem === item.name}
-				<AccordionItem id={item.name} on:click={() => lastAccordionItemOpened(item.name)}  open>
-					<svelte:fragment slot="summary"><SideBarCategory {item} /></svelte:fragment>
-					<svelte:fragment slot="content"><SideBarItem item={item.items} /></svelte:fragment>
-				</AccordionItem>
-			{:else} -->
 			<AccordionItem
 				id={item.name.toLowerCase().replace(' ', '-')}
-				on:click={() => lastAccordionItemOpened(item.name)}
-				open={$lastAccordionItem === item.name}
+				on:click={() => handleAccordionClick(item.name)}
+				open={$openItems.includes(item.name)}
 			>
 				<svelte:fragment slot="summary"><SideBarCategory {item} /></svelte:fragment>
 				<svelte:fragment slot="content"><SideBarItem item={item.items} /></svelte:fragment>
 			</AccordionItem>
-			<!-- {/if} -->
 		{/each}
 	</Accordion>
 </nav>