Fix recursive display for items

clari182 · Oct 28, 2024 · 354cb38 · 354cb38
1 parent c9e6f1b
commit 354cb38
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 41 deletions.
diff --git a/site/gatsby-site/src/components/sidebar/index.js b/site/gatsby-site/src/components/sidebar/index.js
@@ -43,6 +43,23 @@ const Sidebar = ({ defaultCollapsed = false, location = null, setNavCollapsed })
                                 url
                               }
                               path
+                              items {
+                                item {
+                                  document {
+                                    ... on PrismicSidebarItem {
+                                      id
+                                      data {
+                                        title
+                                        label
+                                        url {
+                                          url
+                                        }
+                                        path
+                                      }
+                                    }
+                                  }
+                                }
+                              }
                             }
                           }
                         }
@@ -58,31 +75,21 @@ const Sidebar = ({ defaultCollapsed = false, location = null, setNavCollapsed })
     }
   `);
 
-  let sidebarItems = [];
-
-  if (sidebar.data.items.length > 0) {
-    sidebarItems = sidebar.data.items.map((item) => {
-      item = item.item.document.data;
-      const itemItems = item.items.map((item) => {
-        item = item.item.document.data;
-        return {
-          url: item.url?.url || item.path || '/',
-          title: item.title,
-          label: item.label,
-          items: [],
-        };
-      });
-
-      return {
-        url: item.url.url || item.path || '/',
-        title: item.title,
-        label: item.label,
-        items: itemItems,
-      };
-    });
-  } else {
-    sidebarItems = navConfig;
-  }
+  const processItem = (item) => {
+    const { data } = item.item.document;
+
+    const children = data.items?.map(processItem) || [];
+
+    return {
+      url: data.url?.url || data.path || '/',
+      title: data.title,
+      label: data.label,
+      items: children,
+    };
+  };
+
+  const sidebarItems =
+    sidebar.data.items.length > 0 ? sidebar.data.items.map(processItem) : navConfig;
 
   const localizePath = useLocalizePath();
 

diff --git a/site/gatsby-site/src/components/sidebar/tree.js b/site/gatsby-site/src/components/sidebar/tree.js
@@ -12,12 +12,12 @@ const Tree = ({
   expandedNodes,
   toggleExpand,
 }) => {
-  const location = useLocation(); // Listen for location changes
+  const location = useLocation();
 
   const [currentLocation, setCurrentLocation] = React.useState('');
 
   React.useEffect(() => {
-    setCurrentLocation(location.pathname); // Update the current location on path change
+    setCurrentLocation(location.pathname);
   }, [location]);
 
   const subtreeNav = (subItems) => {
@@ -28,21 +28,11 @@ const Tree = ({
         currentLocation &&
         [localizedPath, `${localizedPath}/`].includes(localizePath({ path: currentLocation }));
 
-      let childVisit = false;
-
+      // Recursively process child items
       const children = item.items?.length > 0 ? subtreeNav(item.items) : [];
 
-      children.forEach((childItem) => {
-        if (
-          !childVisit &&
-          [
-            localizePath({ path: childItem.url }),
-            `${localizePath({ path: childItem.url })}/`,
-          ].includes(currentLocation)
-        ) {
-          childVisit = true;
-        }
-      });
+      // Check if any child has a "currentVisit" status to determine "childVisit"
+      const childVisit = children.some((child) => child.current || child.childVisit);
 
       return {
         ...item,

diff --git a/site/gatsby-site/src/components/sidebar/treeNode.js b/site/gatsby-site/src/components/sidebar/treeNode.js
@@ -96,7 +96,7 @@ const TreeNode = ({
 
       {/* Render children recursively */}
       {hasChildren && isExpanded && (
-        <ul className={`ml-${(level + 1) * 4} space-y-1`}>
+        <ul className={`ml-${(level + 1) * 4} space-y-1 mt-1`}>
           {item.items.map((childItem) => (
             <TreeNode
               key={childItem.url || childItem.path || childItem.title}

diff --git a/site/gatsby-site/tailwind.config.js b/site/gatsby-site/tailwind.config.js
@@ -32,6 +32,10 @@ let safelist = [
 for (let i = 0; i < 100; i++) {
   safelist.push(`pl-[${2 + (i || 0) * 1}rem`);
 }
+// TailwindCSS does not support dynamic classes like `mt-${i}` so we need to whitelist them manually
+for (let i = 0; i < 100; i++) {
+  safelist.push(`ml-${i}`, `mr-${i}`, `mt-${i}`, `mb-${i}`, `mx-${i}`, `my-${i}`, `m-${i}`);
+}
 
 const backfaceVisibility = plugin(function ({ addUtilities }) {
   addUtilities({