Attempt to fix Sidebar Issues #120 item 2 - problem with scroll eleme…

…nt hiding new popouts for large menu
USACE · Oct 17, 2024 · 4aa26b4 · 4aa26b4
1 parent 737bec0
commit 4aa26b4
Show file tree

Hide file tree

Showing 3 changed files with 375 additions and 18 deletions.
diff --git a/lib/composite/sidebar/index.jsx b/lib/composite/sidebar/index.jsx
@@ -1,4 +1,6 @@
-import { UsaceBox, PopoutMenu } from "../../../lib";
+import { UsaceBox, PopoutMenu } from "../..";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
+import clsx from "clsx";
 import { VscChevronRight } from "react-icons/vsc";
 import { useIsMobile } from "../../hooks/useIsMobile";
 import Dropdown from "../../components/form/dropdown";
@@ -28,6 +30,29 @@ function renderPopoutMenu(
     level < MAX_NESTING_LEVEL - 1
   ) {
     return (
+      // <Menu>
+      //   <MenuButton>
+      //     {({ active }) => (
+      //       <button className={clsx(active && "bg-blue-200")}>
+      //         {link.text}
+      //       </button>
+      //     )}
+      //   </MenuButton>
+      //   <MenuItems anchor="bottom">
+      //     {/* {links.map((link) => ( */}
+      //     <MenuItem key={link.href}>
+      //       {({ focus }) => (
+      //         <a
+      //           className={clsx("block", focus && "bg-blue-100")}
+      //           href={link.href}
+      //         >
+      //           {link.label}
+      //         </a>
+      //       )}
+      //     </MenuItem>
+      //     {/* ))} */}
+      //   </MenuItems>
+      // </Menu>
       <div
         key={link.id}
         className="gw-py-1 gw-border-b-[1px]  hover:gw-bg-gray-100"

diff --git a/src/app-pages/documentation/_docs-page.jsx b/src/app-pages/documentation/_docs-page.jsx
@@ -22,9 +22,6 @@ function DocsPage({ breadcrumbs = [], children }) {
             title="Contents"
             selectedPath={hash}
             sidebarLinks={sidebarLinks}
-            onChange={(e) => {
-              doUpdateHash(e.target.value);
-            }}
           />
         </div>
         <div className="gw-col-span-12 md:gw-col-span-10">{children}</div>