diff --git a/src/components/AppBar/AppBar.jsx b/src/components/AppBar/AppBar.jsx index c2c6b5a..3788149 100644 --- 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 ( <> - - - - - - {isLoggedIn ? : } - - + + + + {isLoggedIn ? : } + + + ); }; diff --git a/src/components/AppBar/AppBar.styled.js b/src/components/AppBar/AppBar.styled.js index ba6b6f6..850413f 100644 --- 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 index 105a0b4..0400c78 100644 --- 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 index 4a6b256..8bd7f0b 100644 --- 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 index 276954d..88621b7 100644 --- 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 ( <>
- + + + + {isOpen && } + setOpen(!isOpen)}> + +
diff --git a/src/components/SheredLayout/SheredLayout.styled.js b/src/components/SheredLayout/SheredLayout.styled.js index 98343c9..59f0cf8 100644 --- 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 new file mode 100644 index 0000000..f5cdc63 --- /dev/null +++ b/src/images/burger.svg @@ -0,0 +1,8 @@ + + +burger + + + + +