From 41d956ef756c4b7ea822eb9d9b1ff960c4d11296 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 16 Mar 2026 13:17:33 +0000
Subject: [PATCH] feat(sveltekit-helper): remove Sidebar wrapper from
 TableOfContents

Consumers are now responsible for wrapping TableOfContents in a Sidebar
component, keeping the component itself focused on TOC rendering only.

https://claude.ai/code/session_015fonomvgKkgUUybC6fbrcA
---
 .changeset/remove-toc-sidebar-wrapper.md      |  5 +++
 .../src/components/TableOfContents.svelte     | 45 +++++++++----------
 2 files changed, 26 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/remove-toc-sidebar-wrapper.md

diff --git a/.changeset/remove-toc-sidebar-wrapper.md b/.changeset/remove-toc-sidebar-wrapper.md
new file mode 100644
index 00000000..e02124fd
--- /dev/null
+++ b/.changeset/remove-toc-sidebar-wrapper.md
@@ -0,0 +1,5 @@
+---
+"@ainsleydev/sveltekit-helper": patch
+---
+
+Remove `<Sidebar>` wrapper from `TableOfContents` — consumers should wrap it themselves.
diff --git a/packages/sveltekit-helper/src/components/TableOfContents.svelte b/packages/sveltekit-helper/src/components/TableOfContents.svelte
index 8590c339..730495c4 100644
--- a/packages/sveltekit-helper/src/components/TableOfContents.svelte
+++ b/packages/sveltekit-helper/src/components/TableOfContents.svelte
@@ -41,7 +41,6 @@ export type TableOfContentsProps = {
 
 <script lang="ts">
 	import { onMount } from 'svelte'
-	import Sidebar from './Sidebar.svelte'
 
 	let {
 		heading = '',
@@ -133,29 +132,27 @@ export type TableOfContentsProps = {
 	<TableOfContents items={[{ label: 'Intro', href: 'intro' }]} />
 	```
 -->
-<Sidebar>
-	<div class="toc" class:toc--border={displayBorder}>
-		{#if heading !== ''}
-			<p class="toc__heading">
-				{heading}
-			</p>
-		{/if}
-		<menu class="toc__items">
-			{#each items as item, index (index)}
-				<li class="toc__item">
-					<a
-						class="toc__link"
-						class:toc__link--active={activeId ===
-							(item.href.startsWith('#') ? item.href.slice(1) : item.href)}
-						href="#{item.href}"
-					>
-						<small>{item.label}</small>
-					</a>
-				</li>
-			{/each}
-		</menu>
-	</div>
-</Sidebar>
+<div class="toc" class:toc--border={displayBorder}>
+	{#if heading !== ''}
+		<p class="toc__heading">
+			{heading}
+		</p>
+	{/if}
+	<menu class="toc__items">
+		{#each items as item, index (index)}
+			<li class="toc__item">
+				<a
+					class="toc__link"
+					class:toc__link--active={activeId ===
+						(item.href.startsWith('#') ? item.href.slice(1) : item.href)}
+					href="#{item.href}"
+				>
+					<small>{item.label}</small>
+				</a>
+			</li>
+		{/each}
+	</menu>
+</div>
 
 <style lang="scss">
 	@use '../scss' as a;