forked from M3-Academy/desafio-react-e-typescript
feat: adiciona menu hamburger
This commit is contained in:
parent
ab5cc06ed8
commit
2f26aeafb8
87
package-lock.json
generated
87
package-lock.json
generated
@ -19,6 +19,7 @@
|
||||
"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",
|
||||
"scss": "^0.2.4",
|
||||
@ -26,6 +27,9 @@
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11",
|
||||
"yup-phone": "^1.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react-modal": "^3.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/css-tools": {
|
||||
@ -3875,6 +3879,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",
|
||||
@ -7491,6 +7504,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",
|
||||
@ -14249,6 +14267,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",
|
||||
@ -16301,6 +16342,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",
|
||||
@ -19912,6 +19961,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",
|
||||
@ -22561,6 +22619,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",
|
||||
@ -27280,6 +27343,22 @@
|
||||
"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",
|
||||
@ -28800,6 +28879,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,7 @@
|
||||
"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",
|
||||
"scss": "^0.2.4",
|
||||
@ -45,5 +46,8 @@
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react-modal": "^3.13.1"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
src/components/header/assets/menu.png
Normal file
BIN
src/components/header/assets/menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 217 B |
@ -0,0 +1,48 @@
|
||||
.headerHamburger {
|
||||
height: 139px;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
display: none;
|
||||
}
|
||||
.headerHamburgerTop {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 25px 16px 30px 16px;
|
||||
|
||||
.btnModal {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.headerHamburgerPlaceholder {
|
||||
padding: 0 16px 0 16px;
|
||||
|
||||
.lupaIcon {
|
||||
/* position: relative;
|
||||
left: 955px;
|
||||
top: -27px; */
|
||||
}
|
||||
|
||||
& input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border: 2px solid #f0f0f0;
|
||||
border-radius: 5px;
|
||||
height: 36px;
|
||||
padding: 10px 16px;
|
||||
|
||||
&::placeholder {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
32
src/components/header/header-hamburger/header-hamburger.tsx
Normal file
32
src/components/header/header-hamburger/header-hamburger.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import style from "./header-hamburger.module.scss";
|
||||
import menu from "../assets/menu.png";
|
||||
import m3logo from "../assets/logo.png";
|
||||
import cart from "../assets/cart1.png";
|
||||
import lupa from "../assets/lupa.png";
|
||||
import React from "react";
|
||||
|
||||
interface HamburgerProps {
|
||||
openModal: () => void;
|
||||
}
|
||||
|
||||
export function HeaderHamburger({ openModal }: HamburgerProps) {
|
||||
return (
|
||||
<div className={style.headerHamburger}>
|
||||
<div className={style.headerHamburgerTop}>
|
||||
<button onClick={openModal} className={style.btnModal}>
|
||||
{" "}
|
||||
<img src={menu} alt="" />
|
||||
</button>
|
||||
<img src={m3logo} alt="" />
|
||||
<img src={cart} alt="" />
|
||||
</div>
|
||||
<div className={style.headerHamburgerPlaceholder}>
|
||||
<input type="text" placeholder="Buscar..." />
|
||||
<a href="/">
|
||||
{" "}
|
||||
<img className={style.lupaIcon} src={lupa} alt=""></img>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
.menuModal {
|
||||
background: white;
|
||||
width: 100%;
|
||||
height: 585px;
|
||||
}
|
||||
|
||||
.modalOverlay {
|
||||
background: rgba(69, 69, 69, 0.7);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.cscs {
|
||||
font-size: 50px;
|
||||
}
|
||||
22
src/components/header/header-hamburger/menu-aberto.tsx
Normal file
22
src/components/header/header-hamburger/menu-aberto.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import React from "react";
|
||||
import Modal from "react-modal";
|
||||
import style from "./menu-aberto.module.scss";
|
||||
|
||||
interface MenuHamburgerProps {
|
||||
isOpen: boolean;
|
||||
onRequestClose: () => void;
|
||||
}
|
||||
|
||||
export function MenuAberto({ isOpen, onRequestClose }: MenuHamburgerProps) {
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onRequestClose={onRequestClose}
|
||||
overlayClassName={style.modalOverlay}
|
||||
className={style.menuModal}
|
||||
ariaHideApp={false}
|
||||
>
|
||||
<h1 className={style.cscs}>Hello World</h1>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@ -1,5 +1,8 @@
|
||||
import { HeaderMenu } from "./header-menu/header-menu";
|
||||
import { HeaderRoute } from "./header-route/header-route";
|
||||
import { HeaderHamburger } from "./header-hamburger/header-hamburger";
|
||||
import { MenuAberto } from "./header-hamburger/menu-aberto";
|
||||
import { useState } from "react";
|
||||
|
||||
import style from "./header.module.scss";
|
||||
import logoM3 from "./assets/logo.png";
|
||||
@ -7,6 +10,7 @@ import cartBuy from "./assets/cart1.png";
|
||||
import searchIcon from "./assets/lupa.png";
|
||||
|
||||
export function Header() {
|
||||
const [openModal, setOpenModal] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<header className={style.header}>
|
||||
@ -33,6 +37,11 @@ export function Header() {
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<HeaderHamburger openModal={() => setOpenModal(true)} />
|
||||
<MenuAberto
|
||||
isOpen={openModal}
|
||||
onRequestClose={() => setOpenModal(false)}
|
||||
/>
|
||||
<HeaderMenu />
|
||||
<HeaderRoute />
|
||||
</>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user