Dynamic intra-page on Sistent

Signed-off-by: lakshya <[email protected]>

src/components/SistentNavigation/content.js

@@ -1,7 +1,46 @@
 export const content = [
   { id: 0, link: "/projects/sistent/about", text: "About Sistent" },
   { id: 1, link: "/projects/sistent/identity/color", text: "Colors" },
-  { id: 2, link: "/projects/sistent/identity/spacing", text: "Spacing" },
-  { id: 3, link: "/projects/sistent/identity/typography", text: "Typography" },
-  { id: 4, link: "/projects/sistent/components", text: "Components" },
+  { id: 2, link: "/projects/sistent/identity/color/guidance", text: "Colors" },
+  { id: 3, link: "/projects/sistent/identity/color/code", text: "Colors" },
+  { id: 4, link: "/projects/sistent/identity/spacing", text: "Spacing" },
+  {
+    id: 5,
+    link: "/projects/sistent/identity/spacing/guidance",
+    text: "Spacing",
+  },
+  { id: 6, link: "/projects/sistent/identity/spacing/code", text: "Spacing" },
+  { id: 7, link: "/projects/sistent/identity/typography", text: "Typography" },
+  {
+    id: 8,
+    link: "/projects/sistent/identity/typography/guidance",
+    text: "Typography",
+  },
+  {
+    id: 9,
+    link: "/projects/sistent/identity/typography/code",
+    text: "Typography",
+  },
+  { id: 10, link: "/projects/sistent/components/button", text: "Button" },
+  {
+    id: 10,
+    link: "/projects/sistent/components/button/guidance",
+    text: "Button",
+  },
+  { id: 11, link: "/projects/sistent/components/button/code", text: "Button" },
+  {
+    id: 12,
+    link: "/projects/sistent/components/text-input",
+    text: "Text Input",
+  },
+  {
+    id: 13,
+    link: "/projects/sistent/components/text-input/guidance",
+    text: "Text Input",
+  },
+  {
+    id: 14,
+    link: "/projects/sistent/components/text-input/code",
+    text: "Text Input",
+  },
 ];

src/components/SistentNavigation/index.js

@@ -67,7 +67,13 @@ const TOC = () => {
                   <li>
                     <Link
                       to="/projects/sistent/identity/color"
-                      className="toc-sub-heading toc-sub-inline identity-item"
+                      className={`toc-sub-heading toc-sub-inline identity-item ${
+                        location.pathname.includes(
+                          "/projects/sistent/identity/color"
+                        )
+                          ? "active"
+                          : ""
+                      }`}
                       activeClassName="active"
                     >
                       Color
@@ -76,7 +82,13 @@ const TOC = () => {
                   <li>
                     <Link
                       to="/projects/sistent/identity/spacing"
-                      className="toc-sub-heading toc-sub-inline identity-item"
+                      className={`toc-sub-heading toc-sub-inline identity-item ${
+                        location.pathname.includes(
+                          "/projects/sistent/identity/spacing"
+                        )
+                          ? "active"
+                          : ""
+                      }`}
                       activeClassName="active"
                     >
                       Spacing
@@ -85,7 +97,13 @@ const TOC = () => {
                   <li>
                     <Link
                       to="/projects/sistent/identity/typography"
-                      className="toc-sub-heading toc-sub-inline identity-item"
+                      className={`toc-sub-heading toc-sub-inline identity-item ${
+                        location.pathname.includes(
+                          "/projects/sistent/identity/typography"
+                        )
+                          ? "active"
+                          : ""
+                      }`}
                       activeClassName="active"
                     >
                       Typography

src/components/SistentNavigation/intra-page.js

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "gatsby";
+import styled from "styled-components";
+
+const JoinCommunityWrapper = styled.div`
+  width: 18rem;
+  @media screen and (min-width: 751px) and (max-width: 1279px) {
+    display: none;
+  }
+  .intra-page {
+    position: sticky;
+    top: 10rem;
+    right: 0rem;
+    margin-right: 1rem;
+    padding-bottom: 5rem;
+    padding-right: 2rem;
+    align-items: left;
+    justify-content: space-around;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .list {
+      color: #000000;
+    }
+    .active {
+      font-weight: 5000;
+      color: #000000;
+    }
+
+    ul {
+      list-style: none;
+      top: 3rem;
+      li {
+        padding-bottom: 0.5rem;
+        padding-top: 0.5rem;
+      }
+    }
+    @media only screen and (min-width: 1280px) and (max-width: 1350px) {
+      padding-right: 0rem;
+      margin-right: 0rem;
+    }
+    @media only screen and (max-width: 950px) {
+      width: 0;
+      opacity: 0;
+      height: 0;
+      transition: none;
+      visibility: hidden;
+    }
+  }
+
+  .learn {
+    width: 10rem;
+  }
+`;
+
+function IntraPage() {
+  const [contents, setContents] = useState([]);
+
+  useEffect(() => {
+    const anchors = document.querySelectorAll(".main-content > a");
+    console.log(anchors);
+    if (anchors) {
+      setContents(
+        Array.from(anchors).map((a) => ({
+          id: a.id,
+          link: `#${a.id}`,
+          text: a.id,
+        }))
+      );
+    }
+  }, []);
+
+  const [intapath, setIntapath] = useState(null);
+  useEffect(() => {
+    const path = window.location.pathname;
+    setIntapath(path);
+  }, []);
+
+  return (
+    <JoinCommunityWrapper>
+      <div className="intra-page">
+        <ul>
+          {contents.map((x) => (
+            <li key={x.id} className="list">
+              <Link
+                to={`${intapath}${x.link}`}
+                key={x.id}
+                activeClassName="active"
+              >
+                {x.text}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </JoinCommunityWrapper>
+  );
+}
+
+export default IntraPage;

src/components/handbook-navigation/intra-page.js

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { Link } from "gatsby";
 import styled from "styled-components";
+import { link } from "joi";
 
 const JoinCommunityWrapper = styled.div`
   @media screen and (min-width: 751px) and (max-width: 1279px) {
-        display:none;
+    display: none;
   }
   .intra-page {
     position: sticky;
@@ -35,10 +36,10 @@ const JoinCommunityWrapper = styled.div`
         padding-top: 0.5rem;
       }
     }
-    @media only screen and (min-width: 1280px) and (max-width: 1350px){
-        padding-right:0rem;
-        margin-right:0rem;
-      }
+    @media only screen and (min-width: 1280px) and (max-width: 1350px) {
+      padding-right: 0rem;
+      margin-right: 0rem;
+    }
     @media only screen and (max-width: 950px) {
       width: 0;
       opacity: 0;
@@ -59,6 +60,7 @@ function IntraPage({ contents }) {
     const path = window.location.pathname;
     setIntapath(path);
   }, []);
+
   return (
     <JoinCommunityWrapper>
       <div className="intra-page">

src/pages/projects/sistent/components/button/code.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { ButtonCode } from "../../../../../sections/Projects/Sistent/components/button/code";
+
+const ButtonCodePage = () => {
+  return <ButtonCode />;
+};
+
+export default ButtonCodePage;

src/pages/projects/sistent/components/button/guidance.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { ButtonGuidance } from "../../../../../sections/Projects/Sistent/components/button/guidance";
+
+const ButtonGuidancePage = () => {
+  return <ButtonGuidance />;
+};
+
+export default ButtonGuidancePage;

src/pages/projects/sistent/components/button.js → src/pages/projects/sistent/components/button/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import SistentButton from "../../../../sections/Projects/Sistent/components/button";
+import SistentButton from "../../../../../sections/Projects/Sistent/components/button";
 
 const SistentButtonPage = () => {
   return <SistentButton />;

src/pages/projects/sistent/components/text-input/code.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { TextInputCode } from "../../../../../sections/Projects/Sistent/components/text-input/code";
+
+const TextInputCodePage = () => {
+  return <TextInputCode />;
+};
+
+export default TextInputCodePage;

src/pages/projects/sistent/components/text-input/guidance.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { TextInputGuidance } from "../../../../../sections/Projects/Sistent/components/text-input/guidance";
+
+const TextInputGuidancePage = () => {
+  return <TextInputGuidance />;
+};
+
+export default TextInputGuidancePage;

src/pages/projects/sistent/components/text-input.js → src/pages/projects/sistent/components/text-input/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import SistentTextInput from "../../../../sections/Projects/Sistent/components/text-input";
+import SistentTextInput from "../../../../../sections/Projects/Sistent/components/text-input";
 
 const SistentTextInputPage = () => {
   return <SistentTextInput />;

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

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

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

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

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

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

src/pages/projects/sistent/identity/spacing/code.js

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

src/pages/projects/sistent/identity/spacing/guidance.js

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

src/pages/projects/sistent/identity/spacing.js → src/pages/projects/sistent/identity/spacing/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import SistentIdentitySpacing from "../../../../sections/Projects/Sistent/identity/spacing/index";
+import SistentIdentitySpacing from "../../../../../sections/Projects/Sistent/identity/spacing/index";
 
 const IdentitySpacingPage = () => {
   return <SistentIdentitySpacing />;

src/pages/projects/sistent/identity/typography/code.js

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

src/pages/projects/sistent/identity/typography/guidance.js

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

src/pages/projects/sistent/identity/typography.js → src/pages/projects/sistent/identity/typography/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import SistentTypography from "../../../../sections/Projects/Sistent/identity/typography";
+import SistentTypography from "../../../../../sections/Projects/Sistent/identity/typography";
 
 const SistentTypographyPage = () => {
   return <SistentTypography />;