add close btn

MarynaOzkara · Dec 17, 2023 · b6618c0 · b6618c0
1 parent 98c0d30
commit b6618c0
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-hook-form": "^7.48.2",
-    "react-icons": "^4.11.0",
+    "react-icons": "^4.12.0",
     "react-loader-spinner": "^5.4.5",
     "react-player": "^2.13.0",
     "react-redux": "^8.1.3",

diff --git a/src/components/SheredLayout/SheredLayout.jsx b/src/components/SheredLayout/SheredLayout.jsx
@@ -11,7 +11,7 @@ import Loader from 'components/Loader/Loader';
 import AppBar from 'components/AppBar/AppBar';
 import { ReactComponent as Logo } from 'images/logo.svg';
 import { LogoLink } from 'components/AppBar/AppBar.styled';
-import { ReactComponent as BurgerMenu } from 'images/burger.svg';
+import { SlMenu, SlClose } from 'react-icons/sl';
 
 const SheredLayout = () => {
   const [isOpen, setOpen] = useState();
@@ -22,9 +22,15 @@ const SheredLayout = () => {
           <LogoLink to="/">
             <Logo />
           </LogoLink>
-          <NavWrap>{isOpen && <AppBar />}</NavWrap>
+          <NavWrap>
+            <AppBar />
+          </NavWrap>
           <BurgerBtn onClick={() => setOpen(!isOpen)}>
-            <BurgerMenu />
+            {!isOpen ? (
+              <SlMenu size={24} color="white" />
+            ) : (
+              <SlClose size={24} color="white" />
+            )}
           </BurgerBtn>
         </HeaderWrap>
       </Header>