Enhaced The Introduction page for Sistent

Signed-off-by: Aryan Shah <aryanashah11@gmail.com>

Author: ARYANSHAH1567

src/components/SistentNavigation/content.js

@@ -1,102 +1,105 @@
 export const content = [
-  // About
-  { id: 0, link: "/projects/sistent/about", text: "About Sistent" },
+  // Getting Started
+  { id: 0, link: "/projects/sistent/getting-started/about", text: "About" },
+  { id: 1, link: "/projects/sistent/getting-started/installation", text: "Installation" },
+  { id: 2, link: "/projects/sistent/getting-started/usage", text: "Usage" },
+  { id: 3, link: "/projects/sistent/getting-started/tokens", text: "Tokens" },
 
   // Identity
-  { id: 1, link: "/projects/sistent/identity/color", text: "Colors" },
-  { 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: 4, link: "/projects/sistent/identity/color", text: "Colors" },
+  { id: 5, link: "/projects/sistent/identity/color/guidance", text: "Colors" },
+  { id: 6, link: "/projects/sistent/identity/color/code", text: "Colors" },
+  { id: 7, link: "/projects/sistent/identity/spacing", text: "Spacing" },
+  { id: 8, link: "/projects/sistent/identity/spacing/guidance", text: "Spacing" },
+  { id: 9, link: "/projects/sistent/identity/spacing/code", text: "Spacing" },
+  { id: 10, link: "/projects/sistent/identity/typography", text: "Typography" },
+  { id: 11, link: "/projects/sistent/identity/typography/guidance", text: "Typography" },
+  { id: 12, link: "/projects/sistent/identity/typography/code", text: "Typography" },
 
   // Components
-  { id: 10, link: "/projects/sistent/components/backdrop", text: "Backdrop" },
-  { id: 11, link: "/projects/sistent/components/backdrop/guidance", text: "Backdrop" },
-  { id: 12, link: "/projects/sistent/components/backdrop/code", text: "Backdrop" },
+  { id: 13, link: "/projects/sistent/components/backdrop", text: "Backdrop" },
+  { id: 14, link: "/projects/sistent/components/backdrop/guidance", text: "Backdrop" },
+  { id: 15, link: "/projects/sistent/components/backdrop/code", text: "Backdrop" },
 
-  { id: 13, link: "/projects/sistent/components/badge", text: "Badge" },
-  { id: 14, link: "/projects/sistent/components/badge/guidance", text: "Badge" },
-  { id: 15, link: "/projects/sistent/components/badge/code", text: "Badge" },
+  { id: 16, link: "/projects/sistent/components/badge", text: "Badge" },
+  { id: 17, link: "/projects/sistent/components/badge/guidance", text: "Badge" },
+  { id: 18, link: "/projects/sistent/components/badge/code", text: "Badge" },
 
-  { id: 16, link: "/projects/sistent/components/box", text: "Box" },
-  { id: 17, link: "/projects/sistent/components/box/guidance", text: "Box" },
-  { id: 18, link: "/projects/sistent/components/box/code", text: "Box" },
+  { id: 19, link: "/projects/sistent/components/box", text: "Box" },
+  { id: 20, link: "/projects/sistent/components/box/guidance", text: "Box" },
+  { id: 21, link: "/projects/sistent/components/box/code", text: "Box" },
 
-  { id: 19, link: "/projects/sistent/components/button", text: "Button" },
-  { id: 20, link: "/projects/sistent/components/button/guidance", text: "Button" },
-  { id: 21, link: "/projects/sistent/components/button/code", text: "Button" },
+  { id: 22, link: "/projects/sistent/components/button", text: "Button" },
+  { id: 23, link: "/projects/sistent/components/button/guidance", text: "Button" },
+  { id: 24, link: "/projects/sistent/components/button/code", text: "Button" },
 
-  { id: 22, link: "/projects/sistent/components/button-group", text: "Button Group" },
-  { id: 23, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
-  { id: 24, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
+  { id: 25, link: "/projects/sistent/components/button-group", text: "Button Group" },
+  { id: 26, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
+  { id: 27, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
 
-  { id: 25, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
-  { id: 26, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
-  { id: 27, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
+  { id: 28, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
+  { id: 29, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
+  { id: 30, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
 
-  { id: 28, link: "/projects/sistent/components/container", text: "Container" },
-  { id: 29, link: "/projects/sistent/components/container/guidance", text: "Container" },
-  { id: 30, link: "/projects/sistent/components/container/code", text: "Container" },
+  { id: 31, link: "/projects/sistent/components/container", text: "Container" },
+  { id: 32, link: "/projects/sistent/components/container/guidance", text: "Container" },
+  { id: 33, link: "/projects/sistent/components/container/code", text: "Container" },
 
-  { id: 31, link: "/projects/sistent/components/dialog", text: "Dialog" },
-  { id: 32, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
-  { id: 33, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
+  { id: 34, link: "/projects/sistent/components/dialog", text: "Dialog" },
+  { id: 35, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
+  { id: 36, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
 
-  { id: 34, link: "/projects/sistent/components/icons", text: "Icons" },
+  { id: 37, link: "/projects/sistent/components/icons", text: "Icons" },
 
-  { id: 35, link: "/projects/sistent/components/link", text: "Link" },
-  { id: 36, link: "/projects/sistent/components/link/guidance", text: "Link" },
-  { id: 37, link: "/projects/sistent/components/link/code", text: "Link" },
+  { id: 38, link: "/projects/sistent/components/link", text: "Link" },
+  { id: 39, link: "/projects/sistent/components/link/guidance", text: "Link" },
+  { id: 40, link: "/projects/sistent/components/link/code", text: "Link" },
 
-  { id: 38, link: "/projects/sistent/components/modal", text: "Modal" },
-  { id: 39, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
-  { id: 40, link: "/projects/sistent/components/modal/code", text: "Modal" },
+  { id: 41, link: "/projects/sistent/components/modal", text: "Modal" },
+  { id: 42, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
+  { id: 43, link: "/projects/sistent/components/modal/code", text: "Modal" },
 
-  { id: 41, link: "/projects/sistent/components/pagination", text: "Pagination" },
-  { id: 42, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
-  { id: 43, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
+  { id: 44, link: "/projects/sistent/components/pagination", text: "Pagination" },
+  { id: 45, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
+  { id: 46, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
 
-  { id: 44, link: "/projects/sistent/components/paper", text: "Paper" },
-  { id: 45, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
-  { id: 46, link: "/projects/sistent/components/paper/code", text: "Paper" },
+  { id: 47, link: "/projects/sistent/components/paper", text: "Paper" },
+  { id: 48, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
+  { id: 49, link: "/projects/sistent/components/paper/code", text: "Paper" },
 
-  { id: 47, link: "/projects/sistent/components/popper", text: "Popper" },
-  { id: 48, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
-  { id: 49, link: "/projects/sistent/components/popper/code", text: "Popper" },
+  { id: 50, link: "/projects/sistent/components/popper", text: "Popper" },
+  { id: 51, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
+  { id: 52, link: "/projects/sistent/components/popper/code", text: "Popper" },
 
-  { id: 50,link: "/projects/sistent/components/radiogroup",text: "RadioGroup" },
-  { id: 51,link: "/projects/sistent/components/radiogroup/guidance",text: "RadioGroup" },
-  { id: 52,link: "/projects/sistent/components/radiogroup/code",text: "RadioGroup" },
+  { id: 53, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
+  { id: 54, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
+  { id: 55, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
 
-  { id: 53, link: "/projects/sistent/components/select", text: "Select" },
-  { id: 54, link: "/projects/sistent/components/select/guidance", text: "Select" },
-  { id: 55, link: "/projects/sistent/components/select/code", text: "Select" },
+  { id: 56, link: "/projects/sistent/components/select", text: "Select" },
+  { id: 57, link: "/projects/sistent/components/select/guidance", text: "Select" },
+  { id: 58, link: "/projects/sistent/components/select/code", text: "Select" },
 
-  { id: 56, link: "/projects/sistent/components/switch", text: "Switch" },
-  { id: 57, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
-  { id: 58, link: "/projects/sistent/components/switch/code", text: "Switch" },
+  { id: 59, link: "/projects/sistent/components/switch", text: "Switch" },
+  { id: 60, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
+  { id: 61, link: "/projects/sistent/components/switch/code", text: "Switch" },
 
-  { id: 59, link: "/projects/sistent/components/tabs", text: "Tabs" },
-  { id: 60, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
-  { id: 61, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
+  { id: 62, link: "/projects/sistent/components/tabs", text: "Tabs" },
+  { id: 63, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
+  { id: 64, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
 
-  { id: 62, link: "/projects/sistent/components/text-field", text: "Text Field" },
-  { id: 63, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
-  { id: 64, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
+  { id: 65, link: "/projects/sistent/components/text-field", text: "Text Field" },
+  { id: 66, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
+  { id: 67, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
 
-  { id: 65, link: "/projects/sistent/components/text-input", text: "Text Input" },
-  { id: 66, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
-  { id: 67, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
+  { id: 68, link: "/projects/sistent/components/text-input", text: "Text Input" },
+  { id: 69, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
+  { id: 70, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
 
-  { id: 68, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
-  { id: 69, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
-  { id: 70, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
+  { id: 71, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
+  { id: 72, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
+  { id: 73, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
 
-  { id: 71, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
-  { id: 72, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
-  { id: 73, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
-];
+  { id: 74, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
+  { id: 75, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
+  { id: 76, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
+];

src/components/SistentNavigation/index.js

@@ -12,6 +12,9 @@ import { useLocation } from "@reach/router";
 const TOC = () => {
   const [expand, setExpand] = useState(false);
   const location = useLocation();
+  const [expandGettingStarted, setExpandGettingStarted] = useState(
+    location.pathname.includes("/getting-started")
+  );
   const [expandIdenity, setExpandIdentity] = useState(
     location.pathname.includes("/identity")
   );
@@ -52,13 +55,74 @@ const TOC = () => {
       <div className="toc-list">
         <ul className={`toc-ul ${expand ? "toc-ul-open" : ""}`}>
           <li>
-            <Link
-              to="/projects/sistent/about"
-              className="toc-sub-heading toc-sub-inline"
-              activeClassName="active"
-            >
-              About
-            </Link>
+            <div>
+              <li
+                className="toc-sub-heading getting-started"
+                onClick={() => setExpandGettingStarted((prev) => !prev)}
+              >
+                Getting Started
+                {expandGettingStarted ?
+                  <IoIosArrowDown style={{ zIndex: 2 }} /> :
+                  <IoIosArrowForward style={{ zIndex: 2 }} />
+                }
+              </li>
+              {expandGettingStarted && (
+                <div className="getting-started-sublinks">
+                  <li>
+                    <Link
+                      to="/projects/sistent/getting-started/about"
+                      className={`toc-sub-heading toc-sub-inline getting-started-item ${
+                        location.pathname.includes("/projects/sistent/getting-started/about")
+                          ? "active"
+                          : ""
+                      }`}
+                      activeClassName="active"
+                    >
+                      About
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      to="/projects/sistent/getting-started/installation"
+                      className={`toc-sub-heading toc-sub-inline getting-started-item ${
+                        location.pathname.includes("/projects/sistent/getting-started/installation")
+                          ? "active"
+                          : ""
+                      }`}
+                      activeClassName="active"
+                    >
+                      Installation
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      to="/projects/sistent/getting-started/usage"
+                      className={`toc-sub-heading toc-sub-inline getting-started-item ${
+                        location.pathname.includes("/projects/sistent/getting-started/usage")
+                          ? "active"
+                          : ""
+                      }`}
+                      activeClassName="active"
+                    >
+                      Usage
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      to="/projects/sistent/getting-started/tokens"
+                      className={`toc-sub-heading toc-sub-inline getting-started-item ${
+                        location.pathname.includes("/projects/sistent/getting-started/tokens")
+                          ? "active"
+                          : ""
+                      }`}
+                      activeClassName="active"
+                    >
+                      Tokens
+                    </Link>
+                  </li>
+                </div>
+              )}
+            </div>
           </li>
           <li>
             <div>
@@ -164,4 +228,4 @@ const TOC = () => {
   );
 };
 
-export default TOC;
+export default TOC;

src/components/SistentNavigation/toc.style.js

@@ -135,7 +135,7 @@ const TOCWrapper = styled.div`
     background-color: transparent;
   }
 
-  .identity, .components {
+  .identity, .components, .getting-started {
     display: flex;
     width: 100%;
     justify-content: space-between;

src/pages/projects/sistent/about.js …s/sistent/getting-started/about/index.jssrc/pages/projects/sistent/about.js renamed to src/pages/projects/sistent/getting-started/about/index.js src/pages/projects/sistent/about.js renamed to src/pages/projects/sistent/getting-started/about/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import SistentAbout from "../../../sections/Projects/Sistent/about";
+import SistentAbout from "../../../../../sections/Projects/Sistent/getting-started/about";
 
 const SistentAboutPage = () => {
   return <SistentAbout />;

src/pages/projects/sistent/getting-started/installation/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+import SistentInstallation from "../../../../../sections/Projects/Sistent/getting-started/installation";
+
+const SistentInstallationPage = () => {
+  return <SistentInstallation />;
+};
+
+export default SistentInstallationPage;

src/pages/projects/sistent/getting-started/tokens/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+import SistentTokens from "../../../../../sections/Projects/Sistent/getting-started/tokens";
+
+const SistentTokensPage = () => {
+  return <SistentTokens />;
+};
+
+export default SistentTokensPage;

src/pages/projects/sistent/getting-started/usage/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+import SistentUsage from "../../../../../sections/Projects/Sistent/getting-started/usage";
+
+const SistentUsagePage = () => {
+  return <SistentUsage />;
+};
+
+export default SistentUsagePage;