forked from M3-Academy/desafio-react-e-typescript
feat: Cria menu hambúrguer para versão mobile
This commit is contained in:
parent
7bf43268a3
commit
a6fd0182ac
103
package-lock.json
generated
103
package-lock.json
generated
@ -17,10 +17,16 @@
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-headless-accordion": "^1.0.2",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/babel__core": "^7.1.20",
|
||||
"@types/react-modal": "^3.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/css-tools": {
|
||||
@ -3860,6 +3866,15 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-modal": {
|
||||
"version": "3.13.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
|
||||
"integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/resolve": {
|
||||
"version": "1.17.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
|
||||
@ -7454,6 +7469,11 @@
|
||||
"url": "https://github.com/sindresorhus/execa?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/exenv": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
|
||||
"integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
|
||||
},
|
||||
"node_modules/exit": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
|
||||
@ -13934,11 +13954,42 @@
|
||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
|
||||
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
|
||||
},
|
||||
"node_modules/react-headless-accordion": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
|
||||
"integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==",
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"node_modules/react-modal": {
|
||||
"version": "3.16.1",
|
||||
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
|
||||
"integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
|
||||
"dependencies": {
|
||||
"exenv": "^1.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-lifecycles-compat": "^3.0.0",
|
||||
"warning": "^4.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
|
||||
"react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
@ -15885,6 +15936,14 @@
|
||||
"makeerror": "1.0.12"
|
||||
}
|
||||
},
|
||||
"node_modules/warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/watchpack": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
|
||||
@ -19453,6 +19512,15 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/react-modal": {
|
||||
"version": "3.13.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
|
||||
"integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/resolve": {
|
||||
"version": "1.17.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
|
||||
@ -22089,6 +22157,11 @@
|
||||
"strip-final-newline": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"exenv": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
|
||||
"integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
|
||||
},
|
||||
"exit": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
|
||||
@ -26590,11 +26663,33 @@
|
||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
|
||||
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
|
||||
},
|
||||
"react-headless-accordion": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
|
||||
"integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==",
|
||||
"requires": {}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"react-modal": {
|
||||
"version": "3.16.1",
|
||||
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
|
||||
"integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
|
||||
"requires": {
|
||||
"exenv": "^1.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-lifecycles-compat": "^3.0.0",
|
||||
"warning": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
@ -28025,6 +28120,14 @@
|
||||
"makeerror": "1.0.12"
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
|
||||
|
||||
@ -12,6 +12,8 @@
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-headless-accordion": "^1.0.2",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.4",
|
||||
@ -40,5 +42,9 @@
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/babel__core": "^7.1.20",
|
||||
"@types/react-modal": "^3.13.1"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@ -24,7 +24,7 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>M3 Academy</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
@ -2,6 +2,9 @@ import React from "react";
|
||||
|
||||
import styles from "../footer/style.module.scss";
|
||||
|
||||
// Accordion
|
||||
import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "react-headless-accordion";
|
||||
|
||||
// Social media icons
|
||||
|
||||
import Facebook from "../../assets/svgs/facebook-icon.svg";
|
||||
@ -45,6 +48,34 @@ const Footer = () => {
|
||||
</section>
|
||||
|
||||
<section className={styles["footer-top"]}>
|
||||
<div className={styles["accordion-menu"]}>
|
||||
<Accordion>
|
||||
<AccordionItem>
|
||||
<AccordionHeader className={styles["accordion-menu__title"]}>
|
||||
<h3>Institucional</h3>
|
||||
</AccordionHeader>
|
||||
<AccordionBody>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">Quem Somos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Política de Privacidade</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Segurança</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className={styles["line"]} href="/">
|
||||
Seja um Revendedor
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</AccordionBody>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
|
||||
<div className={styles["footer-top__menu-list"]}>
|
||||
<div className={styles["menu"]}>
|
||||
<h3>Institucional</h3>
|
||||
@ -203,7 +234,13 @@ const Footer = () => {
|
||||
</section>
|
||||
|
||||
<div className={styles["whatsapp-button"]}>
|
||||
<a href="https://wa.me/5579995657055?text=Olá! Tudo bem? Quero conhecer o M3 Academy." rel="noreferrer" target={"_blank"}><img src={Whatsapp} alt="Fale conosco pelo Whatsapp" /></a>
|
||||
<a
|
||||
href="https://wa.me/5579995657055?text=Olá! Tudo bem? Quero conhecer o M3 Academy."
|
||||
rel="noreferrer"
|
||||
target={"_blank"}
|
||||
>
|
||||
<img src={Whatsapp} alt="Fale conosco pelo Whatsapp" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -109,25 +109,56 @@
|
||||
}
|
||||
|
||||
.footer-top {
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.accordion-menu {
|
||||
|
||||
&__title {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: capitalize;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: var(--white);
|
||||
border: none;
|
||||
|
||||
h3 {
|
||||
&::after {
|
||||
content: "+";
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__menu-list {
|
||||
display: flex;
|
||||
margin: 38px 100px 38px;
|
||||
justify-content: space-between;
|
||||
|
||||
// @media (min-width: 2500px) {
|
||||
// }
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
margin: 24px 16px 18px 16px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
//FOOTER MOBILE COMO ESTAVA ANTES
|
||||
|
||||
// @media (max-width: 1024px) {
|
||||
// flex-direction: column;
|
||||
// justify-content: flex-start;
|
||||
// margin: 24px 16px 18px 16px;
|
||||
// }
|
||||
|
||||
.menu {
|
||||
h3 {
|
||||
font-weight: 500;
|
||||
@ -142,6 +173,8 @@
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
//FOOTER MOBILE COMO ESTAVA ANTES
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
text-transform: capitalize;
|
||||
margin: 0 0 12px;
|
||||
@ -188,6 +221,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
// FOOTER MOBILE COMO ESTAVA ANTES
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
@ -247,7 +282,9 @@
|
||||
// gap: 110.41px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 92%;
|
||||
// width: 92%;
|
||||
width: 100%;
|
||||
margin: 0 100px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@ -277,7 +314,9 @@
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 22.15%;
|
||||
// width: 22.15%;
|
||||
width: 467px;
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
}
|
||||
@ -324,7 +363,6 @@
|
||||
// }
|
||||
|
||||
.creditcard {
|
||||
|
||||
img {
|
||||
width: 36px;
|
||||
|
||||
@ -332,11 +370,11 @@
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
width: 30px;
|
||||
@media (max-width: 767px) {
|
||||
// width: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.vtex {
|
||||
@ -349,8 +387,9 @@
|
||||
width: 106px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
width: 45px;
|
||||
@media (max-width: 767px) {
|
||||
// width: 45px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -378,7 +417,7 @@
|
||||
padding: 0;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 404.17px
|
||||
width: 404.17px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@ -447,8 +486,8 @@
|
||||
// margin-right: 8px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -463,14 +502,19 @@
|
||||
z-index: 9999;
|
||||
|
||||
img {
|
||||
@media (max-width: 1024px) {
|
||||
width: 34px;
|
||||
width: 34px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
bottom: 27px;
|
||||
bottom: 27.31px;
|
||||
right: 17px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
bottom: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
53
src/components/header/MenuModal/index.tsx
Normal file
53
src/components/header/MenuModal/index.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import React from "react";
|
||||
|
||||
// Modal
|
||||
|
||||
import Modal from "react-modal";
|
||||
import styles from "../MenuModal/style.module.scss";
|
||||
|
||||
// Botão fechar
|
||||
|
||||
import CloseButton from "../../../assets/svgs/close.svg";
|
||||
|
||||
interface BurgerMenuProps {
|
||||
isOpen: boolean;
|
||||
onRequestClose: () => void;
|
||||
}
|
||||
|
||||
function BurgerMenu({ isOpen, onRequestClose }: BurgerMenuProps) {
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onRequestClose={onRequestClose}
|
||||
overlayClassName={styles["overlay"]}
|
||||
className={styles["menu"]}
|
||||
ariaHideApp={false}
|
||||
>
|
||||
<div className={styles["login"]}>
|
||||
<a href="/">
|
||||
<h2>Entrar</h2>
|
||||
</a>
|
||||
|
||||
<button className={styles["login__close-menu"]} >
|
||||
<img src={CloseButton} alt="Fechar menu" onClick={onRequestClose} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className={styles["menu-open"]}>
|
||||
<ul className={styles["menu-list"]}>
|
||||
<li>
|
||||
<a href="/">Cursos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Saiba mais</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Institucionais</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export { BurgerMenu };
|
||||
59
src/components/header/MenuModal/style.module.scss
Normal file
59
src/components/header/MenuModal/style.module.scss
Normal file
@ -0,0 +1,59 @@
|
||||
.login {
|
||||
background: var(--black);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__close-menu {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
margin: 31px 16px;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 19px 4px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--light-gray-500);
|
||||
}
|
||||
|
||||
li {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
background: white;
|
||||
width: 100%;
|
||||
height: 585px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: rgba(69, 69, 69, 0.7);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-right: 36px;
|
||||
}
|
||||
@ -6,30 +6,22 @@ import Search from "../../assets/svgs/search.svg";
|
||||
import miniCart from "../../assets/svgs/minicart.svg";
|
||||
import BurgerMenu from "../../assets/svgs/menu.svg";
|
||||
|
||||
interface MenuProps {
|
||||
handleOpenModal:() => void;
|
||||
}
|
||||
|
||||
const Header = () => {
|
||||
|
||||
const [active, setMode] = useState(false);
|
||||
|
||||
const ToggleMode = () => {
|
||||
setMode(!active);
|
||||
};
|
||||
const Header = ({handleOpenModal}:MenuProps) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles["header-top"]}>
|
||||
<div className={styles["header-top__wrapper"]}>
|
||||
|
||||
<nav className={active? styles["header-top__menu-active"] : styles["header-top__menu"]} onClick={ToggleMode}>
|
||||
<button className={styles["burger-menu"]}>
|
||||
<img src={BurgerMenu} alt="Menu" />
|
||||
<div className={styles["menu-mobile"]}>
|
||||
<button className={styles["menu-mobile__burger-menu"]} onClick={handleOpenModal}>
|
||||
<img src={BurgerMenu} alt="Abrir menu" />
|
||||
|
||||
</button>
|
||||
<ul className={active ? styles["menu menu-open"] : styles["menu menu-closed"]}>
|
||||
<li>Cursos</li>
|
||||
<li>Saiba mais</li>
|
||||
<li>Institucionais</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<a className={styles["header-top__logo"]} href="/">
|
||||
<img src={logom3Academy} alt="Logo M3 Academy" />
|
||||
@ -69,15 +61,15 @@ const Header = () => {
|
||||
</nav>
|
||||
|
||||
<div className={styles["header-bottom__search-box"]}>
|
||||
<input
|
||||
className="search-box-text"
|
||||
type="text"
|
||||
placeholder="Buscar..."
|
||||
/>
|
||||
<button className={styles["search-button"]}>
|
||||
<img src={Search} alt="" />
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
className="search-box-text"
|
||||
type="text"
|
||||
placeholder="Buscar..."
|
||||
/>
|
||||
<button className={styles["search-button"]}>
|
||||
<img src={Search} alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -9,61 +9,20 @@
|
||||
|
||||
// Menu hambúrguer
|
||||
|
||||
&__menu {
|
||||
display: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
||||
button {
|
||||
.menu-mobile {
|
||||
@media (min-width: 1025px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__burger-menu {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
||||
&:active {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 1024px) {
|
||||
display: block;
|
||||
// background: transparent;
|
||||
// border: none;
|
||||
// padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
display: block;
|
||||
// background: transparent;
|
||||
// border: none;
|
||||
// padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: block;
|
||||
// background: transparent;
|
||||
// border: none;
|
||||
// padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: var(--light-gray-500);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Parte de cima do header
|
||||
|
||||
&__wrapper {
|
||||
width: 84.38%;
|
||||
margin: auto;
|
||||
@ -94,6 +53,15 @@
|
||||
img {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 1024px) {
|
||||
|
||||
@ -1,15 +1,19 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { Header } from "../components/header";
|
||||
import { Main } from "../components/main";
|
||||
import { Footer } from "../components/footer";
|
||||
import { BurgerMenu } from "../components/header/MenuModal";
|
||||
|
||||
const Institucional = () => {
|
||||
const [openModal, setOpenModal] = useState(false)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<>
|
||||
<Header handleOpenModal={() => setOpenModal(true)}/>
|
||||
<BurgerMenu isOpen={openModal} onRequestClose={() => setOpenModal(false)} />
|
||||
<Main />
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user