From d49c135c719dc7081ef6211456e92b3cd5fe2021 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Tue, 29 Aug 2023 09:05:04 +0800
Subject: [PATCH] Adjust sidebar ToC style

---
 css/style-toc.css | 12 ++++++++++++
 js/toc.js         | 16 +++++++---------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/css/style-toc.css b/css/style-toc.css
index c6d4d213..df889dad 100644
--- a/css/style-toc.css
+++ b/css/style-toc.css
@@ -1,3 +1,4 @@
+/* Article Table of Contents */
 .toc {
     background-color: var(--clr-quote-bg);
     max-width: max-content;
@@ -38,6 +39,11 @@
     font-size: 1rem;
 }
 
+/* Sidebar Table of Contents */
+.left-sidebar {
+    display: none;
+}
+
 .sidebar__toc {
     position: sticky;
     top: 5rem;
@@ -63,4 +69,10 @@
     padding-top: 0.5em;
     padding-left: 1.25rem;
     list-style-type: disc;
+}
+
+@media only screen and (min-width: 43.75rem) {
+    .left-sidebar {
+        display: flex;
+    }
 }
\ No newline at end of file
diff --git a/js/toc.js b/js/toc.js
index 4405714c..eb7dada7 100644
--- a/js/toc.js
+++ b/js/toc.js
@@ -60,20 +60,18 @@ window.addEventListener('DOMContentLoaded', (event) => {
     const windowWidth = window.innerWidth;
     if (windowWidth < 480) {
         toc.removeAttribute('open');
-        leftSidebar.classList.add('hidden');
     } else {
         toc.setAttribute('open', true);
-        leftSidebar.classList.remove('hidden');
     }
 
-    // Don't make the sidebar ToC sticky if it is larger than screen height
+    // Hide the left sidebar if the ToC is larger than screen height
     function preventSidebarOverflow() {
-        if (
-            document.documentElement.clientHeight <
-            tocSidebar.offsetHeight + 50
-        ) {
-            tocSidebar.style.marginTop = "0";
-            tocSidebar.style.position = "static";
+        if (document.documentElement.clientHeight < tocSidebar.offsetHeight + 50) {
+            // tocSidebar.style.marginTop = "0";
+            // tocSidebar.style.position = "static";
+            leftSidebar.style.display = "none";
+        } else {
+            leftSidebar.style.display = "flex";
         }
     }
     preventSidebarOverflow();