From fbc119f1c46a30edf52ffecce4c33969c3b0f1e6 Mon Sep 17 00:00:00 2001
From: Vidit Kushwaha <120644015+Vidit-Kushwaha@users.noreply.github.com>
Date: Sun, 24 Nov 2024 18:01:46 +0000
Subject: [PATCH] Add dropdown for component category in the sidebar

Signed-off-by: Vidit Kushwaha <120644015+Vidit-Kushwaha@users.noreply.github.com>
---
 src/components/SistentNavigation/index.js     | 41 +++++++++++++++----
 src/components/SistentNavigation/toc.style.js |  6 +--
 .../Projects/Sistent/components/index.js      |  2 +-
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/components/SistentNavigation/index.js b/src/components/SistentNavigation/index.js
index 8ee22aa50654..549e3012520b 100644
--- a/src/components/SistentNavigation/index.js
+++ b/src/components/SistentNavigation/index.js
@@ -3,6 +3,7 @@ import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevron
 import { Link } from "gatsby";
 import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
 import { IoIosArrowDropdownCircle } from "@react-icons/all-files/io/IoIosArrowDropdownCircle";
+import { componentsData } from "../../sections/Projects/Sistent/components";
 
 import TOCWrapper from "./toc.style";
 import { IoIosArrowDown } from "@react-icons/all-files/io/IoIosArrowDown";
@@ -16,6 +17,9 @@ const TOC = () => {
   const [expandIdenity, setExpandIdentity] = useState(
     location.pathname.includes("/identity")
   );
+  const [expandComponent, setExpandComponent] = useState(
+    location.pathname.includes("/components")
+  );
 
   return (
     <TOCWrapper>
@@ -114,13 +118,36 @@ const TOC = () => {
             </div>
           </li>
           <li>
-            <Link
-              to="/projects/sistent/components"
-              activeClassName="active"
-              className="toc-sub-heading toc-sub-inline"
-            >
-              Components
-            </Link>
+            <div>
+              <li
+                className="toc-sub-heading components"
+                onClick={() => setExpandComponent((prev) => !prev)}
+              >
+                Components
+                {expandComponent ? <IoIosArrowUp /> : <IoIosArrowDown />}
+              </li>
+              {expandComponent && (
+                <div className="components-sublinks">
+                  <li>
+                    {componentsData.map((component) => (
+                      <li key={component.id}>
+                        <Link
+                          to={component.url}
+                          className={`toc-sub-heading toc-sub-inline components-item ${
+                            location.pathname.includes(component.url)
+                              ? "active"
+                              : ""
+                          }`}
+                          activeClassName="active"
+                        >
+                          {component.name}
+                        </Link>
+                      </li>
+                    ))}
+                  </li>
+                </div>
+              )}
+            </div>
           </li>
         </ul>
       </div>
diff --git a/src/components/SistentNavigation/toc.style.js b/src/components/SistentNavigation/toc.style.js
index e2698f350cea..b3763fa1ee6d 100644
--- a/src/components/SistentNavigation/toc.style.js
+++ b/src/components/SistentNavigation/toc.style.js
@@ -125,7 +125,7 @@ const TOCWrapper = styled.div`
     background-color: transparent;
   }
 
-  .identity {
+  .identity, .components {
     display: flex;
     width: 100%;
     justify-content: space-between;
@@ -138,10 +138,10 @@ const TOCWrapper = styled.div`
     }
   }
 
-  .identity-sublinks {
+  .identity-sublinks, .components-sublinks {
     padding-left: 0.56rem;
 
-    .identity-item {
+    .identity-item, .components-item {
       font-size: 1.05rem;
       margin-top: 0.45rem;
     }
diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js
index f45d68fff438..ddfc9e959c4a 100644
--- a/src/sections/Projects/Sistent/components/index.js
+++ b/src/sections/Projects/Sistent/components/index.js
@@ -8,7 +8,7 @@ import useDataList from "../../../../utils/usedataList";
 import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import { Link } from "gatsby";
 
-const componentsData = [
+export const componentsData = [
   {
     id: 1,
     name: "Button",