Added Components dropdown functionality, resolved small devices dropd…

…own issues Signed-off-by: Muhammad Moinuddin <[email protected]>
layer5io · Jul 24, 2024 · c0059d0 · c0059d0
1 parent 816f6e5
commit c0059d0
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 28 deletions.
diff --git a/src/components/SistentNavigation/index.js b/src/components/SistentNavigation/index.js
@@ -16,6 +16,9 @@ const TOC = () => {
   const [expandIdenity, setExpandIdentity] = useState(
     location.pathname.includes("/identity")
   );
+  const [expandComponents, setExpandComponents] = useState(
+    location.pathname.includes("/components")
+  );
 
   return (
     <TOCWrapper>
@@ -56,18 +59,18 @@ const TOC = () => {
           <li>
             <div>
               <li
-                className="toc-sub-heading identity"
+                className="toc-sub-heading element"
                 onClick={() => setExpandIdentity((prev) => !prev)}
               >
                 Identity
                 {expandIdenity ? <IoIosArrowUp /> : <IoIosArrowDown />}
               </li>
               {expandIdenity && (
-                <div className="identity-sublinks">
+                <div className="element-sublinks">
                   <li>
                     <Link
                       to="/projects/sistent/identity/color"
-                      className={`toc-sub-heading toc-sub-inline identity-item ${
+                      className={`toc-sub-heading toc-sub-inline element-item ${
                         location.pathname.includes(
                           "/projects/sistent/identity/color"
                         )
@@ -82,7 +85,7 @@ 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 element-item ${
                         location.pathname.includes(
                           "/projects/sistent/identity/spacing"
                         )
@@ -97,7 +100,7 @@ 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 element-item ${
                         location.pathname.includes(
                           "/projects/sistent/identity/typography"
                         )
@@ -114,13 +117,70 @@ const TOC = () => {
             </div>
           </li>
           <li>
-            <Link
-              to="/projects/sistent/components"
-              activeClassName="active"
-              className="toc-sub-heading toc-sub-inline"
-            >
-              Components
-            </Link>
+            <div>
+              <li
+                className="components"
+                onClick={() => setExpandComponents((prev) => !prev)}
+              >
+                <Link
+                  to="/projects/sistent/components"
+                  className= "components-heading"
+                  activeClassName="active"
+                >
+                  Components
+                </Link>
+                {expandComponents ? <IoIosArrowUp /> : <IoIosArrowDown />}
+              </li>
+              {expandComponents && (
+                <div className="element-sublinks">
+                  <li>
+                    <Link
+                      to="/projects/sistent/components/button"
+                      className={`toc-sub-heading toc-sub-inline element-item ${
+                        location.pathname.includes(
+                          "/projects/sistent/components/button"
+                        )
+                          ? "active"
+                          : ""
+                      }`}
+                      activeClassName="active"
+                    >
+                      Button
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      to="/projects/sistent/components/text-input"
+                      className={`toc-sub-heading toc-sub-inline element-item ${
+                        location.pathname.includes(
+                          "/projects/sistent/components/text-input"
+                        )
+                          ? "active"
+                          : ""
+                      }`}
+                      activeClassName="active"
+                    >
+                      Text Input
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      to="/projects/sistent/components/modal"
+                      className={`toc-sub-heading toc-sub-inline element-item ${
+                        location.pathname.includes(
+                          "/projects/sistent/components/modal"
+                        )
+                          ? "active"
+                          : ""
+                      }`}
+                      activeClassName="active"
+                    >
+                      Modal
+                    </Link>
+                  </li>
+                </div>
+              )}
+            </div>
           </li>
         </ul>
       </div>

diff --git a/src/components/SistentNavigation/intra-page.js b/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) => ({

diff --git a/src/components/SistentNavigation/toc.style.js b/src/components/SistentNavigation/toc.style.js
@@ -48,12 +48,25 @@ 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};
@@ -94,10 +107,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 +134,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 +160,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;
     }

diff --git a/src/components/handbook-navigation/intra-page.js b/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;
     }
   }
 

diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js
@@ -21,6 +21,9 @@ const SistentWrapper = styled.div`
   .content {
     width: 100%;
     padding-bottom: 2rem;
+    @media only screen and (max-width: 750px){
+      overflow: hidden;
+    }
     ul > li {
       color: ${(props) => props.theme.text};
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -176,7 +179,7 @@ const SistentWrapper = styled.div`
   }
 
   .community-home-container {
-    padding: 1rem 0;
+    padding: 1rem;
     padding-bottom: 4rem;
     display: flex;
     flex-wrap: wrap;
@@ -446,7 +449,7 @@ const SistentWrapper = styled.div`
       opacity: 0;
       height: 0;
       transition: none;
-      visibility: hidden;
+      display: none;
     }
   }
 
@@ -626,10 +629,6 @@ const SistentWrapper = styled.div`
     margin-bottom: 0.5rem;
   }
 
-  .components-container {
-    margin-left: 1rem;
-  }
-
   .search-container {
     display: flex;
     justify-content: center;