forked from M3-Academy/desafio-react-e-typescript
Feat(Header):Cria Responsividade do Header para Tv e Mobile, e cria o MenuHamburguer do Mobile
This commit is contained in:
parent
af0f4d992f
commit
ba36ffc50f
148
desafio/package-lock.json
generated
148
desafio/package-lock.json
generated
@ -19,11 +19,16 @@
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-headless-accordion": "^1.0.2",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-router-dom": "^6.6.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react-modal": "^3.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/css-tools": {
|
||||
@ -3078,6 +3083,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
|
||||
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
@ -3868,6 +3881,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",
|
||||
@ -7462,6 +7484,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",
|
||||
@ -14024,6 +14051,29 @@
|
||||
"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",
|
||||
@ -14032,6 +14082,36 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
|
||||
"integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
|
||||
"integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.2.1",
|
||||
"react-router": "6.6.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8",
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-scripts": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
|
||||
@ -15980,6 +16060,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",
|
||||
@ -18967,6 +19055,11 @@
|
||||
"source-map": "^0.7.3"
|
||||
}
|
||||
},
|
||||
"@remix-run/router": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
|
||||
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ=="
|
||||
},
|
||||
"@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
@ -19570,6 +19663,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",
|
||||
@ -22206,6 +22308,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",
|
||||
@ -26779,11 +26886,44 @@
|
||||
"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",
|
||||
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
|
||||
},
|
||||
"react-router": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
|
||||
"integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
|
||||
"requires": {
|
||||
"@remix-run/router": "1.2.1"
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
|
||||
"integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
|
||||
"requires": {
|
||||
"@remix-run/router": "1.2.1",
|
||||
"react-router": "6.6.2"
|
||||
}
|
||||
},
|
||||
"react-scripts": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
|
||||
@ -28219,6 +28359,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",
|
||||
|
||||
@ -14,6 +14,8 @@
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-headless-accordion": "^1.0.2",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-router-dom": "^6.6.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.4",
|
||||
@ -43,5 +45,8 @@
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react-modal": "^3.13.1"
|
||||
}
|
||||
}
|
||||
|
||||
4
desafio/src/assets/svgs/CloseMenuMobile.svg
Normal file
4
desafio/src/assets/svgs/CloseMenuMobile.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 |
5
desafio/src/assets/svgs/MenuMobile.svg
Normal file
5
desafio/src/assets/svgs/MenuMobile.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M26.25 19.0001H1.75002C0.783509 19.0001 0 19.7836 0 20.7501C0 21.7166 0.783508 22.5001 1.75002 22.5001H26.25C27.2165 22.5001 28 21.7166 28 20.7501C28 19.7836 27.2165 19.0001 26.25 19.0001Z" fill="white"/>
|
||||
<path d="M26.25 9.5H1.75002C0.783509 9.5 0 10.2835 0 11.25C0 12.2165 0.783508 13 1.75002 13H26.25C27.2165 13 28 12.2165 28 11.25C28 10.2835 27.2165 9.5 26.25 9.5Z" fill="white"/>
|
||||
<path d="M26.25 0H1.75002C0.783509 0 0 0.783509 0 1.75002C0 2.71652 0.783508 3.50003 1.75002 3.50003H26.25C27.2165 3.50003 28 2.71652 28 1.75002C28 0.783509 27.2165 0 26.25 0Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 688 B |
@ -27,10 +27,10 @@ import linkedinIcon from "../assets/svgs/linkedinIcon.svg"
|
||||
|
||||
const Footer = () => {
|
||||
return <footer className={styles["page-footer"]}>
|
||||
<FooterDesk/>
|
||||
<FooterPlatforms/>
|
||||
</footer>
|
||||
}
|
||||
const FooterDesk : any = () => {
|
||||
const FooterPlatforms : any = () => {
|
||||
if (window.innerWidth > 1024){
|
||||
return <>
|
||||
<FooterNewslleter/>
|
||||
|
||||
@ -1,18 +1,32 @@
|
||||
import React from "react";
|
||||
|
||||
import { ModalMenu } from "./ModalMenu";
|
||||
import styles from "../scss/partials/header.module.scss"
|
||||
|
||||
import logo from "../assets/imgs/Image-LogoM3Academy.png"
|
||||
import iconLupa from "../assets/svgs/Vector-Search.svg"
|
||||
import iconCart from "../assets/svgs/Cart-Icon.svg"
|
||||
import menuMobile from "../assets/svgs/MenuMobile.svg"
|
||||
|
||||
const Header = () => {
|
||||
return <header className={styles["page-header"]}>
|
||||
<HeaderTop/>
|
||||
<HeaderBottom/>
|
||||
<HeaderPlatforms/>
|
||||
</header>
|
||||
}
|
||||
|
||||
const HeaderPlatforms : any = () => {
|
||||
if (window.innerWidth > 1024){
|
||||
return <>
|
||||
<HeaderTop/>
|
||||
<HeaderBottom/>
|
||||
</>
|
||||
}else if (window.innerWidth <= 1024){
|
||||
return <>
|
||||
<HeaderTopMobile/>
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
||||
const HeaderTop = () => {
|
||||
return (
|
||||
<div className={styles["page-header__top-wrapper"]}>
|
||||
@ -29,6 +43,25 @@ const HeaderTop = () => {
|
||||
</div>
|
||||
)
|
||||
};
|
||||
const HeaderTopMobile = () => {
|
||||
return (
|
||||
<div className={styles["page-header__top-wrapper"]}>
|
||||
<ModalMenu/>
|
||||
<div className={styles["page-header__top-wrapper__logo-wrapper"]}>
|
||||
<a className={styles["page-header__top-wrapper__logo-wrapper__link"]} href="/"><img className={styles["page-header__top-wrapper__logo-wrapper__link__logo"]} src= { logo } alt="LogoM3" /></a>
|
||||
</div>
|
||||
<div className={styles["page-header__top-wrapper__login-cart-wrapper"]}>
|
||||
<a className={styles["page-header__top-wrapper__login-cart-wrapper__login"]} href="">Entrar</a>
|
||||
<img className={styles["page-header__top-wrapper__login-cart-wrapper__cart"]} src={ iconCart } alt="Icone Carrinho" />
|
||||
</div>
|
||||
<div className={styles["page-header__top-wrapper__search-bar"]}>
|
||||
<input className={styles["page-header__top-wrapper__search-bar__input"]} type="text" placeholder="Buscar..." />
|
||||
<button className={styles["page-header__top-wrapper__search-bar__input-button"]}><img className={styles["page-header__top-wrapper__search-bar__input-button__img"]} src= { iconLupa } alt="Icone Busca" /></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
};
|
||||
const HeaderBottom = () => {
|
||||
return (
|
||||
<div className={styles["page-header__bottom-wrapper"]}>
|
||||
|
||||
44
desafio/src/components/ModalMenu.tsx
Normal file
44
desafio/src/components/ModalMenu.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React, {useState} from "react";
|
||||
import Modal from 'react-modal';
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import menuMobile from "../assets/svgs/MenuMobile.svg"
|
||||
import closeMenuMobile from "../assets/svgs/CloseMenuMobile.svg"
|
||||
|
||||
Modal.setAppElement('#root');
|
||||
|
||||
const ModalMenu = () => {
|
||||
|
||||
const [modalIsOpen, setIsOpen] = React.useState(false);
|
||||
|
||||
function openModal() {
|
||||
setIsOpen(true);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
setIsOpen(false);
|
||||
}
|
||||
|
||||
return <div className="containerModalMenuHambuerguer">
|
||||
<button onClick={openModal} className="buttonModalOpen"><img src= { menuMobile } alt="HambuerguerMenuIcon" /></button>
|
||||
<Modal
|
||||
isOpen={modalIsOpen}
|
||||
onRequestClose={closeModal}
|
||||
contentLabel="Example Modal"
|
||||
overlayClassName="modal-overlay"
|
||||
className="modal-content"
|
||||
>
|
||||
<div className="div1">
|
||||
<a href="">Entrar</a>
|
||||
</div>
|
||||
<div className="div2">
|
||||
<Link to={"/cursos"}>Cursos</Link>
|
||||
<Link to={"/saibamais"}>Saiba Mais</Link>
|
||||
<Link to={"/institucionais"}>Institucional</Link>
|
||||
</div>
|
||||
<button onClick={closeModal} className="buttonModalClose"><img src= { closeMenuMobile } alt="HambuerguerMenuIcon" /></button>
|
||||
</Modal>
|
||||
</div>
|
||||
}
|
||||
|
||||
export { ModalMenu };
|
||||
@ -3,10 +3,23 @@ import ReactDOM from 'react-dom/client';
|
||||
import './scss/global.scss';
|
||||
import './scss/utils/variables.scss';
|
||||
|
||||
import {BrowserRouter, Routes, Route} from "react-router-dom"
|
||||
import {Home} from "./pages/Home"
|
||||
import { Cursos } from './pages/Cursos';
|
||||
import { Saibamais } from './pages/Saibamais';
|
||||
import { Institucionais } from './pages/Institucionais';
|
||||
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
root.render( <Home /> );
|
||||
root.render(
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path='/' element={<Home/>}/>
|
||||
<Route path='/cursos' element={<Cursos/>}/>
|
||||
<Route path='/saibamais' element={<Saibamais/>}/>
|
||||
<Route path='/institucionais' element={<Institucionais/>}/>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
13
desafio/src/pages/Cursos.tsx
Normal file
13
desafio/src/pages/Cursos.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from "react";
|
||||
|
||||
import { Header } from "../components/Header"
|
||||
import { Footer } from "../components/Footer"
|
||||
|
||||
const Cursos = () => {
|
||||
return <>
|
||||
<Header/>
|
||||
<Footer/>
|
||||
</>;
|
||||
};
|
||||
|
||||
export { Cursos };
|
||||
13
desafio/src/pages/Institucionais.tsx
Normal file
13
desafio/src/pages/Institucionais.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from "react";
|
||||
|
||||
import { Header } from "../components/Header"
|
||||
import { Footer } from "../components/Footer"
|
||||
|
||||
const Institucionais = () => {
|
||||
return <>
|
||||
<Header/>
|
||||
<Footer/>
|
||||
</>;
|
||||
};
|
||||
|
||||
export { Institucionais };
|
||||
13
desafio/src/pages/Saibamais.tsx
Normal file
13
desafio/src/pages/Saibamais.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from "react";
|
||||
|
||||
import { Header } from "../components/Header"
|
||||
import { Footer } from "../components/Footer"
|
||||
|
||||
const Saibamais = () => {
|
||||
return <>
|
||||
<Header/>
|
||||
<Footer/>
|
||||
</>;
|
||||
};
|
||||
|
||||
export { Saibamais };
|
||||
@ -11,3 +11,82 @@ code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.containerModalMenuHambuerguer{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.div1,
|
||||
.div2{
|
||||
a{
|
||||
font-family: var(--font-roboto);
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.div1{
|
||||
display: flex;
|
||||
background-color: var(--black1);
|
||||
box-sizing: border-box;
|
||||
padding: 31px 0 31px 16px;
|
||||
|
||||
a{
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.div2{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 31px 0 0 16px;
|
||||
|
||||
a{
|
||||
font-weight: 500;
|
||||
color: #C4C4C4;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonModalClose{
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
outline: 0;
|
||||
}
|
||||
.buttonModalOpen{
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.modal-overlay{
|
||||
background-color: rgba(69, 69, 69, 0.7);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content{
|
||||
width: 96.48%;
|
||||
background-color: var(--white1);
|
||||
position: relative;
|
||||
max-height: 585px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
78
desafio/src/scss/partials/ModalMenu.scss
Normal file
78
desafio/src/scss/partials/ModalMenu.scss
Normal file
@ -0,0 +1,78 @@
|
||||
// .Container{
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
|
||||
// }
|
||||
|
||||
// .div1,
|
||||
// .div2{
|
||||
// a{
|
||||
// font-family: var(--font-roboto);
|
||||
// font-style: normal;
|
||||
// font-weight: 500;
|
||||
// font-size: 14px;
|
||||
// line-height: 16px;
|
||||
// text-transform: uppercase;
|
||||
// text-decoration: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .div1{
|
||||
// display: flex;
|
||||
// background-color: var(--black1);
|
||||
// box-sizing: border-box;
|
||||
// padding: 31px 0 31px 16px;
|
||||
|
||||
// a{
|
||||
// font-weight: 400;
|
||||
// color: #FFFFFF;
|
||||
// }
|
||||
// }
|
||||
// .div2{
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// gap: 12px;
|
||||
// padding: 31px 0 0 16px;
|
||||
|
||||
// a{
|
||||
// font-weight: 500;
|
||||
// color: #C4C4C4;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .buttonModalClose{
|
||||
// position: absolute;
|
||||
// top: 32px;
|
||||
// right: 16px;
|
||||
// border: none;
|
||||
// background: transparent;
|
||||
// padding: 0;
|
||||
// display: flex;
|
||||
// outline: 0;
|
||||
// }
|
||||
// .buttonModalOpen{
|
||||
// border: none;
|
||||
// background: transparent;
|
||||
// padding: 0;
|
||||
// display: flex;
|
||||
// outline: 0;
|
||||
// }
|
||||
|
||||
// .modal-overlay{
|
||||
// background-color: rgba(69, 69, 69, 0.7);
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// right: 0;
|
||||
// left: 0;
|
||||
// display: flex;
|
||||
// }
|
||||
|
||||
// .modal-content{
|
||||
// width: 96.48%;
|
||||
// background-color: var(--white1);
|
||||
// position: relative;
|
||||
// max-height: 585px;
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
@ -9,15 +9,40 @@
|
||||
width: 84.38%;
|
||||
margin: 0 auto;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
width: 100%;
|
||||
padding: 22px 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__logo-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 38.7%;
|
||||
|
||||
&__link{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 38.7%;
|
||||
min-width: 136px;
|
||||
|
||||
&__logo{
|
||||
width: 100%;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__logo{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__menuMobile{
|
||||
|
||||
&__Icone{
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__search-bar{
|
||||
display: flex;
|
||||
@ -32,19 +57,36 @@
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
grid-area: 2 / 1 / 2 / 4;
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
padding: 7px 16px;
|
||||
}
|
||||
|
||||
&__input{
|
||||
border: none;
|
||||
width: 100%;
|
||||
color: var(--grey1);
|
||||
color: var(--black1);
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
outline: 0;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
&::placeholder{
|
||||
font-family: var(--font-roboto);
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: var(--grey1);
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -77,11 +119,21 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
width: 14.72%;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__cart{
|
||||
width: 7.78%;
|
||||
margin-left: 55px;
|
||||
min-width: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -89,6 +141,12 @@
|
||||
&__bottom-wrapper{
|
||||
border-top: 1px solid var(--grey2);
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
}
|
||||
|
||||
&-content{
|
||||
width: 84.38%;
|
||||
margin: 0 auto;
|
||||
@ -111,6 +169,11 @@
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user