nav thumg animation added

src/components/global/LoggedNav.js

@@ -11,10 +11,9 @@ import Loader from "./Loader";
 import hb from "../../images/logo.jpg";
 import lang from "../../icons/lang.svg";
 import arrow from "../../icons/arrow-down.svg";
-import menu from "../../icons/menu.svg";
 import userImg from "../../icons/user.svg";
 
-const LoggedNav = ({ setSideOpen }) => {
+const LoggedNav = ({ sideOpen, setSideOpen, animator, setAnimator }) => {
   const { user, setUser } = useContext(UserContext);
   const langBlock = useRef();
   const userBlock = useRef();
@@ -24,6 +23,7 @@ const LoggedNav = ({ setSideOpen }) => {
   const [langOpen, setLangOpen] = useState(false);
   const [language, setLanguage] = useState("РУС");
   const [profile, setProfile] = useState(false);
+
   return (
     <nav
       className="nav logged-nav"
@@ -42,10 +42,14 @@ const LoggedNav = ({ setSideOpen }) => {
             <div
               className="nav-menu"
               onClick={() => {
-                setSideOpen((prevState) => !prevState);
+                setSideOpen(!sideOpen);
               }}
             >
-              <img src={menu} alt="menu" />
+              <div className={sideOpen ? "line-block active" : "line-block"}>
+                <div className="lines line-1"></div>
+                <div className="lines line-2"></div>
+                <div className="lines line-3"></div>
+              </div>
             </div>
             <Link to="/" className="nav-logo">
               <img src={hb} alt="Halk Bank" />

src/pages/Home.js

@@ -26,7 +26,7 @@ const Home = ({ ChildEl }) => {
       <Side sideOpen={sideOpen} setSideOpen={setSideOpen} />
       <div className="home-content">
         <div className="home-inner">
-          <LoggedNav setSideOpen={setSideOpen} />
+          <LoggedNav sideOpen={sideOpen} setSideOpen={setSideOpen} />
           {/* RENDER PAGE DEPENDING ON URL */}
           <ChildEl />
         </div>

src/styles/_nav.scss

@@ -1,3 +1,81 @@
+.line-block {
+  position: relative;
+  width: 3rem;
+  height: 2rem;
+  transform: rotate(0deg);
+  transition: all 0.3s ease;
+
+  &::after {
+    opacity: 0;
+    display: block;
+    content: "";
+    left: 0;
+    border-radius: 0.5rem;
+    position: absolute;
+    background: $base-green;
+    height: 0.261rem;
+    width: 3rem;
+    transform: rotate(0deg);
+    transition: all 0.3s ease;
+  }
+
+  .lines {
+    left: 0;
+    border-radius: 0.5rem;
+    position: absolute;
+    background: $base-green;
+    height: 0.26rem;
+  }
+
+  .line-1 {
+    top: 0;
+    width: 3rem;
+  }
+
+  .line-2 {
+    transform: rotate(0deg);
+    top: 50%;
+    width: 2rem;
+    transition: all 0.3s ease;
+  }
+
+  .line-3 {
+    top: 100%;
+    width: 3rem;
+  }
+
+  &.active {
+    transform: rotate(90deg);
+    transition: all 0.3s ease;
+
+    &::after {
+      opacity: 1;
+      left: -48%;
+      transform: rotate(-90deg);
+      transition: all 0.3s ease;
+    }
+
+    .line-1 {
+      height: 0.3rem;
+      top: -23%;
+      transition: all 0.3s ease;
+    }
+
+    .line-3 {
+      height: 0.3rem;
+      top: 116%;
+    }
+
+    .line-2 {
+      top: 46%;
+      width: 3rem;
+      left: 50%;
+      transform: rotate(-90deg);
+      transition: all 0.3s ease;
+    }
+  }
+}
+
 .nav {
   .line {
     width: 100%;