Merge pull request 'development' (#1) from development into main

Reviewed-on: #1

src/App.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import "./App.css";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Header from "./components/Header";
@@ -8,7 +7,6 @@ import Footer from "./components/Footer";
 import FixedIcons from "./components/FixedIcon";
 import Up from "./assets/svg/Up.svg";
 import Wpp from "./assets/svg/Wpp.svg";
-import { url } from "inspector";
 
 const router = createBrowserRouter([
   {

src/assets/svg/Exit.svg

@@ -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>

src/components/AsideMenu/index.tsx

@@ -0,0 +1,39 @@
+import styles from "./styles.module.scss";
+import Exit from "../../assets/svg/Exit.svg";
+import React, { useState } from "react";
+
+export default function AsideMenu({
+  isMenuOpen,
+  setMenuOpen,
+}: {
+  isMenuOpen: boolean;
+  setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  return (
+    <div
+      className={`${styles.blackout} ${!isMenuOpen ? styles.invisible : ""}`}
+      onClick={() => {
+        setMenuOpen(!isMenuOpen);
+      }}
+    >
+      <div className={`${styles.container} ${!isMenuOpen ? styles.aside : ""}`}>
+        <div className={styles.buttonsTop}>
+          <button className={styles.buttonEntrar}>Entrar</button>
+          <button
+            onClick={() => {
+              setMenuOpen(false);
+            }}
+            className={styles.buttonExit}
+          >
+            <img src={Exit} alt="sair" />
+          </button>
+        </div>
+        <div className={styles.buttonsBottom}>
+          <button className={styles.secondButton}>CURSOS</button>
+          <button className={styles.secondButton}>SAIBA MAIS</button>
+          <button className={styles.secondButton}>INSTITUCIONAIS</button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/AsideMenu/styles.module.scss

@@ -0,0 +1,70 @@
+.blackout {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(69, 69, 69, 0.7);
+
+  .container {
+    position: absolute;
+    transition: 0.2s;
+    left: 0%;
+    right: 3.52%;
+    top: 0%;
+    bottom: 57.02%;
+    background: white;
+
+    .buttonsTop {
+      display: flex;
+      background: black;
+      height: 78px;
+      align-items: center;
+      justify-content: space-between;
+
+      .buttonEntrar {
+        border: 0;
+        background: black;
+        color: white;
+        font-family: "Roboto";
+        font-weight: 400;
+        font-size: 14px;
+        margin-left: 16px;
+        text-transform: uppercase;
+      }
+
+      .buttonExit {
+        background: black;
+        border: 0;
+        width: 15px;
+        float: right;
+        margin-right: 16px;
+      }
+    }
+
+    .buttonsBottom {
+      display: flex;
+      flex-direction: column;
+      margin-top: 31px;
+      gap: 12px;
+
+      .secondButton {
+        border: 0;
+        background: white;
+        font-family: "Roboto";
+        font-weight: 500;
+        font-size: 14px;
+        color: #c4c4c4;
+        text-align: start;
+        padding-left: 16px;
+      }
+    }
+  }
+
+  .aside {
+    transform: translateX(-100%);
+  }
+}
+
+.invisible {
+  visibility: hidden;
+  pointer-events: none;
+}

src/components/Header/index.tsx

@@ -1,15 +1,24 @@
 import styles from "./styles.module.scss";
-import Logo from "../../assets/img/logoM3.png";
+import Logo from "../../assets/svg/logoM3.svg";
 import Lupa from "../../assets/svg/lupa.svg";
 import Cart from "../../assets/svg/cart.svg";
 import Menu from "../../assets/svg/menu.svg";
+import AsideMenu from "../AsideMenu";
+import { useState } from "react";
 
 export default function Header() {
+  const [isMenuOpen, setMenuOpen] = useState(false);
   return (
     <>
+      <AsideMenu isMenuOpen={isMenuOpen} setMenuOpen={setMenuOpen} />
       <header className={styles.Header}>
         <div className={styles.firstDiv}>
-          <button>
+          <button
+            className={styles.menuHamburguer}
+            onClick={() => {
+              setMenuOpen(true);
+            }}
+          >
             <img src={Menu} alt="menu" />
           </button>
           <img className={styles.logo} src={Logo} alt="logo m3" />

src/components/Header/styles.module.scss

@@ -5,7 +5,6 @@
 
   .firstDiv {
     display: flex;
-    align-items: center;
     justify-content: space-between;
 
     .searchDiv {
@@ -44,7 +43,7 @@
     .headerButton {
       display: flex;
       gap: 55px;
-      padding-right: 7.81vw;
+      margin-right: 100px;
       height: 28px;
 
       .buttonEntrar {
@@ -76,7 +75,15 @@
 
     .logo {
       display: flex;
-      padding-left: 7.81vw;
+      margin-left: 100px;
+      width: 10.63vw;
+    }
+
+    .menuHamburguer {
+      border: 0;
+      background: black;
+      padding-left: 16px;
+      display: none;
     }
   }
 }
@@ -99,3 +106,75 @@
     cursor: pointer;
   }
 }
+
+@media screen and (max-width: 1024px) {
+  .Header {
+    height: 139px;
+
+    .menuHamburguer {
+      display: flex !important;
+    }
+
+    .logo {
+      width: 13.28vw !important;
+      margin-left: 0 !important;
+    }
+
+    .buttonEntrar {
+      display: none !important;
+    }
+
+    .searchDiv {
+      width: 96.88% !important;
+      position: absolute !important;
+      top: 78px !important;
+      left: 16px !important;
+      right: 16px !important;
+    }
+
+    .headerButton {
+      margin-right: 16px !important;
+    }
+  }
+  .secondDiv {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 2500px) {
+  .searchDiv {
+    height: 57px !important;
+
+    input {
+      font-size: 28px !important;
+      height: 57px !important;
+    }
+
+    img {
+      width: 1.41vw !important;
+    }
+  }
+
+  .headerButton {
+    height: 54px !important;
+
+    .buttonEntrar {
+      font-size: 28px !important;
+      height: 54px !important;
+    }
+
+    .cartButton {
+      img {
+        height: 54px !important;
+      }
+    }
+  }
+
+  .secondDiv {
+    padding-left: 100px !important;
+
+    .secondHeaderButton {
+      font-size: 28px !important;
+    }
+  }
+}

src/pages/Institutional/styles.module.scss

@@ -225,7 +225,7 @@
   }
 
   .formDiv {
-    width: 96.98% !important;
+    width: 100% !important;
     margin: 0 16px !important;
 
     .formH2 {