From 4d52c222a4a76f9e0b6ff19c87690041a05dd6e0 Mon Sep 17 00:00:00 2001 From: Leonardo Date: Fri, 20 Jan 2023 11:36:38 -0300 Subject: [PATCH] feat: cria o header para mobile e telas 4k --- pagina-institucional/src/assets/close.svg | 4 + .../src/components/HamburguerHeader.tsx | 59 +++++++++ .../src/components/HeaderMobile.tsx | 52 ++++++++ pagina-institucional/src/pages/Home.tsx | 2 + .../src/style/HamburguerHeader.module.scss | 120 ++++++++++++++++++ .../src/style/Header.module.scss | 52 +++++++- .../src/style/HeaderBottom.module.scss | 10 ++ .../src/style/HeaderMobile.module.scss | 72 +++++++++++ .../src/style/Main.module.scss | 3 +- 9 files changed, 371 insertions(+), 3 deletions(-) create mode 100644 pagina-institucional/src/assets/close.svg create mode 100644 pagina-institucional/src/components/HamburguerHeader.tsx create mode 100644 pagina-institucional/src/components/HeaderMobile.tsx create mode 100644 pagina-institucional/src/style/HamburguerHeader.module.scss create mode 100644 pagina-institucional/src/style/HeaderMobile.module.scss diff --git a/pagina-institucional/src/assets/close.svg b/pagina-institucional/src/assets/close.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/pagina-institucional/src/assets/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/pagina-institucional/src/components/HamburguerHeader.tsx b/pagina-institucional/src/components/HamburguerHeader.tsx new file mode 100644 index 0000000..06303ec --- /dev/null +++ b/pagina-institucional/src/components/HamburguerHeader.tsx @@ -0,0 +1,59 @@ +import React, { useState, useEffect } from "react"; +import close from "../assets/close.svg"; +import styles from "../style/HamburguerHeader.module.scss"; + +const MenuContext = React.createContext<{ + isOpen: boolean; + setIsOpen: (isOpen: boolean) => void; +}>({ isOpen: false, setIsOpen: () => {} }); + +const HamburguerHeader: React.FC = () => { + const [isOpen, setIsOpen] = useState(false); + + useEffect(() => { + if (isOpen) { + document.body.classList.add(styles["menuOpen"]); + } else { + document.body.classList.remove(styles["menuOpen"]); + } + }, [isOpen]); + + return ( + +
+ +
+ +
+ +

Entrar

+ +
+ +
+
+ + ); +}; + +export { HamburguerHeader }; diff --git a/pagina-institucional/src/components/HeaderMobile.tsx b/pagina-institucional/src/components/HeaderMobile.tsx new file mode 100644 index 0000000..65c1b49 --- /dev/null +++ b/pagina-institucional/src/components/HeaderMobile.tsx @@ -0,0 +1,52 @@ +import React from "react"; +import { HamburguerHeader } from "./HamburguerHeader"; +import logom3 from "../assets/Logo-M3Academy.png"; +import cart from "../assets/cart.png"; +import searchImage from "../assets/search-img.png"; +import styles from "../style/HeaderMobile.module.scss"; + +const HeaderMobile = () => { + return ( +
+
+
+ +
+ +
+ + logo m3 academy + +
+ +
+ + imagem de um carrinho + +
+
+
+ +
+ + Lupa + +
+
+
+ ); +}; + +export { HeaderMobile }; diff --git a/pagina-institucional/src/pages/Home.tsx b/pagina-institucional/src/pages/Home.tsx index f6ee8f2..a7ef1a1 100644 --- a/pagina-institucional/src/pages/Home.tsx +++ b/pagina-institucional/src/pages/Home.tsx @@ -4,6 +4,7 @@ import { BrowserRouter } from "react-router-dom"; import { Header } from "../components/Header"; import { HeaderBottom } from "../components/HeaderBottom"; import { Main } from "../components/Main"; +import { HeaderMobile } from "../components/HeaderMobile"; import { Newsletter } from "../components/Newsletter"; import { FooterMenu } from "../components/Footer/FooterMenu"; import { FooterBottom } from "../components/Footer/FooterBottom"; @@ -11,6 +12,7 @@ import { FooterBottom } from "../components/Footer/FooterBottom"; const Home = () => { return ( <> +
diff --git a/pagina-institucional/src/style/HamburguerHeader.module.scss b/pagina-institucional/src/style/HamburguerHeader.module.scss new file mode 100644 index 0000000..a2bfe1d --- /dev/null +++ b/pagina-institucional/src/style/HamburguerHeader.module.scss @@ -0,0 +1,120 @@ +.hamburgerMenu { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 30px; + height: 22px; + padding: 5px 0; + background: transparent; + border: none; +} + +.buttonOpen { + color: transparent; + background: transparent; + border: none; + /*width: 0; + padding: 0; + margin: 0; + border-width: 0;*/ +} + +.hamburgerLine { + width: 30px; + height: 2px; + background: white; + margin: 4px 0; + cursor: pointer; +} + +.hamburgerMenu.open .hamburgerLine:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); +} + +.hamburgerMenu.open .hamburgerLine:nth-child(2) { + opacity: 0; +} + +.hamburgerMenu.open .hamburgerLine:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); +} + +.menuOpen { + background-color: rgba(69, 69, 69, 0.7); +} + +.hamburgerIcon { + font-size: 24px; + padding: 8px; +} + +.background { + background-color: white; + position: absolute; + top: 0; + left: 0; + width: 96.48%; + height: 585px; + display: none; +} + +.open { + display: block; +} + +.background button { + position: absolute; + top: 10px; + right: 16px; + font-size: 32px; + padding: 8px; + color: black; + cursor: pointer; + background-color: transparent; + border: none; +} + +.enter { + background: black; + margin: 0; + height: 78px; + display: flex; + align-self: center; +} +p, +.linkEnter { + margin: 0 0 0 8px; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: #ffffff; + text-decoration: none; + display: flex; + align-self: center; + text-align: center; +} + +.background ul { + list-style: none; + margin-top: 31px; + margin-left: 16px; + padding: 0; + color: black; +} + +a { + text-decoration: none; +} + +li { + margin-bottom: 12px; + text-decoration: none; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: #c4c4c4; +} diff --git a/pagina-institucional/src/style/Header.module.scss b/pagina-institucional/src/style/Header.module.scss index 7706f2d..5b251c6 100644 --- a/pagina-institucional/src/style/Header.module.scss +++ b/pagina-institucional/src/style/Header.module.scss @@ -4,6 +4,14 @@ border-bottom: 1px solid #c4c4c4; display: grid; + @media (min-width: 2500px) { + height: 101px; + } + + @media (max-width: 1024px) { + display: none; + } + .headerBox { margin-left: 100px; margin-right: 100px; @@ -19,6 +27,10 @@ width: 136px; height: 25.86px; display: block; + @media (min-width: 2500px) { + width: 265.62px; + height: 50.5px; + } } } @@ -29,20 +41,45 @@ border: 2px solid #f0f0f0; border-radius: 5px; height: 32px; - width: 264x; + width: 264px; + + @media (min-width: 2500px) { + width: 512.62px; + height: 57px; + } .searchtext { border: none; padding: 8px 16px; outline: 0; + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: #c6c6c6; + + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + color: #c4c4c4; + } } .searchlupa { width: 18px; height: 18px; + position: relative; margin-right: 16px; margin-top: 7px; margin-bottom: 7px; + @media (min-width: 2500px) { + width: 35.15px; + height: 35.15px; + margin-top: 11px; + } } } @@ -54,15 +91,26 @@ .cartimg { width: 28px; height: 28px; + @media (min-width: 2500px) { + width: 54.68px; + height: 54.68px; + } } .textlink { display: flex; align-self: center; text-transform: uppercase; - color: white; + color: #ffffff; text-align: center; text-decoration: none; + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + color: #ffffff; + } } } } diff --git a/pagina-institucional/src/style/HeaderBottom.module.scss b/pagina-institucional/src/style/HeaderBottom.module.scss index 782029b..0509f56 100644 --- a/pagina-institucional/src/style/HeaderBottom.module.scss +++ b/pagina-institucional/src/style/HeaderBottom.module.scss @@ -9,6 +9,9 @@ @media (max-width: 1024px) { display: none; } + @media (min-width: 1024px) { + height: 61px; + } } .textlinks1, @@ -20,6 +23,13 @@ color: white; text-align: center; text-decoration: none; + + @media (min-width: 2500px) { + font-style: normal; + font-weight: 500; + font-size: 28px; + line-height: 33px; + } } .textcontainer { diff --git a/pagina-institucional/src/style/HeaderMobile.module.scss b/pagina-institucional/src/style/HeaderMobile.module.scss new file mode 100644 index 0000000..1844d40 --- /dev/null +++ b/pagina-institucional/src/style/HeaderMobile.module.scss @@ -0,0 +1,72 @@ +.Header_Wrapper { + @media (min-width: 1025px) { + display: none; + } + display: grid; + background: black; + height: 139px; + + .HeaderBox { + margin: 0 16px; + display: flex; + justify-content: space-between; + + .BoxMenu { + display: flex; + align-self: center; + } + + .BoxLogo { + display: flex; + align-self: center; + .HeaderLogo { + width: 136px; + display: block; + } + } + .BoxCart { + display: flex; + align-self: center; + .HeaderCart { + width: 28px; + height: 28px; + display: block; + } + } + } + + .Boxsearch { + left: 35px; + } + + .searchbox { + display: flex; + align-self: center; + background: #ffffff; + border: 2px solid #f0f0f0; + border-radius: 5px; + height: 32px; + width: 96.485%; + margin-left: auto; + margin-right: auto; + + @media (max-width: 375px) { + width: 90.4%; + } + + .searchtext { + border: none; + padding: 8px 16px; + outline: 0; + width: 100%; + } + + .searchlupa { + width: 18px; + height: 18px; + margin-right: 16px; + margin-top: 7px; + margin-bottom: 7px; + } + } +} diff --git a/pagina-institucional/src/style/Main.module.scss b/pagina-institucional/src/style/Main.module.scss index c5b7f7a..2080239 100644 --- a/pagina-institucional/src/style/Main.module.scss +++ b/pagina-institucional/src/style/Main.module.scss @@ -35,7 +35,7 @@ height: 512px; } -.mainIcon .active { +.mainIcon { margin-top: 30px; margin-left: 100px; display: flex; @@ -45,6 +45,7 @@ font-weight: 400; font-size: 12px; line-height: 14px; + color: #c4c4c4; } }