From b3e7fc740c7cc8b2f1958e8c8c7ef3e6606ee758 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Sun, 27 Mar 2022 18:08:25 +0500
Subject: [PATCH] nav thumg animation added

---
 src/components/global/LoggedNav.js | 12 +++--
 src/pages/Home.js                  |  2 +-
 src/styles/_nav.scss               | 78 ++++++++++++++++++++++++++++++
 3 files changed, 87 insertions(+), 5 deletions(-)

diff --git a/src/components/global/LoggedNav.js b/src/components/global/LoggedNav.js
index b1be8b4..e66efac 100644
--- a/src/components/global/LoggedNav.js
+++ b/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" />
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 300de21..5fb3492 100644
--- a/src/pages/Home.js
+++ b/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>
diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss
index 7bf6d12..56440e7 100644
--- a/src/styles/_nav.scss
+++ b/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%;