feat: create dropdown for docs sidebar (#2328)

Co-authored-by: Lukasz Gornicki <[email protected]>
asyncapi · Dec 19, 2023 · 9dea5f7 · 9dea5f7
1 parent ac21613
commit 9dea5f7
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 17 deletions.
diff --git a/components/icons/DocsArrow.js b/components/icons/DocsArrow.js
@@ -0,0 +1,7 @@
+export default function DocsArrow({ isDropDown, activeDropDownItem, onClick, className }) {
+    return (
+        <div className={`w-6 my-auto p-2 rounded-md cursor-pointer ${isDropDown && 'hover:bg-gray-100'}`} onClick={isDropDown ? onClick : () => { }}>
+          {isDropDown && <img src='/img/illustrations/icons/arrow.svg' className={`transition-transform w-fit m-auto duration-200 transform ${className} ${activeDropDownItem ? 'rotate-90' : ''}`} />}
+        </div>
+      );
+}
diff --git a/components/layout/DocsLayout.js b/components/layout/DocsLayout.js
@@ -89,7 +89,7 @@ export default function DocsLayout({ post, navItems = {}, children }) {
             className="hidden lg:flex lg:flex-shrink-0"
             data-testid="DocsLayout-main"
           >
-            <div className="flex flex-col w-64 border-r border-gray-200 bg-white py-2">
+            <div className="flex flex-col w-72 border-r border-gray-200 bg-white py-2">
               <div className="flex-1 flex flex-col md:overflow-y-auto md:sticky md:top-20 md:max-h-(screen-14)">
                 <SearchButton
                   className="mt-8 mb-4 mr-2 flex items-center text-left text-sm space-x-3 px-3 py-1.5 bg-white hover:bg-secondary-100 border-gray-300 hover:border-secondary-500 border text-gray-700 hover:text-secondary-500 shadow-sm transition-all duration-500 ease-in-out rounded-md"

diff --git a/components/navigation/DocsNav.js b/components/navigation/DocsNav.js
@@ -1,8 +1,12 @@
+import React, { useState, useEffect } from 'react';
 import DocsNavItem from './DocsNavItem';
 import IconHome from '../icons/Home';
+import SubCategoryDocsNav from './SubCategoryDocsNav';
+import DocsArrow from '../icons/DocsArrow';
 
 import { buckets } from '../data/buckets';
 
+
 const serializedBuckets = buckets.reduce((acc, bucket) => {
   acc[bucket.name] = {
     ...bucket,
@@ -19,28 +23,35 @@ const serializedBuckets = buckets.reduce((acc, bucket) => {
 export default function DocsNav({
   item,
   active,
-  onClick = () => {},
+  onClick = () => { },
 }) {
   const subCategories = item.children;
   const bucket = serializedBuckets[item.item.rootSectionId];
 
+  const [openSubCategory, setOpenSubCategory] = useState(active.startsWith(item.item.slug));
+
+  const onClickHandler = () => {
+    setOpenSubCategory(!openSubCategory);
+    onClick();
+  }
+
+  useEffect(() => {
+    setOpenSubCategory(active.startsWith(item.item.slug));
+  }, [active])
+
   return (
     <li className='mb-4' key={item.item.title} data-testid="DocsNav-item">
-      <DocsNavItem {...item.item} activeSlug={active} defaultClassName='font-body text-sm text-black hover:font-semibold' inactiveClassName='font-regular' activeClassName='font-semibold' bucket={bucket} onClick={onClick} />
-      <ul className='border-l border-gray-200 pl-4 ml-3 mt-1'>
-        {Object.values(subCategories).map((subCategory) => (
-          <li key={subCategory.item.title}  data-testid="DocsNav-subitem">
-            <DocsNavItem {...subCategory.item} activeSlug={active} defaultClassName={`font-body text-sm text-black leading-8 ${subCategory.children ? 'hover:font-semibold' : 'hover:text-secondary-600'}`} inactiveClassName='font-regular' activeClassName={subCategory.children ? 'font-semibold' : 'text-secondary-600'} onClick={onClick} />
-            <ul className='border-l border-gray-200 pl-4'>
-              {subCategory.children && subCategory.children.map(subItem => (
-                <li key={subItem.title}>
-                  <DocsNavItem {...subItem} activeSlug={active} defaultClassName='font-body text-sm text-gray-700 leading-7 hover:text-secondary-600' inactiveClassName='font-regular' activeClassName='text-secondary-600' onClick={onClick} />
-                </li>
-              ))}
-            </ul>
-          </li>
-        ))}
-      </ul>
+      <div className='flex gap-2'>
+        <DocsArrow isDropDown={Object.values(subCategories).length > 0} activeDropDownItem={openSubCategory} onClick={() => setOpenSubCategory(!openSubCategory)} />
+        <DocsNavItem {...item.item} activeSlug={active} defaultClassName='font-body text-sm text-black hover:font-semibold' inactiveClassName='font-regular' activeClassName='font-semibold' bucket={bucket} onClick={onClickHandler} />
+      </div>
+      {openSubCategory && (
+        <ul className='border-l border-gray-200 pl-4 ml-3 mt-1'>
+          {Object.values(subCategories).map((subCategory) => (
+            <SubCategoryDocsNav key={subCategory.item.title} subCategory={subCategory} activeItem={active} onClick={onClick} />
+          ))}
+        </ul>
+      )}
     </li>
   );
 }
diff --git a/components/navigation/SubCategoryDocsNav.js b/components/navigation/SubCategoryDocsNav.js
@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+import DocsNavItem from "./DocsNavItem";
+import DocsArrow from "../icons/DocsArrow";
+
+export default function SubCategoryDocsNav({ subCategory, activeItem, onClick }) {
+    const [openSubCategoryChildren, setOpenSubCategoryChildren] = useState(activeItem.startsWith(subCategory.item.slug));
+
+    const onClickHandler = () => {
+      setOpenSubCategoryChildren(!openSubCategoryChildren);
+      onClick();
+    }
+
+    useEffect(() => {
+      setOpenSubCategoryChildren(activeItem.startsWith(subCategory.item.slug));
+    }, [activeItem])
+
+    return (
+      <li key={subCategory.item.title} data-testid="DocsNav-subitem">
+        <div className='flex gap-2'>
+          <DocsArrow isDropDown={subCategory.children} activeDropDownItem={openSubCategoryChildren} onClick={() => setOpenSubCategoryChildren(!openSubCategoryChildren)} />
+          <DocsNavItem {...subCategory.item} activeSlug={activeItem} defaultClassName={`font-body text-sm text-black leading-8 ${subCategory.children ? 'hover:font-semibold' : 'hover:text-secondary-600'}`} inactiveClassName='font-regular' activeClassName={subCategory.children ? 'font-semibold' : 'text-secondary-600'} onClick={onClickHandler} />
+        </div>
+        {openSubCategoryChildren && (
+          <ul className='border-l ml-8 border-gray-200 pl-4'>
+            {subCategory.children && subCategory.children.map(subItem => (
+              <li key={subItem.title}>
+                <DocsNavItem {...subItem} activeSlug={activeItem} defaultClassName='font-body text-sm text-gray-700 leading-7 hover:text-secondary-600' inactiveClassName='font-regular' activeClassName='text-secondary-600' onClick={onClick} />
+              </li>
+            ))}
+          </ul>
+        )}
+      </li>
+    )
+}