feat: Criação Menu Toggle Tablet/Mobile

public/assets/icons/closeMenu.svg

@@ -0,0 +1,4 @@
+<svg 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/Header/Header.tsx

@@ -1,38 +1,54 @@
 import MenuNav from "../MenuNav/MenuNav";
+import { MenuToggle } from "../MenuToggle/MenuToggle";
+
+import { useState } from "react";
+
 import styles from "./header.module.scss";
 
 export default function Header() {
-  return (
-    <header>
-      <div className={styles.containerHeader}>
-        <div className={styles.menuToggle}>
-          <div className={styles.toggleOne}></div>
-          <div className={styles.toggleTwo}></div>
-          <div className={styles.toggleThree}></div>
-        </div>
-        <img
-          className={styles.logo}
-          src="/assets/images/Logo-M3Academy.png"
-          alt="Logo M3 Academy"
-        />
-        <form className={styles.formSearch} action="#">
-          <input
-            type="search"
-            id="search"
-            name="search"
-            placeholder="Buscar..."
-          />
-          <button type="submit">
-            <img src="/assets/icons/search-icon.svg" alt="Buscar" />
-          </button>
-        </form>
-        <div className={styles.entrarContainer}>
-          <span>Entrar</span>
-          <img src="/assets/icons/cart-icon.svg" alt="Carrinho" />
-        </div>
-      </div>
+  const [showMenuToggle, setShowMenuToggle] = useState(false);
 
-      <MenuNav />
-    </header>
+  const openMenuToggle = () => {
+    setShowMenuToggle((prev) => !prev);
+  };
+
+  return (
+    <>
+      <header>
+        <div className={styles.containerHeader}>
+          <div onClick={openMenuToggle} className={styles.menuToggle}>
+            <div className={styles.toggleOne}></div>
+            <div className={styles.toggleTwo}></div>
+            <div className={styles.toggleThree}></div>
+          </div>
+          <img
+            className={styles.logo}
+            src="/assets/images/Logo-M3Academy.png"
+            alt="Logo M3 Academy"
+          />
+          <form className={styles.formSearch} action="#">
+            <input
+              type="search"
+              id="search"
+              name="search"
+              placeholder="Buscar..."
+            />
+            <button type="submit">
+              <img src="/assets/icons/search-icon.svg" alt="Buscar" />
+            </button>
+          </form>
+          <div className={styles.entrarContainer}>
+            <span>Entrar</span>
+            <img src="/assets/icons/cart-icon.svg" alt="Carrinho" />
+          </div>
+        </div>
+
+        {window.screen.width > 1024 && <MenuNav />}
+      </header>
+      <MenuToggle
+        showMenuToggle={showMenuToggle}
+        setShowMenuToggle={setShowMenuToggle}
+      />
+    </>
   );
 }

src/components/Header/header.module.scss

@@ -33,7 +33,7 @@
     input {
       background: transparent;
       padding: 0 10px 0 16px;
-      flex: 1;
+      width: 100%;
 
       font-weight: 400;
       font-size: 14px;
@@ -94,6 +94,8 @@
       display: block;
       width: 28px;
 
+      cursor: pointer;
+
       .toggleOne,
       .toggleTwo,
       .toggleThree {

src/components/MenuNav/menuNav.module.scss

@@ -21,6 +21,18 @@
 
 @media screen and (max-width: 1024px) {
   .menuNav {
-    display: none;
+    border: 0;
+    padding: 0 16px;
+
+    background: transparent;
+    flex-direction: column;
+    gap: 12px;
+
+    margin-top: 31px;
+
+    li {
+      color: var(--gray-400);
+      padding: 0;
+    }
   }
 }

src/components/MenuToggle/MenuToggle.tsx

@@ -0,0 +1,34 @@
+import React, { SetStateAction } from "react";
+import MenuNav from "../MenuNav/MenuNav";
+
+import styles from "./menuToggle.module.scss";
+
+interface PropsMenuTogle {
+  showMenuToggle: boolean;
+  setShowMenuToggle: React.Dispatch<SetStateAction<boolean>>;
+}
+
+export const MenuToggle = ({
+  showMenuToggle,
+  setShowMenuToggle,
+}: PropsMenuTogle) => {
+  return (
+    <>
+      {showMenuToggle ? (
+        <div className={styles.containerMenuToggle}>
+          <div className={styles.contentMenuToogle}>
+            <div className={styles.headerMenuToggle}>
+              <a href="/">Entrar</a>
+              <img
+                onClick={() => setShowMenuToggle((prev) => !prev)}
+                src="/assets/icons/closeMenu.svg"
+                alt="Fechar Menu"
+              />
+            </div>
+            <MenuNav />
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+};

src/components/MenuToggle/menuToggle.module.scss

@@ -0,0 +1,46 @@
+.containerMenuToggle {
+  width: 100%;
+  height: 100vh;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  z-index: 50;
+
+  background: rgba(69, 69, 69, 0.7);
+  .contentMenuToogle {
+    width: 96.4843%;
+    height: 585px;
+
+    background: var(--white);
+
+    .headerMenuToggle {
+      width: 100%;
+      height: 78px;
+
+      background: var(--black);
+
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      padding: 0 16px;
+
+      a {
+        color: var(--white);
+
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        text-transform: uppercase;
+      }
+
+      img {
+        width: 15px;
+
+        cursor: pointer;
+      }
+    }
+  }
+}