diff --git a/package-lock.json b/package-lock.json index 1e5eb2b..faa9718 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,10 +17,14 @@ "@types/react-dom": "^18.0.10", "react": "^18.2.0", "react-dom": "^18.2.0", + "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/react-modal": "^3.13.1" } }, "node_modules/@adobe/css-tools": { @@ -3860,6 +3864,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 +7467,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", @@ -13939,6 +13957,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", @@ -15885,6 +15926,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", diff --git a/package.json b/package.json index 53857da..ce174ec 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@types/react-dom": "^18.0.10", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-modal": "^3.16.1", "react-scripts": "5.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", @@ -40,5 +41,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@types/react-modal": "^3.13.1" } } diff --git a/src/assets/images/close-icon.png b/src/assets/images/close-icon.png new file mode 100644 index 0000000..b8de8d9 Binary files /dev/null and b/src/assets/images/close-icon.png differ diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 2e49ebd..afbb4ea 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,15 +1,23 @@ import React from "react"; -import styles from "./header.module.scss"; +import styles from "./styles.module.scss"; import logo from "../../assets/images/logo.png"; import cart from "../../assets/images/header-cart.png"; import search from "../../assets/images/header-search.png"; import menuButton from "../../assets/images/menu-button.png"; -const Header = () => { +interface HeaderProps { + handleOpenMenuMobileModal: () => void; +} + +const Header = ({ handleOpenMenuMobileModal }: HeaderProps) => { return (
-
diff --git a/src/components/Header/header.module.scss b/src/components/Header/styles.module.scss similarity index 97% rename from src/components/Header/header.module.scss rename to src/components/Header/styles.module.scss index f461105..189e72b 100644 --- a/src/components/Header/header.module.scss +++ b/src/components/Header/styles.module.scss @@ -102,7 +102,7 @@ transition: 0.3s; &:hover { - filter: brightness(80%); + filter: brightness(75%); } } @@ -114,7 +114,7 @@ transition: 0.3s; &:hover { - filter: brightness(85%); + filter: brightness(80%); } img { @@ -176,6 +176,11 @@ width: 28px; height: 22.5px; cursor: pointer; + transition: 0.3s; + + &:hover { + filter: brightness(80%); + } img { width: 28px; diff --git a/src/components/MunuMobileModal/index.tsx b/src/components/MunuMobileModal/index.tsx new file mode 100644 index 0000000..623c703 --- /dev/null +++ b/src/components/MunuMobileModal/index.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import Modal from "react-modal"; +import styles from "./styles.module.scss"; +import closeIcon from "../../assets/images/close-icon.png"; + +interface MenuMobileModalProps { + isOpen: boolean; + onRequestClose: () => void; +} + +const MenuMobileModal = ({ isOpen, onRequestClose }: MenuMobileModalProps) => { + return ( + +
+ + +
+
+
    +
  • Cursos
    • +
  • Saiba Mais
    • +
  • Institucionais
    • +
+
+ + ); +}; + +export { MenuMobileModal }; diff --git a/src/components/MunuMobileModal/styles.module.scss b/src/components/MunuMobileModal/styles.module.scss new file mode 100644 index 0000000..335b1bb --- /dev/null +++ b/src/components/MunuMobileModal/styles.module.scss @@ -0,0 +1,86 @@ +.modal-overlay { + background: rgba(69, 69, 69, 0.7); + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding-right: 36px; +} + +.modal { + background: var(--white-500); + width: 100%; + height: 100%; + max-height: 585px; + position: relative; + + &__header { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + height: 78px; + background: var(--black-500); + padding: 0 16px; + } + + &__logIn { + width: 53px; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: var(--white-500); + background: transparent; + border: none; + transition: 0.3s; + + &:hover { + filter: brightness(75%); + } + } + + &__close { + border: none; + background: transparent; + width: 15px; + height: 15px; + transition: 0.3s; + + &:hover { + filter: brightness(75%); + } + + img { + width: 100%; + height: 100%; + } + } + + &__nav { + display: flex; + padding: 31px 16px 16px 16px; + + ul { + gap: 55px; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: var(--gray-100); + + li { + margin-bottom: 12px; + cursor: pointer; + transition: 0.3s; + + &:hover { + filter: brightness(90%); + } + } + } + } +} diff --git a/src/pages/Institutional/index.tsx b/src/pages/Institutional/index.tsx index 64a2a93..5ff218a 100644 --- a/src/pages/Institutional/index.tsx +++ b/src/pages/Institutional/index.tsx @@ -1,10 +1,29 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { Header } from "../../components/Header"; +import { MenuMobileModal } from "../../components/MunuMobileModal"; const Institutional = () => { + const [menuMobileModal, setMenuMobileModal] = useState(false); + const [windowWidth, setWindowWidth] = useState(0); + + useEffect(() => { + window.addEventListener("resize", windowResize); + function windowResize() { + setWindowWidth(window.innerWidth); + } + + if (windowWidth > 1024) { + setMenuMobileModal(false); + } + }, [windowWidth]); + return ( <> -
+ setMenuMobileModal(false)} + /> +
setMenuMobileModal(true)} /> ); };