From eb9a32bc738ba230a19c1ff0f923694902f3dadb Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Mon, 16 Jan 2023 21:32:48 -0300 Subject: [PATCH] feat: criado menu para dispositivos moveis. --- src/assets/svg/closeMenu.svg | 4 + src/assets/svg/{menu.svg => openMenu.svg} | 0 src/components/Header/Menu.css | 89 +++++++++++++++++++++++ src/components/Header/Menu.module.scss | 67 ++++++++++++++++- src/components/Header/Menu.tsx | 18 +++-- src/components/Header/MenuContext.tsx | 24 ++++++ src/components/Header/MenuOpened.tsx | 47 ++++++++++++ src/pages/Header.tsx | 11 ++- src/pages/Home.tsx | 2 + 9 files changed, 250 insertions(+), 12 deletions(-) create mode 100644 src/assets/svg/closeMenu.svg rename src/assets/svg/{menu.svg => openMenu.svg} (100%) create mode 100644 src/components/Header/Menu.css create mode 100644 src/components/Header/MenuContext.tsx create mode 100644 src/components/Header/MenuOpened.tsx diff --git a/src/assets/svg/closeMenu.svg b/src/assets/svg/closeMenu.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/src/assets/svg/closeMenu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/menu.svg b/src/assets/svg/openMenu.svg similarity index 100% rename from src/assets/svg/menu.svg rename to src/assets/svg/openMenu.svg diff --git a/src/components/Header/Menu.css b/src/components/Header/Menu.css new file mode 100644 index 0000000..52b6957 --- /dev/null +++ b/src/components/Header/Menu.css @@ -0,0 +1,89 @@ +.menu-wrapper { + position: absolute; + /* O inset é uma abreviação do top, bottom, left e right juntos. */ + inset: 0; + display: flex; + pointer-events: none; + opacity: 0; +} + +div:has(> .menu-wrapper.false) { + display: none; +} + +@media (max-width: 1024px) { + div:has(> .menu-wrapper.false) { + display: flex; + } +} + +.menu-wrapper.false { + display: none; +} + +.menu-wrapper.opened { + opacity: 1; + pointer-events: all; +} + +.menu-content { + z-index: 2; + width: 90.5%; + height: 585px; +} + +@media (max-width: 1024px) { + .menu-icon { + display: flex; + } +} + +@media (min-width: 280px) and (max-width: 1024px) { + .menu-content { + width: 95.30%; + } +} + +.menu-content-header { + padding: 31px 16px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: #000; +} + +.menu-content-header a { + font-size: 14px; + font-weight: 400; + line-height: 16px; + text-transform: uppercase; + color: #fff; + text-decoration: none; +} + +.menu-content-nav { + background-color: #fff; + height: 100%; + padding: 31px 16px; +} + +.menu-content-nav li { + list-style: none; + cursor: pointer; + font-size: 14px; + font-weight: 500; + line-height: 16px; + text-transform: uppercase; + color: #c4c4c4; +} + +.menu-content-nav li:nth-child(2) { + margin: 12px 0; +} + +.menu-overlay { + position: fixed; + inset: 0; + background-color: #454545B2; + z-index: 1; +} \ No newline at end of file diff --git a/src/components/Header/Menu.module.scss b/src/components/Header/Menu.module.scss index 4854b19..b21e96e 100644 --- a/src/components/Header/Menu.module.scss +++ b/src/components/Header/Menu.module.scss @@ -1,8 +1,71 @@ +@import "../../styles/utils/variables.scss"; + .menu { display: none; - cursor: pointer; @media (max-width: 1024px) { display: flex; } -} \ No newline at end of file + + .menu-header-opacity { + width: 100vw; + min-height: 100%; + opacity: 2; + position: absolute; + top: 0; + left: 0; + background-color: #454545b2; + z-index: 999; + + .menu-header { + position: absolute; + background-color: $black; + width: 90.5%; + + @media (min-width: 280px) and (max-width: 1024px) { + width: 95.3%; + } + + .menu-header-wrapper { + padding: 31px 16px; + display: flex; + justify-content: space-between; + align-items: center; + + div { + a { + font-size: 14px; + font-weight: 400; + line-height: 16px; + text-transform: uppercase; + color: $white; + text-decoration: none; + } + } + } + } + + .menu-nav { + height: 585px; + background-color: $white; + padding: 31px 16px; + + ul { + list-style: none; + + li { + cursor: pointer; + font-size: 14px; + font-weight: 500; + line-height: 16px; + text-transform: uppercase; + color: $primary-500; + + &:nth-child(2) { + margin: 12px 0; + } + } + } + } + } +} diff --git a/src/components/Header/Menu.tsx b/src/components/Header/Menu.tsx index 63a74a4..7803f86 100644 --- a/src/components/Header/Menu.tsx +++ b/src/components/Header/Menu.tsx @@ -1,16 +1,18 @@ -// Bibliotecas -import React from "react"; +import React, { useContext } from "react"; -// Estilos -import styleMenu from "./Menu.module.scss"; +import { MenuContext } from "./MenuContext"; +import { MenuOpened } from "./MenuOpened"; -// Imagens -import menu from "../../assets/svg/menu.svg"; +import openMenu from "../../assets/svg/openMenu.svg"; const Menu = () => { + const { isOpened, setIsOpened } = useContext(MenuContext); + return ( -
- Menu +
+ + + Abrir menu setIsOpened(true)} className="menu-icon"/>
); }; diff --git a/src/components/Header/MenuContext.tsx b/src/components/Header/MenuContext.tsx new file mode 100644 index 0000000..2d22474 --- /dev/null +++ b/src/components/Header/MenuContext.tsx @@ -0,0 +1,24 @@ +import { createContext, useState } from "react"; + +interface MenuContextData { + isOpened: boolean; + setIsOpened: React.Dispatch>; +} + +interface MenuContextChildren { + children: React.ReactNode; +} + +export const MenuContext = createContext({} as MenuContextData); + +export const MenuProvider: React.FC = ({ children }) => { + const [isOpened, setIsOpened] = useState(false); + + return ( + + {children} + + ); +}; \ No newline at end of file diff --git a/src/components/Header/MenuOpened.tsx b/src/components/Header/MenuOpened.tsx new file mode 100644 index 0000000..2058ca9 --- /dev/null +++ b/src/components/Header/MenuOpened.tsx @@ -0,0 +1,47 @@ +import React from "react"; + +import "./Menu.css"; + +import menuClose from "../../assets/svg/closeMenu.svg"; + +interface MenuProps { + isOpened: boolean; + setIsOpened: React.Dispatch>; +} + +const MenuOpened = ({ isOpened, setIsOpened }: MenuProps) => { + return ( +
+
+
+
+ Entrar +
+ +
+ Fechar menu setIsOpened(false)} + /> +
+
+ + +
+ +
setIsOpened(false)} + /> +
+ ); +}; + +export { MenuOpened }; diff --git a/src/pages/Header.tsx b/src/pages/Header.tsx index f6d69bd..5b2498f 100644 --- a/src/pages/Header.tsx +++ b/src/pages/Header.tsx @@ -2,12 +2,16 @@ import React from "react"; // Componentes -import { Menu } from "../components/header/Menu"; +// import { Menu } from "../components/header/Menu"; import { Logo } from "../components/header/Logo"; import { Form } from "../components/header/Form"; import { User } from "../components/header/User"; import { Nav } from "../components/header/Nav"; +import { Menu } from "../components/header/Menu"; + +import { MenuProvider } from "../components/header/MenuContext"; + // Estilos import styleHeaderWrapper from "../components/header/HeaderWrapper.module.scss"; @@ -15,7 +19,10 @@ const Header = () => { return (
- + + + +
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index de1f4b7..29e99a3 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -5,6 +5,8 @@ import { Header } from "./Header"; import { Section } from "./Section"; import { Footer } from "./Footer"; + + function Home() { return (