fix: added dynamic background and removed plus

Signed-off-by: upsaurav12 . <[email protected]>
upsaurav12 · Aug 9, 2024 · 7f92763 · 7f92763
1 parent 118c890
commit 7f92763
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/src/sections/General/Navigation/index.js b/src/sections/General/Navigation/index.js
@@ -265,12 +265,13 @@ const Navigation = () => {
         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)") {
+        if (mobileNavSubitemContainer.style.display === "block" && plus.style.transform == "rotate(180deg)") {
           mobileNavSubitemContainer.style.display = "none";
           plus.style.transform = "rotate(0deg)";
+
         } else {
           mobileNavSubitemContainer.style.display = "block";
-          plus.style.transform = "rotate(135deg)";
+          plus.style.transform = "rotate(180deg)";
         }
       });
     });

diff --git a/src/sections/General/Navigation/navigation.style.js b/src/sections/General/Navigation/navigation.style.js
@@ -650,38 +650,41 @@ const NavigationWrap = styled.header`
       position: relative;
       height: 50px;
       width: 50px;
-      transition: transform 0.35s;
+      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
       transform-origin: centre;
       margin-right: 13px;
     }
     .plus span {
     position: absolute;
     width: 100%;
     height: 100%;
-    left: 9px;
+    display: flex;
+    justify-content: center;
   }
 
   .plus span::before,
   .plus span::after {
       content: '';
       position: absolute;
-      background-color: white;
+      background-color: ${(props) => props.theme.menuColor};
   }
 
   .plus span::before {
-      top: 50%;
-      left: 0;
-      width: 14px;
+      width: 10px;
       height: 2.5px; /* Thickness of the horizontal line */
-      transform: translateY(-50%);
+      transform: rotate(40deg);
+      top: 10px;
+      margin-top: 26%;
+      margin-left: 16.124%;
   }
 
   .plus span::after {
-      top: 18px;
-    left: 7px;
     width: 2.5px; /* Thickness of the vertical line */
-    height: 14px;
-    transform: translateX(-50%);
+    height: 10px;
+    transform: rotate(40deg);
+    margin-top: 42.125%;
+    margin-left: -14%;
+    
 }
 
     .plus:hover{