accordion on sidebar

Signed-off-by: lakshya <[email protected]>
layer5io · Feb 24, 2024 · d29fe3d · d29fe3d
1 parent f5729a3
commit d29fe3d
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 22 deletions.
diff --git a/src/components/SistentNavigation/index.js b/src/components/SistentNavigation/index.js
@@ -88,39 +88,37 @@ const TOC = () => {
             </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>
+            <div>
+              <li
+                className="toc-sub-heading identity"
+                onClick={() => setExpandIdentity((prev) => !prev)}
+              >
+                Idenitity
+                <IoIosArrowDown />
+              </li>
+              {expandIdenity && (
+                <div className="identity-sublinks">
+                  <li>
                     <Link
                       to="/projects/sistent/identity/color"
+                      className="toc-sub-heading toc-sub-inline identity-item"
                       activeClassName="active"
-                      className="toc-sub-heading toc-sub-inline"
                     >
                       Color
                     </Link>
+                  </li>
+                  <li>
                     <Link
                       to="/projects/sistent/identity/spacing"
+                      className="toc-sub-heading toc-sub-inline identity-item"
                       activeClassName="active"
-                      className="toc-sub-heading toc-sub-inline"
                     >
                       Spacing
                     </Link>
-                  </AccordionBody>
-                </AccordionItem>
-              </Accordion>
-            </p>
+                  </li>
+                </div>
+              )}
+            </div>
           </li>
           <li>
             <Link

diff --git a/src/components/SistentNavigation/toc.style.js b/src/components/SistentNavigation/toc.style.js
@@ -124,6 +124,27 @@ const TOCWrapper = styled.div`
   .toc-acc-item {
     background-color: transparent;
   }
+
+  .identity {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding-right: 1rem;
+    cursor: pointer;
+
+    &:hover {
+      color: ${(props) => props.theme.text};
+    }
+  }
+
+  .identity-sublinks {
+    padding-left: 0.56rem;
+
+    .identity-item {
+      font-size: 1.05rem;
+      margin-top: 0.45rem;
+    }
+  }
 `;
 
 export default TOCWrapper;
diff --git a/src/pages/projects/sistent/identity/spacing.js b/src/pages/projects/sistent/identity/spacing.js
@@ -0,0 +1,8 @@
+import React from "react";
+import SistentIdentitySpacing from "../../../../sections/Projects/Sistent/identity/spacing";
+
+const IdentitySpacingPage = () => {
+  return <SistentIdentitySpacing />;
+};
+
+export default IdentitySpacingPage;
diff --git a/src/sections/Projects/Sistent/identity/color.js b/src/sections/Projects/Sistent/identity/color.js
@@ -17,7 +17,7 @@ const SistentIdentityColor = () => {
         <Container>
           <div className="content">
             <a id="Identity">
-              <h2>Identity</h2>
+              <h2>Color</h2>
             </a>
           </div>
         </Container>

diff --git a/src/sections/Projects/Sistent/identity/spacing.js b/src/sections/Projects/Sistent/identity/spacing.js
@@ -0,0 +1,30 @@
+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";
+
+const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }];
+
+const SistentIdentitySpacing = () => {
+  return (
+    <SistentWrapper>
+      <div className="page-header-section">
+        <h1>Spacing</h1>
+      </div>
+      <TOC />
+      <div className="page-section">
+        <Container>
+          <div className="content">
+            <a id="Identity">
+              <h2>Spacing</h2>
+            </a>
+          </div>
+        </Container>
+        <IntraPage contents={contents} />
+      </div>
+    </SistentWrapper>
+  );
+};
+
+export default SistentIdentitySpacing;