final mob menu

MarynaOzkara · Dec 17, 2023 · 046127f · 046127f
1 parent a575ac7
commit 046127f
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 17 deletions.
diff --git a/src/components/AuthNav/AuthNav.jsx b/src/components/AuthNav/AuthNav.jsx
@@ -1,15 +1,19 @@
 import React from 'react';
 import { NavItem, Link, Autorization } from './AuthNav.styled';
 
-const AuthNav = () => {
+const AuthNav = ({ closeMobBar }) => {
   return (
     <>
       <Autorization>
         <NavItem>
-          <Link to="/signup">Sign up</Link>
+          <Link to="/signup" onClick={closeMobBar}>
+            Sign up
+          </Link>
         </NavItem>
         <NavItem>
-          <Link to="/login">Log in</Link>
+          <Link to="/login" onClick={closeMobBar}>
+            Log in
+          </Link>
         </NavItem>
       </Autorization>
     </>

diff --git a/src/components/AuthNav/AuthNav.styled.js b/src/components/AuthNav/AuthNav.styled.js
@@ -4,9 +4,10 @@ import { NavLink } from 'react-router-dom';
 export const Autorization = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 30px;
   @media (min-width: 767px) {
     flex-direction: row;
+    gap: 20px;
   }
 `;
 export const NavItem = styled.li`

diff --git a/src/components/MobBar/MobBar.jsx b/src/components/MobBar/MobBar.jsx
@@ -6,21 +6,27 @@ import { useSelector } from 'react-redux';
 import { selectIsLoggedIn } from 'redux/selectors';
 import ModeToggle from 'components/ModeToggle/ModeToggle';
 
-const MobBar = () => {
+const MobBar = ({ closeMobBar }) => {
   const isLoggedIn = useSelector(selectIsLoggedIn);
   return (
     <>
       <MobNav>
         <MobItem>
-          <MobLink to="/">Home</MobLink>
+          <MobLink to="/" onClick={closeMobBar}>
+            Home
+          </MobLink>
         </MobItem>
         <MobItem>
-          <MobLink to="/movies">Movies</MobLink>
+          <MobLink to="/movies" onClick={closeMobBar}>
+            Movies
+          </MobLink>
         </MobItem>
         <MobItem>
-          <MobLink to="/profile">Profile</MobLink>
+          <MobLink to="/profile" onClick={closeMobBar}>
+            Profile
+          </MobLink>
         </MobItem>
-        {isLoggedIn ? <UserMenu /> : <AuthNav />}
+        {isLoggedIn ? <UserMenu /> : <AuthNav closeMobBar={closeMobBar} />}
         <ModeToggle />
       </MobNav>
     </>

diff --git a/src/components/MobBar/MobBar.styled.js b/src/components/MobBar/MobBar.styled.js
@@ -28,14 +28,9 @@ export const MobNav = styled.div`
   width: 100%;
   height: 100%;
   display: flex;
-  gap: 20px;
+  gap: 30px;
   flex-direction: column;
-  /* transform: translateX(-100%);
-  transition: transform 0.3s linear;
-  &.active {
-    transform: translateX(0);
-    overflow: hidden;
-  } */
+
   @media (min-width: 767px) {
     display: none;
   }

diff --git a/src/components/SheredLayout/SheredLayout.jsx b/src/components/SheredLayout/SheredLayout.jsx
@@ -17,6 +17,7 @@ import MobBar from 'components/MobBar/MobBar';
 
 const SheredLayout = () => {
   const [isOpen, setOpen] = useState();
+  const closeMobBar = () => setOpen(!isOpen);
   return (
     <>
       <Header>
@@ -35,7 +36,7 @@ const SheredLayout = () => {
             </BurgerBtn>
           </NavWrap>
         </HeaderWrap>
-        {isOpen && <MobBar />}
+        {isOpen && <MobBar closeMobBar={closeMobBar} />}
       </Header>
       <Container>
         <Suspense fallback={<Loader />}>