From 446557a7b2ebf1649eee9cd2b71e93409c1b8127 Mon Sep 17 00:00:00 2001
From: Leilukin <contact@leilukin.com>
Date: Thu, 18 Apr 2024 12:12:22 +0800
Subject: [PATCH] Add scrollbar to table of contents if overflowed

---
 src/_includes/global/toc.njk | 32 ++++++++++----------------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/_includes/global/toc.njk b/src/_includes/global/toc.njk
index e5edbedd..73083d95 100644
--- a/src/_includes/global/toc.njk
+++ b/src/_includes/global/toc.njk
@@ -1,13 +1,20 @@
 <aside class="left-sidebar">
     <details class="toc__wrapper sidebar--sticky">
         <summary class="toc__heading">
-            Table of Contents
+            On This Page
         </summary>
         {{ content | toc | safe }}
     </details>
 </aside>
 
 <style>
+    .toc__wrapper {
+        max-height: 89vh;
+        overflow: auto;
+        background-color: var(--clr-content-bg);
+        padding: 1rem 1.3rem;
+    }
+
     .toc__heading {
         font-size: 1.3rem;
         font-weight: 700;
@@ -16,14 +23,14 @@
     }
 
     .toc ol,
-    .toc ol ol  {
+    .toc ol ol {
         display: grid;
         gap: 0.3em;
     }
 
     .toc ol {
         border-top: 0.1em solid var(--clr-title-border);
-        padding-left: 1.5em;
+        padding-left: 1.7em;
         padding-top: 1em;
     }
 
@@ -44,22 +51,3 @@
         font-size: 1rem;
     }
 </style>
-
-<script defer>
-    // Close article ToC accordion for small screen sizes
-    const tocWrapper = docucument.querySelector('.toc__wrapper');
-    if (window.innerWidth < 480) {
-        tocWrapper.removeAttribute("open");
-    } else {
-        tocWrapper.setAttribute("open", true);
-    }
-
-    // Remove the stickiness of the sidebar ToC if it is larger than screen height
-    function preventSidebarOverflow() {
-        if (document.documentElement.clientHeight < tocWrapper.offsetHeight + 50) {
-            tocWrapper.style.marginTop = "0";
-            tocWrapper.style.position = "static";
-        }
-    }
-    preventSidebarOverflow();
-</script>