From db12b78e9db746103d05e2fc1bd5d56fee7d20f2 Mon Sep 17 00:00:00 2001
From: stevejpurves <steve@curvenote.com>
Date: Fri, 23 Aug 2024 11:08:18 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9C=20single=20scroll=20on=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Navigation/PrimarySidebar.tsx  | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/site/src/components/Navigation/PrimarySidebar.tsx b/packages/site/src/components/Navigation/PrimarySidebar.tsx
index 09f20a02..8da91689 100644
--- a/packages/site/src/components/Navigation/PrimarySidebar.tsx
+++ b/packages/site/src/components/Navigation/PrimarySidebar.tsx
@@ -160,7 +160,6 @@ export const PrimarySidebar = ({
           'xl:col-margin-left flex-col',
           'overflow-hidden',
           'py-6 gap-6',
-          // 'border-r border-stone-200 dark:border-stone-700',
           {
             flex: open,
             'bg-white dark:bg-stone-900': open, // just apply when open, so that theme can transition
@@ -169,23 +168,25 @@ export const PrimarySidebar = ({
           },
         )}
       >
-        {nav && (
-          <nav
-            aria-label="Navigation"
-            className="overflow-y-auto transition-opacity ml-3 xl:ml-0 mr-3 max-w-[350px] lg:hidden"
-          >
-            <SidebarNav nav={nav} />
-          </nav>
-        )}
-        {nav && headings && <div className="border-b-2 lg:hidden" />}
-        {headings && (
-          <nav
-            aria-label="Table of Contents"
-            className="flex-grow overflow-y-auto transition-opacity ml-3 xl:ml-0 mr-3 max-w-[350px]"
-          >
-            <Toc headings={headings} />
-          </nav>
-        )}
+        <div className="flex-grow space-y-6 overflow-y-auto">
+          {nav && (
+            <nav
+              aria-label="Navigation"
+              className="overflow-y-hidden transition-opacity ml-3 xl:ml-0 mr-3 max-w-[350px] lg:hidden"
+            >
+              <SidebarNav nav={nav} />
+            </nav>
+          )}
+          {nav && headings && <div className="border-b-2 lg:hidden" />}
+          {headings && (
+            <nav
+              aria-label="Table of Contents"
+              className="flex-grow overflow-y-hidden transition-opacity ml-3 xl:ml-0 mr-3 max-w-[350px]"
+            >
+              <Toc headings={headings} />
+            </nav>
+          )}
+        </div>
         {footer && (
           <div
             className="flex-none py-4 transition-all duration-700 translate-y-6 opacity-0"