Adjust sidebar ToC style

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;
@@ -64,3 +70,9 @@
     padding-left: 1.25rem;
     list-style-type: disc;
 }
+
+@media only screen and (min-width: 43.75rem) {
+    .left-sidebar {
+        display: flex;
+    }
+}

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();