[PLAY-1000] Collapsible Nav in Website Sidebar

playbook-website/app/javascript/components/MainSidebar/index.tsx

@@ -1,54 +1,135 @@
-import React from "react";
-import { Nav, NavItem } from "playbook-ui";
+import React, {useState, useEffect} from "react";
+import { Nav, NavItem, useCollapsible } from "playbook-ui";
 import { linkFormat } from "../../utilities/website_sidebar_helper";
 
 const MainSidebar = ({ dark, type, category, kit, kits }) => {
-  return (
-    <>
-      <Nav
-        dark={dark}
-        link={`/kits${type ? `?type=${type}` : ""}`}
-        paddingY="sm"
-        title="Kits"
-        variant="subtle"
-      >
-        {kits.map((link, i) =>
-          typeof link === "object" ? (
-            <div key={`${Object.keys(link)[0]}-${i}`} className="category_section">
-              <NavItem
-                active={category === Object.keys(link)[0]}
-                className="category"
-                dark={dark}
-                iconRight="angle-down"
-                key={`${Object.keys(link)[0]}-${i}`}
-                link={`/kit_category/${Object.keys(link)}?type=${type}`}
-                text={linkFormat(Object.keys(link))}
-              />
-
-              {link[Object.keys(link)[0]].map((sublink, i) => (
-                <NavItem
-                  active={kit === sublink}
-                  dark={dark}
-                  key={`${sublink}-${i}`}
-                  marginLeft="xl"
-                  link={`/kits/${sublink}/${type}`}
-                  text={linkFormat(sublink)}
-                />
-              ))}
-            </div>
-          ) : (
+  //hook into collapsible logic for all nested nav items
+  const collapsibles = kits.map(() => useCollapsible());
+
+  const currentURL = window.location.pathname + window.location.search;
+
+  //set up custom toggling
+  const handleMainClick = (index) => {
+    collapsibles.forEach(([, , setCollapsed], idx) => {
+      if (idx === index) {
+        setCollapsed(false);
+      } else {
+        setCollapsed(true);
+      }
+    });
+    return true
+  };
+
+
+  const renderNavItem = (link, i) => {
+    const [collapsed] = collapsibles[i];
+
+    const generateLink = (categoryKey, sublink, type) => {    
+      if (sublink) {
+        const link = `/kits/${sublink}/${type}`;
+        return currentURL === link ? "" : link;
+      } else {
+        const link = `/kit_category/${categoryKey}?type=${type}`;
+        return currentURL === link ? "" : link;
+      }
+    };
+
+    if (typeof link === "object") {
+      //useState for handling collapsed state
+      const [toggleNav, setToggleNav] = useState(false);
+      //useEffect to handle toggle to consolidate logic
+      useEffect(() => {
+        setToggleNav(isActiveCategory || hasActiveSublink ? false : collapsed);
+      }, [collapsed]);
+
+      //click event for right icon
+      const handleIconClick = (index) => {
+        collapsibles.forEach(([, ,], idx) => {
+          if (idx === index) {
+            toggleNav === true ? setToggleNav(false) : setToggleNav(true)
+          }
+        });
+      };
+
+      const categoryKey = Object.keys(link)[0];
+      const sublinks = link[categoryKey];
+      const isActiveCategory = category === categoryKey;
+
+      const hasActiveSublink = link[Object.keys(link)[0]].some(
+        (sublink) => sublink === kit
+      );
+      return (
+        <NavItem
+          active={isActiveCategory}
+          collapsed={toggleNav}
+          collapsible
+          collapsibleTrail
+          cursor="pointer"
+          dark={dark}
+          fontSize="small"
+          iconRight={["plus", "minus"]}
+          key={`${categoryKey}-${i}`}
+          link={generateLink(categoryKey, null, type)}
+          marginBottom="none"
+          marginTop="xxs"
+          onClick={() => handleMainClick(i)}
+          onIconRightClick={() => handleIconClick(i)}
+          paddingY="xxs"
+          text={linkFormat(categoryKey)}
+        >
+          {sublinks.map((sublink, j) => (
             <NavItem
-              active={kit === link}
-              className="category"
+              active={kit === sublink}
+              cursor="pointer"
               dark={dark}
-              key={`${link}-${i}`}
-              text={linkFormat(link)}
-              link={`/kits/${link}?type=${type}`}
+              fontSize="small"
+              key={`${sublink}-${j}`}
+              link={generateLink(categoryKey, sublink, type)}
+              marginY="none"
+              paddingY="xxs"
+              text={linkFormat(sublink)}
             />
-          )
-        )}
-      </Nav>
-    </>
+          ))}
+        </NavItem>
+      );
+    } else {
+      return (
+        <NavItem
+          active={kit === link}
+          cursor="pointer"
+          dark={dark}
+          fontSize="small"
+          key={`${link}-${i}`}
+          link={generateLink(null, link, type)}
+          marginBottom="none"
+          marginTop="xxs"
+          text={linkFormat(link)}
+          paddingY="xxs"
+        />
+      );
+    }
+  };
+
+  return (
+    <Nav dark={dark} variant="bold" paddingTop="xxs">
+      <NavItem
+        collapsed={false}
+        collapsible
+        collapsibleTrail
+        cursor="pointer"
+        dark={dark}
+        fontSize="small"
+        fontWeight="bolder"
+        iconRight={["plus", "minus"]}
+        key="top-nav-item"
+        link={currentURL === `/kits${type ? `?type=${type}` : ""}` ? "" : `/kits${type ? `?type=${type}` : ""}`}
+        marginY="none"
+        paddingY="xxs"
+        text="Components"
+      >
+        {kits.map((link, i) => renderNavItem(link, i))}
+      </NavItem>
+    </Nav>
   );
 };
 

playbook-website/app/javascript/site_styles/_site-style.scss

@@ -194,18 +194,6 @@ body {
   &--sideNav {
     height: calc(100vh - 89px);
     overflow: auto;
-    .category_section {
-      &.active {
-        padding: $space_xs 0;
-        background: $bg_light;
-      }
-      .sub_category {
-        padding-left: $space_md;
-      }
-    }
-    &[class*=dark]{
-      border-color: $border_dark;
-    }
     .mobile-sidebar-pages {
       display: none;
     }

playbook/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -99,8 +99,12 @@ const CollapsibleMain = ({
   const mainSpacing = globalProps(props, { cursor })
 
   const handleCollapsibleClick = () => {
+    onClick && onClick();
+    //To disable default toggling behavior return "true" in the onClick()
+    const disableToggle = onClick && onClick();
+    if (disableToggle !== true) {
     toggle();
-    onClick && onClick()
+    }
   }
 
   return (