add mob menu

MarynaOzkara · Dec 16, 2023 · 98c0d30 · 98c0d30
1 parent 9cef763
commit 98c0d30
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 37 deletions.
diff --git a/src/components/AppBar/AppBar.jsx b/src/components/AppBar/AppBar.jsx
@@ -1,26 +1,26 @@
 import React from 'react';
 import MoviesNav from './MoviesNav';
-import { ReactComponent as Logo } from 'images/logo.svg';
-import { LogoLink } from './AppBar.styled';
+// import { ReactComponent as Logo } from 'images/logo.svg';
+// import { LogoLink } from './AppBar.styled';
 import { useSelector } from 'react-redux';
 import { selectIsLoggedIn } from 'redux/selectors';
 import UserMenu from 'components/UserMenu/UserMenu';
 import AuthNav from 'components/AuthNav/AuthNav';
-import { AuthWrap } from './AppBar.styled';
+import { AuthWrap, MobNav } from './AppBar.styled';
 import ModeToggle from 'components/ModeToggle/ModeToggle';
 
 const AppBar = () => {
   const isLoggedIn = useSelector(selectIsLoggedIn);
+
   return (
     <>
-      <MoviesNav />
-      <LogoLink to="/">
-        <Logo />
-      </LogoLink>
-      <AuthWrap>
-        {isLoggedIn ? <UserMenu /> : <AuthNav />}
-        <ModeToggle />
-      </AuthWrap>
+      <MobNav>
+        <MoviesNav />
+        <AuthWrap>
+          {isLoggedIn ? <UserMenu /> : <AuthNav />}
+          <ModeToggle />
+        </AuthWrap>
+      </MobNav>
     </>
   );
 };

diff --git a/src/components/AppBar/AppBar.styled.js b/src/components/AppBar/AppBar.styled.js
@@ -3,32 +3,69 @@ import { NavLink } from 'react-router-dom';
 
 export const Navigation = styled.nav`
   display: flex;
+  flex-direction: column;
   gap: 20px;
+  @media (min-width: 767px) {
+    flex-direction: row;
+  }
 `;
 export const NavItem = styled.li`
   list-style: none;
 `;
 export const Link = styled(NavLink)`
   text-decoration: none;
-  color: ${props => props.theme.acsent};
   font-size: 20px;
-  padding: 4px 16px;
-  border-radius: 4px;
   transition: 500ms cubic-bezier(0.4, 0, 0.2, 1);
+  color: ${props => props.theme.brend};
+  @media (min-width: 767px) {
+    color: ${props => props.theme.acsent};
+    padding: 4px 16px;
+    border-radius: 4px;
 
-  &.active {
-    color: ${props => props.theme.brend};
-    background-color: ${props => props.theme.acsent};
-  }
-  &:hover,
-  :focus {
-    color: ${props => props.theme.reverseBrend};
+    &.active {
+      color: ${props => props.theme.brend};
+      background-color: ${props => props.theme.acsent};
+    }
+    &:hover,
+    :focus {
+      color: ${props => props.theme.reverseBrend};
+    }
   }
 `;
 export const LogoLink = styled(NavLink)`
   text-decoration: none;
 `;
 export const AuthWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  @media (min-width: 767px) {
+    flex-direction: row;
+  }
+`;
+export const MobNav = styled.div`
+  text-align: center;
+  background-color: white;
+  padding: 40px 30px;
+  color: tomato;
+  z-index: 999;
+  position: absolute;
+  top: 74px;
+  right: 0;
+  width: 100%;
+  height: 100%;
   display: flex;
   gap: 20px;
+  flex-direction: column;
+  transition: transform 0.3s linear;
+  &.active {
+    transform: translateX(100%);
+    overflow: hidden;
+  }
+  @media (min-width: 767px) {
+    padding: 0px;
+    background-color: transparent;
+    position: static;
+    flex-direction: row;
+  }
 `;
diff --git a/src/components/AuthNav/AuthNav.styled.js b/src/components/AuthNav/AuthNav.styled.js
@@ -3,25 +3,32 @@ import { NavLink } from 'react-router-dom';
 
 export const Autorization = styled.div`
   display: flex;
+  flex-direction: column;
   gap: 20px;
+  @media (min-width: 767px) {
+    flex-direction: row;
+  }
 `;
 export const NavItem = styled.li`
   list-style: none;
 `;
 export const Link = styled(NavLink)`
   text-decoration: none;
-  color: ${props => props.theme.acsent};
   font-size: 20px;
-  padding: 4px 16px;
-  border-radius: 4px;
-  transition: 500ms cubic-bezier(0.4, 0, 0.2, 1);
+  color: ${props => props.theme.brend};
+  @media (min-width: 767px) {
+    color: ${props => props.theme.acsent};
 
-  &.active {
-    color: ${props => props.theme.brend};
-    background-color: ${props => props.theme.acsent};
-  }
-  &:hover,
-  :focus {
-    color: ${props => props.theme.reverseBrend};
+    padding: 4px 16px;
+    border-radius: 4px;
+    transition: 500ms cubic-bezier(0.4, 0, 0.2, 1);
+    &.active {
+      color: ${props => props.theme.brend};
+      background-color: ${props => props.theme.acsent};
+    }
+    &:hover,
+    :focus {
+      color: ${props => props.theme.reverseBrend};
+    }
   }
 `;
diff --git a/src/components/ModeToggle/ModeToggle.styled.js b/src/components/ModeToggle/ModeToggle.styled.js
@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 export const ToggleWrap = styled.div`
   margin-right: 20px;
-  display: flex;
+  /* display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: center; */
   position: relative;
 `;
 export const ToggleLabel = styled.label`

diff --git a/src/components/SheredLayout/SheredLayout.jsx b/src/components/SheredLayout/SheredLayout.jsx
@@ -1,15 +1,31 @@
 import { Outlet } from 'react-router-dom';
-import { HeaderWrap, Container, Header } from './SheredLayout.styled';
-import { Suspense } from 'react';
+import {
+  HeaderWrap,
+  Container,
+  Header,
+  NavWrap,
+  BurgerBtn,
+} from './SheredLayout.styled';
+import { Suspense, useState } from 'react';
 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';
 
 const SheredLayout = () => {
+  const [isOpen, setOpen] = useState();
   return (
     <>
       <Header>
         <HeaderWrap>
-          <AppBar />
+          <LogoLink to="/">
+            <Logo />
+          </LogoLink>
+          <NavWrap>{isOpen && <AppBar />}</NavWrap>
+          <BurgerBtn onClick={() => setOpen(!isOpen)}>
+            <BurgerMenu />
+          </BurgerBtn>
         </HeaderWrap>
       </Header>
       <Container>

diff --git a/src/components/SheredLayout/SheredLayout.styled.js b/src/components/SheredLayout/SheredLayout.styled.js
@@ -19,3 +19,40 @@ export const Header = styled.header`
   background-color: ${props => props.theme.brend};
   box-shadow: var(--shadow);
 `;
+export const NavWrap = styled.div``;
+// export const NavWrap = styled.div`
+//   text-align: center;
+//   background-color: white;
+//   padding: 40px 30px;
+//   color: tomato;
+//   z-index: 999;
+//   position: fixed;
+//   top: 74px;
+//   right: 0;
+//   width: 100%;
+//   height: 100%;
+//   transition: transform 0.3s linear;
+//   &.active {
+//     transform: translateX(100%);
+//   }
+//   @media (min-width: 767px) {
+//     padding: 0px;
+//     background-color: transparent;
+//     position: static;
+//   }
+// `;
+export const BurgerBtn = styled.button`
+  display: block;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  margin-left: auto;
+  border: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  @media (min-width: 767px) {
+    display: none;
+  }
+`;
diff --git a/src/images/burger.svg b/src/images/burger.svg