From a5279c9e6f1e1b6f3e0fa960be97cf681037ea2c Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Mon, 25 Aug 2025 11:44:01 +0200
Subject: [PATCH] set projects to contentsidebar

---
 src/lib/table-of-contents.svelte |  4 +--
 src/routes/projects/+page.svelte | 58 +++++++++++++++++---------------
 2 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/lib/table-of-contents.svelte b/src/lib/table-of-contents.svelte
index a1b0ae0..4c9e46c 100644
--- a/src/lib/table-of-contents.svelte
+++ b/src/lib/table-of-contents.svelte
@@ -91,8 +91,8 @@
         }
         .toc-list li a {
             width: 100%;
-            padding-top: 4px;
-            padding-bottom: 4px;
+            padding-top: 3px;
+            padding-bottom: 3px;
             padding-right: 24px;
             display: inline-block;
             color: var(--color-text);
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index e0b9cd0..5cb8da7 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import BannerTitleAlt from "$lib/banner-title-alt.svelte";
     import TableOfContents from "$lib/table-of-contents.svelte";
-    import Content from "$lib/content.svelte";
     import type { Project } from '$lib/projects';
     import { projects } from '$lib/projects';
     import LinkList from "$lib/link-list.svelte";
+    import ContentSidebar from "$lib/content-sidebar.svelte";
 
     let getActiveProjects = function(projects: Project[], isActive: boolean): Project[] {
         var result: Project[] = [];
@@ -28,34 +28,36 @@
     subtitle="Things I have worked on"
 />
 
-<Content>
-    <TableOfContents disableStickyScrolling={true} />
+<ContentSidebar>
+    <TableOfContents slot="side-left" />
 
-    <h2 id="games">Games</h2>
-    {#each projects as project}
-    {#if project.type == "game"}
-    {@render projectSummary({ project: project })}
-    {/if}
-    {/each}
-    <h2 id="hardware">Hardware</h2>
-    {#each projects as project}
-    {#if project.type == "hardware"}
-    {@render projectSummary({ project: project })}
-    {/if}
-    {/each}
-    <h2 id="apps">Apps</h2>
-    {#each projects as project}
-    {#if project.type == "app"}
-    {@render projectSummary({ project: project })}
-    {/if}
-    {/each}
-    <h2 id="music">Music</h2>
-    {#each projects as project}
-    {#if project.type == "music"}
-    {@render projectSummary({ project: project })}
-    {/if}
-    {/each}
-</Content>
+    <div slot="main">
+        <h2 id="games">Games</h2>
+        {#each projects as project}
+        {#if project.type == "game"}
+        {@render projectSummary({ project: project })}
+        {/if}
+        {/each}
+        <h2 id="hardware">Hardware</h2>
+        {#each projects as project}
+        {#if project.type == "hardware"}
+        {@render projectSummary({ project: project })}
+        {/if}
+        {/each}
+        <h2 id="apps">Apps</h2>
+        {#each projects as project}
+        {#if project.type == "app"}
+        {@render projectSummary({ project: project })}
+        {/if}
+        {/each}
+        <h2 id="music">Music</h2>
+        {#each projects as project}
+        {#if project.type == "music"}
+        {@render projectSummary({ project: project })}
+        {/if}
+        {/each}
+    </div>
+</ContentSidebar>
 
 {#snippet projectSummary({
     project