accordion on sistent navigation

Signed-off-by: Lakshya Satpal <[email protected]>

src/components/SistentNavigation/index.js

@@ -4,12 +4,53 @@ import { Link } from "gatsby";
 import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
 import { IoIosArrowDropdownCircle } from "@react-icons/all-files/io/IoIosArrowDropdownCircle";
 
-import { content } from "./content";
+// import { content } from "./content";
 
-import TOCWrapper from "../handbook-navigation/toc.style";
+const content = [
+  { id: 0, link: "/projects/sistent/about", text: "About Sistent" },
+  {
+    id: 1,
+    link: "/projects/sistent/identity",
+    text: "Identity",
+    children: [
+      {
+        id: 1.1,
+        text: "Colors",
+        link: "/projects/sistent/identity/colors",
+      },
+      {
+        id: 1.2,
+        text: "Typography",
+        link: "/projects/sistent/identity/typography",
+      },
+      {
+        id: 1.3,
+        text: "Spacing",
+        link: "/projects/sistent/identity/spacing",
+      },
+    ],
+  },
+  { id: 2, link: "/projects/sistent/components", text: "Components" },
+];
+
+import TOCWrapper from "./toc.style";
+import {
+  Accordion,
+  AccordionBody,
+  AccordionItem,
+  AccordionTitle,
+  CloseIcon,
+  IconWrapper,
+  OpenIcon,
+} from "../../reusecore/Accordion";
+import { IoIosArrowUp } from "@react-icons/all-files/io/IoIosArrowUp";
+import { IoIosArrowDown } from "@react-icons/all-files/io/IoIosArrowDown";
 
 const TOC = () => {
   const [expand, setExpand] = useState(false);
+
+  const [expandIdenity, setExpandIdentity] = useState(false);
+
   return (
     <TOCWrapper>
       <div className="go-back">
@@ -37,18 +78,59 @@ const TOC = () => {
       </div>
       <div className="toc-list">
         <ul className={`toc-ul ${expand ? "toc-ul-open" : ""}`}>
-          {content.map((x) => (
-            <li key={x.id}>
-              <Link
-                to={x.link}
-                key={x.id}
-                className="toc-sub-heading toc-sub-inline"
-                activeClassName="active"
-              >
-                {x.text}
-              </Link>
-            </li>
-          ))}
+          <li>
+            <Link
+              to="/projects/sistent/about"
+              className="toc-sub-heading toc-sub-inline"
+              activeClassName="active"
+            >
+              About
+            </Link>
+          </li>
+          <li>
+            <p>
+              <Accordion allowMultipleExpanded={false} allowZeroExpanded={true}>
+                <AccordionItem className="toc-acc-item">
+                  <AccordionTitle>
+                    Identity
+                    <IconWrapper>
+                      <OpenIcon>
+                        <IoIosArrowDown color="white" />
+                      </OpenIcon>
+                      <CloseIcon>
+                        <IoIosArrowUp color="white" />
+                      </CloseIcon>
+                    </IconWrapper>
+                  </AccordionTitle>
+                  <AccordionBody>
+                    <Link
+                      to="/projects/sistent/identity/color"
+                      activeClassName="active"
+                      className="toc-sub-heading toc-sub-inline"
+                    >
+                      Color
+                    </Link>
+                    <Link
+                      to="/projects/sistent/identity/spacing"
+                      activeClassName="active"
+                      className="toc-sub-heading toc-sub-inline"
+                    >
+                      Spacing
+                    </Link>
+                  </AccordionBody>
+                </AccordionItem>
+              </Accordion>
+            </p>
+          </li>
+          <li>
+            <Link
+              to="/projects/sistent/components"
+              activeClassName="active"
+              className="toc-sub-heading toc-sub-inline"
+            >
+              Components
+            </Link>
+          </li>
         </ul>
       </div>
     </TOCWrapper>

src/components/SistentNavigation/toc.style.js

@@ -120,6 +120,10 @@ const TOCWrapper = styled.div`
       visibility: visible;
     }
   }
+
+  .toc-acc-item {
+    background-color: transparent;
+  }
 `;
 
 export default TOCWrapper;

src/pages/projects/sistent/identity/color.js

@@ -0,0 +1,8 @@
+import React from "react";
+import SistentIdentityColor from "../../../../sections/Projects/Sistent/identity/color";
+
+const SistentIdentityColorPage = () => {
+  return <SistentIdentityColor />;
+};
+
+export default SistentIdentityColorPage;

src/sections/Projects/Sistent/identity.js → src/sections/Projects/Sistent/identity/color.js

@@ -1,16 +1,16 @@
 import React from "react";
-import { Container } from "../../../reusecore/Layout";
-import SistentWrapper from "./sistent.style";
-import TOC from "../../../components/SistentNavigation";
-import IntraPage from "../../../components/handbook-navigation/intra-page";
+import { Container } from "../../../../reusecore/Layout";
+import SistentWrapper from "../sistent.style";
+import TOC from "../../../../components/SistentNavigation";
+import IntraPage from "../../../../components/handbook-navigation/intra-page";
 
 const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }];
 
-const SistentIdentity = () => {
+const SistentIdentityColor = () => {
   return (
     <SistentWrapper>
       <div className="page-header-section">
-        <h1>Identity</h1>
+        <h1>Color</h1>
       </div>
       <TOC />
       <div className="page-section">
@@ -27,4 +27,4 @@ const SistentIdentity = () => {
   );
 };
 
-export default SistentIdentity;
+export default SistentIdentityColor;