forked from M3-Academy/desafio-react-e-typescript
feat: cria o header para mobile e telas 4k
This commit is contained in:
parent
1b5c3ffa0c
commit
4d52c222a4
4
pagina-institucional/src/assets/close.svg
Normal file
4
pagina-institucional/src/assets/close.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.2284 1.28215L1.22996 10.9942C0.550673 11.6541 0.568968 12.7044 1.27083 13.3401C1.97268 13.9759 3.09232 13.9564 3.77161 13.2966L13.77 3.58449C14.4493 2.92466 14.431 1.87436 13.7292 1.23858C13.0273 0.602806 11.9077 0.622311 11.2284 1.28215Z" fill="white"/>
|
||||
<path d="M1.65213 3.40819L10.8751 13.7186C11.5082 14.4263 12.6262 14.5239 13.3724 13.9366C14.1185 13.3493 14.2102 12.2995 13.5771 11.5918L4.35414 1.28143C3.72107 0.573715 2.603 0.476092 1.85686 1.06338C1.11072 1.65067 1.01906 2.70048 1.65213 3.40819Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 638 B |
59
pagina-institucional/src/components/HamburguerHeader.tsx
Normal file
59
pagina-institucional/src/components/HamburguerHeader.tsx
Normal file
@ -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 (
|
||||
<MenuContext.Provider value={{ isOpen, setIsOpen }}>
|
||||
<div className={`${styles.hamburgerMenu} ${isOpen ? styles.open : ""}`}>
|
||||
<button
|
||||
className={styles.buttonOpen}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
<div className={styles.hamburgerLine}></div>
|
||||
<div className={styles.hamburgerLine}></div>
|
||||
<div className={styles.hamburgerLine}></div>
|
||||
<i className="fas fa-hamburger"></i>
|
||||
</button>
|
||||
<div className={`${styles.background} ${isOpen ? styles.open : ""}`}>
|
||||
<button onClick={() => setIsOpen(false)}>
|
||||
<img className={styles.close} src={close} alt="fechar" />
|
||||
</button>
|
||||
<div className={styles.enter}>
|
||||
<a className={styles.linkEnter} href="/">
|
||||
<p>Entrar</p>
|
||||
</a>
|
||||
</div>
|
||||
<ul>
|
||||
<a href="/">
|
||||
<li>CURSOS</li>
|
||||
</a>
|
||||
<a href="/">
|
||||
<li>SAIBA MAIS</li>
|
||||
</a>
|
||||
<a href="/">
|
||||
<li>INSTITUCIONAL</li>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</MenuContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export { HamburguerHeader };
|
||||
52
pagina-institucional/src/components/HeaderMobile.tsx
Normal file
52
pagina-institucional/src/components/HeaderMobile.tsx
Normal file
@ -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 (
|
||||
<div className={styles.Header_Wrapper}>
|
||||
<div className={styles.HeaderBox}>
|
||||
<div className={styles.BoxMenu}>
|
||||
<HamburguerHeader />
|
||||
</div>
|
||||
|
||||
<div className={styles.BoxLogo}>
|
||||
<a href="/">
|
||||
<img
|
||||
className={styles.HeaderLogo}
|
||||
src={logom3}
|
||||
alt="logo m3 academy"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className={styles.BoxCart}>
|
||||
<a href="/">
|
||||
<img
|
||||
className={styles.HeaderCart}
|
||||
src={cart}
|
||||
alt="imagem de um carrinho"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.searchbox}>
|
||||
<input
|
||||
className={styles.searchtext}
|
||||
type="text"
|
||||
placeholder="Buscar..."
|
||||
/>
|
||||
<div className={styles.Boxsearch}>
|
||||
<a href="/">
|
||||
<img src={searchImage} className={styles.searchlupa} alt="Lupa" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { HeaderMobile };
|
||||
@ -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 (
|
||||
<>
|
||||
<HeaderMobile />
|
||||
<Header />
|
||||
<HeaderBottom />
|
||||
<Main />
|
||||
|
||||
120
pagina-institucional/src/style/HamburguerHeader.module.scss
Normal file
120
pagina-institucional/src/style/HamburguerHeader.module.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
72
pagina-institucional/src/style/HeaderMobile.module.scss
Normal file
72
pagina-institucional/src/style/HeaderMobile.module.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user