From 2f26aeafb8d44109694e9dc9c8c7028e3a510271 Mon Sep 17 00:00:00 2001 From: Patrick Date: Wed, 18 Jan 2023 22:37:07 -0300 Subject: [PATCH] feat: adiciona menu hamburger --- package-lock.json | 87 ++++++++++++++++++ package.json | 4 + src/components/header/assets/menu.png | Bin 0 -> 217 bytes .../header-hamburger.module.scss | 48 ++++++++++ .../header-hamburger/header-hamburger.tsx | 32 +++++++ .../header-hamburger/menu-aberto.module.scss | 19 ++++ .../header/header-hamburger/menu-aberto.tsx | 22 +++++ src/components/header/header.tsx | 9 ++ 8 files changed, 221 insertions(+) create mode 100644 src/components/header/assets/menu.png create mode 100644 src/components/header/header-hamburger/header-hamburger.module.scss create mode 100644 src/components/header/header-hamburger/header-hamburger.tsx create mode 100644 src/components/header/header-hamburger/menu-aberto.module.scss create mode 100644 src/components/header/header-hamburger/menu-aberto.tsx diff --git a/package-lock.json b/package-lock.json index b27fc00..d8399c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index ddcf1ce..933e02b 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/src/components/header/assets/menu.png b/src/components/header/assets/menu.png new file mode 100644 index 0000000000000000000000000000000000000000..2b91465017ad0283f5b7ed3dbaa75926bc3fcc45 GIT binary patch literal 217 zcmeAS@N?(olHy`uVBq!ia0vp^GC(ZO!3HEHPU(jODb50q$YKTtZeb8+WSBKa0w~B> z9OUlAuz9ExGkCiC KxvX void; +} + +export function HeaderHamburger({ openModal }: HamburgerProps) { + return ( +
+
+ + + +
+
+ + + {" "} + + +
+
+ ); +} diff --git a/src/components/header/header-hamburger/menu-aberto.module.scss b/src/components/header/header-hamburger/menu-aberto.module.scss new file mode 100644 index 0000000..dc49cb9 --- /dev/null +++ b/src/components/header/header-hamburger/menu-aberto.module.scss @@ -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; +} diff --git a/src/components/header/header-hamburger/menu-aberto.tsx b/src/components/header/header-hamburger/menu-aberto.tsx new file mode 100644 index 0000000..bcac44a --- /dev/null +++ b/src/components/header/header-hamburger/menu-aberto.tsx @@ -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 ( + +

Hello World

+ + ); +} diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index da79248..4685a89 100644 --- a/src/components/header/header.tsx +++ b/src/components/header/header.tsx @@ -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 ( <>
@@ -33,6 +37,11 @@ export function Header() {
+ setOpenModal(true)} /> + setOpenModal(false)} + />