[Fix] Added Components dropdown functionality, resolved small devices dropdown issues

src/components/SistentNavigation/index.js

@@ -3,19 +3,46 @@ 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 TOCWrapper from "./toc.style";
 import { IoIosArrowDown } from "@react-icons/all-files/io/IoIosArrowDown";
 import { IoIosArrowUp } from "@react-icons/all-files/io/IoIosArrowUp";
-
 import { useLocation } from "@reach/router";
 
 const TOC = () => {
-  const [expand, setExpand] = useState(false);
   const location = useLocation();
-  const [expandIdenity, setExpandIdentity] = useState(
-    location.pathname.includes("/identity")
-  );
+  const [expand, setExpand] = useState(false);
+  const [expandedSections, setExpandedSections] = useState({
+    identity: location.pathname.includes("/identity"),
+    components: location.pathname.includes("/components"),
+  });
+
+  const tocData = [
+    { title: "About", path: "/projects/sistent/about" },
+    {
+      title: "Identity",
+      subItems: [
+        { title: "Color", path: "/projects/sistent/identity/color" },
+        { title: "Spacing", path: "/projects/sistent/identity/spacing" },
+        { title: "Typography", path: "/projects/sistent/identity/typography" },
+      ],
+    },
+    {
+      title: "Components",
+      path: "/projects/sistent/components",
+      subItems: [
+        { title: "Button", path: "/projects/sistent/components/button" },
+        { title: "Text Input", path: "/projects/sistent/components/text-input" },
+        { title: "Modal", path: "/projects/sistent/components/modal" },
+      ],
+    },
+  ];
+
+  const toggleSection = (section) => {
+    setExpandedSections((prev) => ({
+      ...prev,
+      [section]: !prev[section],
+    }));
+  };
 
   return (
     <TOCWrapper>
@@ -26,106 +53,63 @@ const TOC = () => {
         </Link>
         <div className="toc-toggle-btn">
           {expand ? (
-            <IoMdClose
-              className="toc-menu-icon"
-              onClick={function () {
-                setExpand(!expand);
-              }}
-            />
+            <IoMdClose className="toc-menu-icon" onClick={() => setExpand(!expand)} />
           ) : (
-            <IoIosArrowDropdownCircle
-              className="toc-menu-icon"
-              onClick={function () {
-                setExpand(!expand);
-              }}
-            />
+            <IoIosArrowDropdownCircle className="toc-menu-icon" onClick={() => setExpand(!expand)} />
           )}
         </div>
       </div>
       <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>
-          </li>
-          <li>
-            <div>
-              <li
-                className="toc-sub-heading identity"
-                onClick={() => setExpandIdentity((prev) => !prev)}
-              >
-                Identity
-                {expandIdenity ? <IoIosArrowUp /> : <IoIosArrowDown />}
-              </li>
-              {expandIdenity && (
-                <div className="identity-sublinks">
-                  <li>
-                    <Link
-                      to="/projects/sistent/identity/color"
-                      className={`toc-sub-heading toc-sub-inline identity-item ${
-                        location.pathname.includes(
-                          "/projects/sistent/identity/color"
-                        )
-                          ? "active"
-                          : ""
-                      }`}
-                      activeClassName="active"
-                    >
-                      Color
-                    </Link>
-                  </li>
-                  <li>
-                    <Link
-                      to="/projects/sistent/identity/spacing"
-                      className={`toc-sub-heading toc-sub-inline identity-item ${
-                        location.pathname.includes(
-                          "/projects/sistent/identity/spacing"
-                        )
-                          ? "active"
-                          : ""
-                      }`}
-                      activeClassName="active"
-                    >
-                      Spacing
-                    </Link>
-                  </li>
-                  <li>
-                    <Link
-                      to="/projects/sistent/identity/typography"
-                      className={`toc-sub-heading toc-sub-inline identity-item ${
-                        location.pathname.includes(
-                          "/projects/sistent/identity/typography"
-                        )
-                          ? "active"
-                          : ""
-                      }`}
-                      activeClassName="active"
-                    >
-                      Typography
-                    </Link>
+          {tocData.map((item, index) => (
+            <li key={index}>
+              {item.subItems ? (
+                <div>
+                  <li className="toc-sub-heading element" onClick={() => toggleSection(item.title.toLowerCase())}>
+                    {item.path ? (
+                      <Link to={item.path}
+                        className={`${location.pathname.endsWith(item.title.toLowerCase()) ? "active" : "inactive"}`}
+                      >
+                        {item.title}
+                      </Link>
+                    ) : (
+                      item.title
+                    )}
+                    {expandedSections[item.title.toLowerCase()] ? <IoIosArrowUp /> : <IoIosArrowDown />}
                   </li>
+                  {expandedSections[item.title.toLowerCase()] && (
+                    <div className="element-sublinks">
+                      {item.subItems.map((subItem, subIndex) => (
+                        <li key={subIndex}>
+                          <Link
+                            to={subItem.path}
+                            className={`toc-sub-heading toc-sub-inline element-item ${
+                              location.pathname.includes(subItem.path) ? "active" : ""
+                            }`}
+                            activeClassName="active"
+                          >
+                            {subItem.title}
+                          </Link>
+                        </li>
+                      ))}
+                    </div>
+                  )}
                 </div>
+              ) : (
+                <Link
+                  to={item.path}
+                  className={`toc-sub-heading toc-sub-inline ${location.pathname.includes(item.path) ? "active" : ""}`}
+                  activeClassName="active"
+                >
+                  {item.title}
+                </Link>
               )}
-            </div>
-          </li>
-          <li>
-            <Link
-              to="/projects/sistent/components"
-              activeClassName="active"
-              className="toc-sub-heading toc-sub-inline"
-            >
-              Components
-            </Link>
-          </li>
+            </li>
+          ))}
         </ul>
       </div>
     </TOCWrapper>
   );
 };
 
-export default TOC;
+export default TOC;

src/components/SistentNavigation/intra-page.js

@@ -50,7 +50,7 @@ const JoinCommunityWrapper = styled.div`
       opacity: 0;
       height: 0;
       transition: none;
-      visibility: hidden;
+      display: none;
     }
   }
 
@@ -64,7 +64,6 @@ function IntraPage() {
 
   useEffect(() => {
     const anchors = document.querySelectorAll(".main-content > a");
-    console.log(anchors);
     if (anchors) {
       setContents(
         Array.from(anchors).map((a) => ({

src/components/SistentNavigation/toc.style.js

@@ -48,16 +48,35 @@ const TOCWrapper = styled.div`
     margin-top: 1rem;
     font-weight: 300;
     font-size: 1.15rem;
+    &:hover {
+      color: ${(props) => props.theme.secondaryColor};
+    }
   }
 
   .toc-sub-inline {
     display: inline-block;
   }
 
+  .components-heading{
+    color: ${(props) => props.theme.text};
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    font-weight: 300;
+    font-size: 1.15rem;
+    &:hover {
+      color: ${(props) => props.theme.secondaryColor};
+    }
+  }
+
   .active {
     font-weight: 500;
     color: ${(props) => props.theme.secondaryColor};
   }
+  .inactive{
+    color: ${(props) => props.theme.text};
+    &:hover {
+      color: ${(props) => props.theme.secondaryColor};
+    }
+  }
 
   ul {
     display: flex;
@@ -94,10 +113,6 @@ const TOCWrapper = styled.div`
     fill: ${(props) => props.theme.menuColor};
   }
 
-  .toc-sub-heading:hover {
-    color: ${(props) => props.theme.secondaryColor};
-  }
-
   @media only screen and (max-width: 750px) {
     position: initial;
     margin-right: 3rem;
@@ -125,7 +140,20 @@ const TOCWrapper = styled.div`
     background-color: transparent;
   }
 
-  .identity {
+  .components {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    margin-top: 1rem;
+    align-items: center;
+    padding-right: 1rem;
+    cursor: pointer;
+    &:hover {
+      color: ${(props) => props.theme.text};
+    }
+  }
+
+  .element {
     display: flex;
     width: 100%;
     justify-content: space-between;
@@ -138,10 +166,10 @@ const TOCWrapper = styled.div`
     }
   }
 
-  .identity-sublinks {
+  .element-sublinks {
     padding-left: 0.56rem;
 
-    .identity-item {
+    .element-item {
       font-size: 1.05rem;
       margin-top: 0.45rem;
     }

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

@@ -44,7 +44,7 @@ const JoinCommunityWrapper = styled.div`
       opacity: 0;
       height: 0;
       transition: none;
-      visibility: hidden;
+      display: none;
     }
   }
 

src/sections/DoYouNeedService/doYouNeedService.style.js

@@ -13,7 +13,7 @@ const DoYouNeedWrapper = styled.div`
     background-color: #000000;
 
     *{
-        font-family: "Qanelas Soft","Qanelas Soft", "Open Sans", sans-serif;
+        font-family: "Qanelas Soft", "Open Sans", sans-serif;
         color: #ffffff;
     }
 

src/sections/Home/Banner-4/index.js

@@ -21,7 +21,7 @@ import { graphql, useStaticQuery } from "gatsby";
 import { getImage } from "gatsby-plugin-image";
 import useHasMounted from "../../../utils/useHasMounted";
 
-const Banner1 = (props) => {
+const Banner4 = (props) => {
 
   const { heroImage } = useStaticQuery(
     graphql`
@@ -114,4 +114,4 @@ const Banner1 = (props) => {
   );
 };
 
-export default Banner1;
+export default Banner4;

src/sections/Home/Banner/index.js

@@ -36,10 +36,10 @@ const RotationalBanner = () => {
   */
   return (
     <>
-      <Banner4 className="banner1" />
-      <Banner1 className="banner2" />
-      <Banner2 className="banner3" />
-      <Banner3 className="banner4" />
+      <Banner4 className="banner4" />
+      <Banner1 className="banner1" />
+      <Banner2 className="banner2" />
+      <Banner3 className="banner3" />
     </>
   );
 };

src/sections/Meshmap/features/features.style.js

@@ -8,7 +8,7 @@ const FeatureWrapper = styled.section`
   flex-direction:column;
 
   & > .text {
-    font-family:'Qanelas Soft','Qanelas Soft', sans-serif;
+    font-family:'Qanelas Soft', sans-serif;
     opacity:0;
     margin-top: 2rem;
     margin-bottom: 5rem;

src/sections/Meshmap/meshmap-catalog.js

@@ -72,7 +72,7 @@ box-shadow: 0px 6px 5px 0px rgb(0 0 0 / 25%);
 }
   p.caption {
     font-style: normal;
-    font-family: 'Qanelas Soft','Qanelas Soft', sans-serif;
+    font-family: 'Qanelas Soft', sans-serif;
     font-weight: 300;
     color: ${props => props.theme.whiteToBlack};
     font-size: 1.5rem;
@@ -149,7 +149,7 @@ h2{
 	margin: 5% auto 1%;
 }
 h2.heading {
-  font-family: 'Qanelas Soft','Qanelas Soft', sans-serif;
+  font-family: 'Qanelas Soft', sans-serif;
   font-style: normal;
   font-weight: 50;
   font-size: 3.75rem;