FIXED SIDEBAR SCROLL ISSUE!

src/App.css

@@ -20,12 +20,14 @@
     unicode-range: U+0600-06FF;
 } */
 
-.ais-SearchBox { margin: 1em 0; }
+.ais-SearchBox {
+    margin: 1em 0;
+}
 
 .table-of-contents {
     padding-top: 1rem;
     position: sticky !important;
-    top: 1rem;
+    top: 4rem;
     height: calc(100vh - 2rem);
     overflow-y: auto;
 }
@@ -34,12 +36,15 @@
     text-decoration: none;
     color: #21252A;
 }
+
 .heading-link:hover {
     color: #21252A;
 }
+
 .heading-link:active {
     color: #21252A;
 }
+
 .heading-link:visited {
     color: #21252A;
 }
@@ -67,19 +72,30 @@
 }
 
 @media (min-width: 821px) {
-    .sticky-on-big {
+    header {
         position: sticky;
         top: 0;
+        z-index: 9999999;
     }
+
+    .sticky-on-big {
+        position: fixed;
+        top: 65px;
+        bottom: 0;
+        overflow-y: scroll;
+    }
+
 }
 
 @media (max-width: 820px) {
     .main-row {
         height: calc(100vh - 62px);
     }
+
     .header-title {
         margin-left: 3.5rem;
     }
+
     .side-nav-btn {
         display: block;
         position: fixed;
@@ -87,9 +103,11 @@
         background: white;
         margin-left: 0.25rem;
     }
+
     aside {
         overflow-x: hidden;
     }
+
     .side-nav {
         display: block;
         min-width: 15rem;
@@ -101,10 +119,12 @@
         z-index: 99999;
         transition: all 0.25s linear;
     }
+
     .side-nav-closed {
         transform: translate(-100%);
-        -webkit-transform: translate(-100%); 
+        -webkit-transform: translate(-100%);
     }
+
     .overlay {
         display: block;
         position: fixed;
@@ -118,6 +138,7 @@
         /* animate the transition */
         transition: all 0.2s ease-in-out;
     }
+
     .overlay-showing {
         z-index: 99998;
         top: 0;
@@ -164,7 +185,7 @@
 }
 
 .side-nav-item-selected {
-    background-color: rgb(25,101,189, 0.3);
+    background-color: rgb(25, 101, 189, 0.3);
 }
 
 .side-nav-item-secondary {
@@ -186,6 +207,7 @@
     color: inherit;
     font-weight: bold;
 }
+
 .copyright a:hover {
     color: inherit;
     font-weight: bold;

src/components/Sidebar.jsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import classNames from "classnames";
 import SmoothCollapse from "react-smooth-collapse";
@@ -19,17 +19,31 @@ function Sidebar({ content, navOpen, setNavOpen, pathname }) {
     ));
     const openSectionHeading = openSection ? openSection.heading : "";
     const [sectionOpen, setSectionOpen] = useState(openSectionHeading);
+    const [sidebarWidth, setSidebarWidth] = useState(200);
+    useEffect(() => {
+        const s = document.getElementById("sidebar");
+        if (s) {
+            setSidebarWidth(s.offsetWidth);
+        }
+        window.addEventListener("resize", () => {
+            const s = document.getElementById("sidebar");
+            if (s) {
+                setSidebarWidth(s.offsetWidth);
+            }
+        });
+    }, []);
     function handleHeadingClick(h) {
         setSectionOpen(h === sectionOpen ? "" : h);
     }
     return (
         <>
             <aside
+                id="sidebar"
                 className={classNames(
                 "side-nav col-3 col-lg-2 p-0 bg-light",
                 { "side-nav-closed": !navOpen }
             )}>
-                <nav className="sticky-on-big flex-column align-items-start">
+                <nav className="sticky-on-big flex-column align-items-start" style={{ width: `${sidebarWidth}px` }}>
                         <Link to="/table-of-contents" style={{ textDecoration: "none", color: "inherit" }} onClick={() => setNavOpen(false)}>
                             <div className={classNames(
                                 "side-nav-item",