From 2b74eba9fd3b85af42ab29dd7c1f81f3a9111e19 Mon Sep 17 00:00:00 2001
From: Margarida Silva <ams-amargarida@hotmail.com>
Date: Tue, 5 Dec 2023 08:55:18 +0000
Subject: [PATCH] [fix](docs): maintain state in Accordion when changing pages

ISSUES CLOSED: #479
---
 apps/docs/src/lib/components/Sidebar.svelte   | 22 +++++-
 .../src/lib/theme/components/Layout.svelte    | 69 -------------------
 apps/docs/src/lib/theme/utils/index.js        |  2 +-
 apps/docs/src/lib/theme/utils/link-actions.js | 12 ----
 apps/docs/src/routes/+layout.svelte           |  7 +-
 5 files changed, 23 insertions(+), 89 deletions(-)
 delete mode 100644 apps/docs/src/lib/theme/components/Layout.svelte

diff --git a/apps/docs/src/lib/components/Sidebar.svelte b/apps/docs/src/lib/components/Sidebar.svelte
index bc20dbb55..343a7b2f1 100644
--- a/apps/docs/src/lib/components/Sidebar.svelte
+++ b/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">
diff --git a/apps/docs/src/lib/theme/components/Layout.svelte b/apps/docs/src/lib/theme/components/Layout.svelte
deleted file mode 100644
index 43625de7f..000000000
--- a/apps/docs/src/lib/theme/components/Layout.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script>
-	/* eslint-disable @typescript-eslint/ban-ts-comment */
-	// @ts-nocheck
-	import { Burger, SvelteUIProvider } from '@svelteuidev/core';
-	import { current_page } from '@svelte-docs/get/routes';
-	import maintitle from '@svelte-docs/get/maintitle';
-	import Logo from '@INCLUDES/logo.md';
-	import Topbar from '@INCLUDES/topbar.md';
-	import Sidebar from '@INCLUDES/sidebar.md';
-	import { set_active_link, outside_click } from '../utils';
-	import { fly } from 'svelte/transition';
-
-	current_page.subscribe(() => {
-		window.scrollTo(0, 0);
-	});
-
-	let sidebar_details,
-		window_width = 0,
-		show_sidebar = false;
-
-	$: mobile = window_width < 800;
-	$: show_sidebar = mobile ? show_sidebar : false;
-
-	$: title = $current_page.title ? $current_page.title + ' — ' + maintitle : maintitle;
-	$: nosidebar = $current_page.meta.layout === 'no_sidebar';
-</script>
-
-<svelte:head>
-	<title>{title}</title>
-</svelte:head>
-
-<svelte:window bind:innerWidth={window_width} />
-
-<div class="main" class:nosidebar={nosidebar || mobile}>
-	<div class="article">
-		<svelte:component this={$current_page.component} />
-	</div>
-</div>
-
-<SvelteUIProvider>
-	{#if !nosidebar}
-		{#if !mobile || (mobile && show_sidebar)}
-			<div
-				transition:fly={{ x: -100, duration: 300 }}
-				class="sidebar"
-				use:set_active_link
-				use:outside_click={{
-					handler: () => (show_sidebar = !show_sidebar),
-					detail: sidebar_details
-				}}
-			>
-				<Sidebar on:toggleSidebar={({ detail }) => (sidebar_details = detail)} />
-			</div>
-		{/if}
-	{/if}
-
-	<div class="topbar">
-		{#if mobile && !nosidebar}
-			<Burger
-				color="blue"
-				opened={show_sidebar}
-				class="show_sidebar"
-				on:click!stopPropagation={() => (show_sidebar = !show_sidebar)}
-			/>
-		{/if}
-		<div class="logo"><Logo /></div>
-		<div><Topbar /></div>
-	</div>
-</SvelteUIProvider>
diff --git a/apps/docs/src/lib/theme/utils/index.js b/apps/docs/src/lib/theme/utils/index.js
index 1a02f57e6..94e3f7593 100644
--- a/apps/docs/src/lib/theme/utils/index.js
+++ b/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';
diff --git a/apps/docs/src/lib/theme/utils/link-actions.js b/apps/docs/src/lib/theme/utils/link-actions.js
index 834ad735a..3ee9ec473 100644
--- a/apps/docs/src/lib/theme/utils/link-actions.js
+++ b/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;
 
diff --git a/apps/docs/src/routes/+layout.svelte b/apps/docs/src/routes/+layout.svelte
index c2a4eac6f..815bd655e 100644
--- a/apps/docs/src/routes/+layout.svelte
+++ b/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">