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",

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"
   }
 }

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 (
     <header className={styles["header"]}>
       <div className={styles["header__content"]}>
-        <button type="button" className={styles["menu-mobile-button"]}>
+        <button
+          type="button"
+          className={styles["menu-mobile-button"]}
+          onClick={handleOpenMenuMobileModal}
+        >
           <img src={menuButton} alt="Menu mobile" />
         </button>
         <div className={styles["logo"]}>

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;

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 (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      overlayClassName={styles["modal-overlay"]}
+      className={styles["modal"]}
+      ariaHideApp={false}
+    >
+      <div className={styles["modal__header"]}>
+        <button className={styles["modal__logIn"]} type="button">
+          ENTRAR
+        </button>
+        <button
+          type="button"
+          className={styles["modal__close"]}
+          onClick={onRequestClose}
+        >
+          <img src={closeIcon} alt="Fechar" />
+        </button>
+      </div>
+      <div className={styles["modal__nav"]}>
+        <ul>
+          <li>Cursos</li>
+          <li>Saiba Mais</li>
+          <li>Institucionais</li>
+        </ul>
+      </div>
+    </Modal>
+  );
+};
+
+export { MenuMobileModal };

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%);
+        }
+      }
+    }
+  }
+}

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 (
     <>
-      <Header />
+      <MenuMobileModal
+        isOpen={menuMobileModal}
+        onRequestClose={() => setMenuMobileModal(false)}
+      />
+      <Header handleOpenMenuMobileModal={() => setMenuMobileModal(true)} />
     </>
   );
 };