fix: toc

kobaltedev · Feb 25, 2024 · 7530652 · 7530652
1 parent ad3c18e
commit 7530652
Showing 1 changed file with 38 additions and 37 deletions.
diff --git a/apps/docs/src/components/table-of-contents.tsx b/apps/docs/src/components/table-of-contents.tsx
@@ -132,6 +132,25 @@ export function TableOfContents() {
 	);
 
 	const currentSection = useCurrentSection(toc);
+
+	createEffect(
+		on(
+			() => currentSection(),
+			(currentSection) => {
+				if (isServer) return;
+
+				const element = document.querySelector(
+					`a[data-toc-slug="${currentSection}"]`,
+				);
+
+				element?.scrollIntoView({
+					behavior: "smooth",
+					block: "nearest",
+				});
+			},
+		),
+	);
+
 	return (
 		<div class="hidden xl:sticky xl:top-[4.5rem] xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-4 xl:pr-6">
 			<nav aria-labelledby="on-this-page-title" class="w-56">
@@ -144,43 +163,25 @@ export function TableOfContents() {
 					</h2>
 					<ol class="mt-3 text-sm">
 						<For each={toc()}>
-							{(section) => {
-								let ref: HTMLElement;
-
-								createEffect(
-									on(
-										() => currentSection(),
-										(currentSection) => {
-											if (isServer || section.slug !== currentSection) return;
-
-											ref?.scrollIntoView({
-												behavior: "smooth",
-												block: "nearest",
-											});
-										},
-									),
-								);
-
-								return (
-									<li>
-										<h3>
-											<a
-												ref={ref}
-												href={`${path.pathname}#${section.slug}`}
-												class={clsx(
-													"block w-full font-sans transition font-normal rounded px-3 py-2 hover:bg-sky-50 dark:hover:bg-sky-900/20",
-													section.slug === currentSection()
-														? "text-sky-700 dark:text-sky-600"
-														: "text-zinc-600 dark:text-zinc-400",
-													section.depth === 3 && "pl-6",
-												)}
-											>
-												{section.text}
-											</a>
-										</h3>
-									</li>
-								);
-							}}
+							{(section) => (
+								<li>
+									<h3>
+										<a
+											data-toc-slug={section.slug}
+											href={`${path.pathname}#${section.slug}`}
+											class={clsx(
+												"block w-full font-sans transition font-normal rounded px-3 py-2 hover:bg-sky-50 dark:hover:bg-sky-900/20",
+												section.slug === currentSection()
+													? "text-sky-700 dark:text-sky-600"
+													: "text-zinc-600 dark:text-zinc-400",
+												section.depth === 3 && "pl-6",
+											)}
+										>
+											{section.text}
+										</a>
+									</h3>
+								</li>
+							)}
 						</For>
 					</ol>
 				</Suspense>