From 0753345bba184eb41bf5020482181ecfd8e1266c Mon Sep 17 00:00:00 2001
From: thiloho <123883702+thiloho@users.noreply.github.com>
Date: Sun, 25 Aug 2024 19:32:57 +0200
Subject: [PATCH] Display table of contents on right side

---
 web-app/src/lib/utils.ts                |  8 +++++---
 web-app/template-styles/blog-styles.css | 24 ++++++++++++++++++------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/web-app/src/lib/utils.ts b/web-app/src/lib/utils.ts
index 41107cb..2806746 100644
--- a/web-app/src/lib/utils.ts
+++ b/web-app/src/lib/utils.ts
@@ -124,10 +124,12 @@ const createMarkdownParser = (showToc = true) => {
             }
 
             tableOfContents = `
-              <details class="table-of-contents">
-                <summary>Table of contents</summary>
+              <section id="table-of-contents">
+                <h2>
+                  <a href="#table-of-contents">Table of contents</a>
+                </h2>
                 ${tocItems.join("")}
-              </details>
+              </section>
             `;
           }
 
diff --git a/web-app/template-styles/blog-styles.css b/web-app/template-styles/blog-styles.css
index dc12fd0..9fa3108 100644
--- a/web-app/template-styles/blog-styles.css
+++ b/web-app/template-styles/blog-styles.css
@@ -34,10 +34,10 @@ footer {
 }
 
 .articles ul {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   list-style: none;
   gap: var(--space-s);
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30ch), 1fr));
 }
 
 .articles li {
@@ -48,10 +48,22 @@ footer {
   gap: var(--space-xs);
 }
 
-.table-of-contents {
-  margin-block-end: var(--space-s);
-}
-
 section {
   scroll-margin-block-start: var(--space-xl);
 }
+
+@media (min-width: 1525px) {
+  #table-of-contents {
+    position: fixed;
+    inset-inline-start: calc(50% + 37.5ch + var(--space-m));
+    inset-block-start: calc(var(--space-xl) + var(--space-s));
+    max-inline-size: 35ch;
+    padding: var(--space-s);
+    background-color: var(--bg-primary);
+    border: var(--border-primary);
+  }
+
+  #table-of-contents + section {
+    margin-block-start: 0;
+  }
+}