auto expand sidebar

PankratzLab · Jan 3, 2024 · dfde823 · dfde823
1 parent b61a9da
commit dfde823
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 9 deletions.
diff --git a/src/assets/pages/documentation/Sidebar.jsx b/src/assets/pages/documentation/Sidebar.jsx
@@ -3,7 +3,6 @@ import SidebarItem from "./SidebarItem";
 import SidebarCollapseContainer from "./SidebarCollapseContainer";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
 import { motion, useAnimation } from "framer-motion";
-import { useNavigate } from "react-router-dom";
 
 export let firstItem;
 
@@ -17,7 +16,6 @@ export default function Sidebar() {
       return (
         <SidebarCollapseContainer
           key={index}
-          handleSidebarItems={handleSidebarItems}
           keys={keys}
           values={values}
         />
@@ -27,11 +25,11 @@ export default function Sidebar() {
   };
 
   const [items, setItems] = useState();
-  const navigate = useNavigate();
   useEffect(() => {
     (async function fetchData() {
       const data = await fetch(`/docs/toc.json`);
       const res = await data.json();
+      console.log(res)
       const itemArr = res.map((e, i) => {
         return handleSidebarItems(e, i);
       });

diff --git a/src/assets/pages/documentation/SidebarCollapseContainer.jsx b/src/assets/pages/documentation/SidebarCollapseContainer.jsx
@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { useAnimate } from "framer-motion";
+import SidebarItem from "./SidebarItem";
 
-export default function SidebarCollapseContainer({ handleSidebarItems, keys, values }) {
+export default function SidebarCollapseContainer({ keys, values, setParentCollapse }) {
   const [isCollapsed, setIsCollapsed] = useState(true);
   const [scope, animate] = useAnimate();
 
   useEffect(() => {
+    if (!!setParentCollapse) setParentCollapse(isCollapsed)
     animate(scope.current, isCollapsed ? { height: 0 } : { height: "auto" });
   }, [isCollapsed]);
 
@@ -38,7 +40,26 @@ export default function SidebarCollapseContainer({ handleSidebarItems, keys, val
       </div>
       <div ref={scope} className="nested-group">
         {values.map((e, index) => {
-          return handleSidebarItems(e, index);
+          if (typeof Object.values(e)[0] === "object") {
+            return (
+              <SidebarCollapseContainer
+                key={index}
+                keys={Object.keys(e)[0]}
+                values={Object.values(e)[0]}
+                setParentCollapse={setIsCollapsed}
+              />
+            );
+          } else {
+            return (
+              <SidebarItem
+                key={index}
+                keys={Object.keys(e)[0]}
+                values={Object.values(e)[0]}
+                isCollapsed={isCollapsed}
+                setIsCollapsed={setIsCollapsed}
+              />
+            );
+          }
         })}
       </div>
     </div>

diff --git a/src/assets/pages/documentation/SidebarItem.jsx b/src/assets/pages/documentation/SidebarItem.jsx
@@ -1,14 +1,21 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { useParams } from "react-router-dom";
+import { useEffect } from "react";
 
-export default function SidebarItem({ keys, values }) {
+export default function SidebarItem({ keys, values, isCollapsed, setIsCollapsed }) {
   const { id } = useParams();
+
+  const isActive = values?.replaceAll("/", "--").slice(0, -3) === id;
+  useEffect(() => {
+    if (isCollapsed === undefined) return
+    if (!isCollapsed || !isActive) return
+    setIsCollapsed(!isActive);
+  }, []);
+
   return (
     <Link
-      className={
-        `item` + (values.replaceAll("/", "--").slice(0, -3) === id ? " item-active" : "")
-      }
+      className={`item ` + (isActive ? "item-active" : "")}
       to={`/documentation/${values?.slice(0, -3).replaceAll("/", "--")}`}
     >
       <div>{keys}</div>