[fix](docs): maintain state in Accordion when changing pages

ISSUES CLOSED: #479

apps/docs/src/lib/components/Sidebar.svelte

@@ -22,6 +22,20 @@
 	} from 'radix-icons-svelte';
 	import { base } from '$app/paths';
 
+	export let pathname: string;
+
+	let accordionEl: HTMLElement;
+	$: {
+		// Sets the active link in the Sidebar when the page changes
+		accordionEl?.querySelectorAll('a').forEach((a) => {
+			if (a.getAttribute('href') === pathname) {
+				a.classList.add('active');
+			} else {
+				a.classList.remove('active');
+			}
+		});
+	}
+
 	const useStyles = createStyles(() => ({
 		'.svelteui-AccordionItem-panel': {
 			padding: '0 !important',
@@ -76,7 +90,13 @@
 
 <hr />
 
-<Accordion variant="default" chevronPosition="left" multiple class={getStyles()}>
+<Accordion
+	bind:element={accordionEl}
+	variant="default"
+	chevronPosition="left"
+	multiple
+	class={getStyles()}
+>
 	<Accordion.Item value="changelog">
 		<div slot="control"><NavigationTitle>Changelog</NavigationTitle></div>
 		<ul class="list">

apps/docs/src/lib/theme/utils/index.js

@@ -1 +1 @@
-export { outside_click, set_active_link } from './link-actions';
+export { outside_click } from './link-actions';

apps/docs/src/lib/theme/utils/link-actions.js

@@ -1,20 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
-// import { current_page } from '@svelte-docs/get/routes';
-
-export function set_active_link(node, options) {
-	node.querySelectorAll('a').forEach((a) => {
-		if (a.getAttribute('href') === options.page.url.pathname) {
-			a.classList.add('active');
-		} else {
-			a.classList.remove('active');
-		}
-	});
-}
 
 export function outside_click(node, options) {
 	const { handler } = options;
-	console.log(node);
 	const HTMLCollection = node.children[1].children;
 	let runner;
 

apps/docs/src/routes/+layout.svelte

@@ -3,7 +3,6 @@
 	import { colorScheme, Burger, SvelteUIProvider } from '@svelteuidev/core';
 	import { page } from '$app/stores';
 	import { Device, Logo, PageTransition, TopBar, Sidebar } from '$lib/components';
-	import { set_active_link } from '$lib/theme/utils';
 	import '$lib/theme/style.css';
 	import type { PageData } from './$types';
 	import { onMount } from 'svelte';
@@ -36,11 +35,7 @@
 				class="sidebar"
 				class:active-sidebar={show_sidebar}
 			>
-				{#key $page}
-					<div use:set_active_link={{ page: $page }}>
-						<Sidebar />
-					</div>
-				{/key}
+				<Sidebar pathname={$page.url.pathname} />
 			</div>
 		{/if}
 		<div class="topbar">