fix: Mobile Nav improvement

Signed-off-by: upsaurav12 . <[email protected]>
upsaurav12 · Aug 4, 2024 · 02acd04 · 02acd04
1 parent 4f5810f
commit 02acd04
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 44 deletions.
diff --git a/src/sections/General/Navigation/index.js b/src/sections/General/Navigation/index.js
@@ -256,6 +256,29 @@ const Navigation = () => {
     closeDropDown();
   };
 
+
+  useEffect(() => {
+    const plusButtons = document.querySelectorAll(".plus");
+
+    plusButtons.forEach((plus, index) => {
+      plus.addEventListener("click", () => {
+        const index = plus.getAttribute("data-index");
+        const mobileNavSubitemContainer = document.querySelector(`.mobile-nav-subitem-container[data-index='${index}']`);
+
+        if (mobileNavSubitemContainer.style.display === "block" && plus.style.transform == "rotate(135deg)") {
+          mobileNavSubitemContainer.style.display = "none";
+          plus.style.transform = "rotate(0deg)";
+        } else {
+          mobileNavSubitemContainer.style.display = "block";
+          plus.style.transform = "rotate(135deg)";
+        }
+      });
+    });
+  }, []);
+
+
+
+
   return (
     <NavigationWrap
       className={`nav-block ${scroll ? "scrolled" : ""}`}
@@ -296,49 +319,60 @@ const Navigation = () => {
                           : "mobile-nav-item"
                       }
                     >
-                      <Link
-                        to={menu.path}
-                        onClick={changeDropdownState}
-                        className="menu-item"
-                        activeClassName="nav-link-active"
-                      >
-                        {menu.name}
-                      </Link>
-                      <ul>
-                        {menu.subItems !== undefined &&
-                          menu.subItems.map((subItems, index) => {
-                            return (
-                              <li key={index} className="mobile-nav-subitem">
-                                {subItems.externalLink ? (
-                                  <a
-                                    href={subItems.path}
-                                    target="_blank"
-                                    onClick={() => {
-                                      changeDropdownState();
-                                      closeDropDown();
-                                    }}
-                                    className="mobile-sub-menu-item"
-                                    rel="noreferrer"
-                                  >
-                                    {subItems.name}
-                                  </a>
-                                ) : (
-                                  <Link
-                                    to={subItems.path}
-                                    onClick={() => {
-                                      changeDropdownState();
-                                      closeDropDown();
-                                    }}
-                                    className="mobile-sub-menu-item"
-                                    activeClassName="nav-link-active"
-                                  >
-                                    {subItems.name}
-                                  </Link>
-                                )}
-                              </li>
-                            );
-                          })}
-                      </ul>
+                      <div className="wrapper">
+                        <Link
+                          to={menu.path}
+                          onClick={changeDropdownState}
+                          className="menu-item"
+                          activeClassName="nav-link-active"
+                        >
+                          {menu.name}
+                        </Link>
+                        {menu.subItems !== undefined && (
+                          <div className="plus" data-index={index}>
+                            <span></span>
+                          </div>
+                        )}
+                      </div>
+                      {menu.subItems !== undefined && (
+                        <div className="mobile-nav-subitem-container" data-index={index}>
+                          <ul>
+                            {menu.subItems !== undefined &&
+                              menu.subItems.map((subItems, index) => {
+                                return (
+                                  <li key={index} className="mobile-nav-subitem">
+                                    {subItems.externalLink ? (
+                                      <a
+                                        href={subItems.path}
+                                        target="_blank"
+                                        onClick={() => {
+                                          changeDropdownState();
+                                          closeDropDown();
+                                        }}
+                                        className="mobile-sub-menu-item"
+                                        rel="noreferrer"
+                                      >
+                                        {subItems.name}
+                                      </a>
+                                    ) : (
+                                      <Link
+                                        to={subItems.path}
+                                        onClick={() => {
+                                          changeDropdownState();
+                                          closeDropDown();
+                                        }}
+                                        className="mobile-sub-menu-item"
+                                        activeClassName="nav-link-active"
+                                      >
+                                        {subItems.name}
+                                      </Link>
+                                    )}
+                                  </li>
+                                );
+                              })}
+                          </ul>
+                        </div>
+                      )}
                     </li>
                   ))}
                 </ul>

diff --git a/src/sections/General/Navigation/navigation.style.js b/src/sections/General/Navigation/navigation.style.js
@@ -578,6 +578,7 @@ const NavigationWrap = styled.header`
     .mobile-collapsed {
       display: flex;
       flex-direction: column;
+      overflow: hidden;
     }
     .mobile-menu-icon {
       display: inline-block;
@@ -622,7 +623,9 @@ const NavigationWrap = styled.header`
         font-size: 16px;
         font-weight: 600;
         line-height: 2rem;
-        font-size: 1.25rem;
+        font-size: 1.125rem;
+        width: 100%;
+        padding: 10px 0;
       }
       a:before {
         content: none;
@@ -631,6 +634,64 @@ const NavigationWrap = styled.header`
         display: list-item;
       }
     }
+    .wrapper {
+
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 0;
+
+    }
+
+    .mobile-nav-subitem-container{
+      display:none;
+    }
+
+    .plus {
+      position: relative;
+      height: 50px;
+      width: 50px;
+      transition: transform 0.35s;
+      transform-origin: centre;
+      margin-right: 13px;
+    }
+    .plus span {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 9px;
+  }
+
+  .plus span::before,
+  .plus span::after {
+      content: '';
+      position: absolute;
+      background-color: white;
+  }
+
+  .plus span::before {
+      top: 50%;
+      left: 0;
+      width: 14px;
+      height: 2.5px; /* Thickness of the horizontal line */
+      transform: translateY(-50%);
+  }
+
+  .plus span::after {
+      top: 18px;
+    left: 7px;
+    width: 2.5px; /* Thickness of the vertical line */
+    height: 14px;
+    transform: translateX(-50%);
+}
+
+    .plus:hover{
+    cursor: pointer;
+    }
+
+    .sub-items{
+    border: 1px solid pink;
+    }
+
     .mobile-nav-subitem {
       padding-left: 10px;
       padding-top: 0.4rem;