From b4c79af0f20c6fe3f0055dae0b44303db8c1e60b Mon Sep 17 00:00:00 2001
From: Sergii Kirianov <s.kirianov@gmail.com>
Date: Wed, 3 May 2023 19:22:37 +0200
Subject: [PATCH] docs: fixed sidebar issue: made sidebar full height, fixed
 double scroll with toggle body overflow on and off

---
 app/components/Docs.tsx | 15 ++++++++++++---
 app/styles/app.css      |  4 ----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/components/Docs.tsx b/app/components/Docs.tsx
index d6a2819e..72870bf8 100644
--- a/app/components/Docs.tsx
+++ b/app/components/Docs.tsx
@@ -50,7 +50,6 @@ export function Docs({
   v2?: boolean
 }) {
   const matches = useMatches()
-  console.log(matches)
   const lastMatch = last(matches)
 
   const detailsRef = React.useRef<HTMLElement>(null!)
@@ -70,6 +69,15 @@ export function Docs({
   const index = flatMenu.findIndex((d) => d.to === relativePathname)
   const prevItem = flatMenu[index - 1]
   const nextItem = flatMenu[index + 1]
+  
+  document.body.style.overflow = 'visible'
+  const toggleBodyOverflow = () => {
+    if (detailsRef.current?.hasAttribute('open')) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = 'visible'
+    }
+  }
 
   const menuItems = config.menu.map((group, i) => {
     return (
@@ -147,6 +155,7 @@ export function Docs({
         ref={detailsRef as any}
         id="docs-details"
         className="border-b border-gray-500 border-opacity-20"
+        onToggle={toggleBodyOverflow}
       >
         <summary className="p-4 flex gap-2 items-center justify-between">
           <div className="flex gap-2 items-center text-xl md:text-2xl">
@@ -157,9 +166,9 @@ export function Docs({
           <Search {...config.docSearch} />
         </summary>
         <div
-          className="flex flex-col gap-4 p-4 whitespace-nowrap h-[0vh] overflow-y-auto
+          className="flex flex-col gap-4 p-4 whitespace-nowrap
           border-t border-gray-500 border-opacity-20 bg-gray-100 text-lg
-          dark:bg-gray-900"
+          dark:bg-gray-900 h-[100vh] overflow-y-auto pb-24"
         >
           <div className="flex gap-4">
             {framework?.selected ? (
diff --git a/app/styles/app.css b/app/styles/app.css
index 311632f6..0130c0b6 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -83,10 +83,6 @@
     display: none;
   }
 
-  #docs-details[open] > summary + * {
-    height: 80vh;
-  }
-
   .anchor-heading {
     text-decoration: none !important;
   }