feat:Menu Hamburguer

src/components/header/Header.module.css

@@ -30,6 +30,13 @@ button {
     cursor: pointer;
 }
 
+.MenuHamb {
+    background-color: #000000;
+    border: #000000;
+    position: absolute;
+    z-index: -1;
+}
+
 .header-logo {
     display: flex;
     justify-content: flex-start;
@@ -111,7 +118,7 @@ button {
     display: flex;
     align-items: center;
     gap: 8px;
-    padding-left: 128px;
+    padding-left: 100px;
     padding-top: 29px;
 }
 
@@ -140,12 +147,15 @@ button {
 }
 
 @media screen and (min-width: 768px) {
-    .header-nav {
-        display: none
-    }
+    
 }
 
 @media screen and (max-width: 768px) {
+    .MenuHamb {
+        z-index: 0;
+        
+    }
+
     .header-container-flex {
         display: flex;
 
@@ -161,6 +171,7 @@ button {
 
     .header-menu {
         display: none;
+        
     }
 
     .header-carrrinho {

src/components/header/Header.tsx

@@ -10,15 +10,27 @@ import Arrow from '../assets/img/header-arrow-icon.png'
 import Menu from '../assets/img/menu-icon.png'
 
 
-const Header = () => {
+interface MenuHamb {
+    handleOpenModal:() => void;
+}
+
+
+const Header = ({handleOpenModal} : MenuHamb) => {
     return (
         <div>
             <header>
                 <div className={styles["header-container"]}>
                     <div className={styles["header-container-flex"]}>
-                        <div className={styles["header-nav"]}>
+                        {/* <div className={styles["header-nav"]}>
                             <a href="/">
                                 <img src={Menu} alt="Menu" /></a>
+                        </div> */}
+                        <div>
+                        <button className={styles["MenuHamb"]}
+                    onClick={handleOpenModal}
+                    >
+                        <img src={Menu} alt=''/>
+                    </button>
                         </div>
                         <div className={styles["header-logo"]}>
                             <a href="/">

src/components/header/MenuHamb.module.css

@@ -0,0 +1,3 @@
+.menu {
+    background-color: red;
+}

src/components/header/MenuHamb.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import Modal from 'react-modal'
+import styles from "./MenuHamb.module.css"
+
+interface MenuHamb {
+    isOpen: boolean;
+    onRequestClose: () => void;
+}
+
+function MenuHamb ({isOpen, onRequestClose}: MenuHamb) {
+    return (
+        <Modal
+        isOpen={isOpen}
+        onRequestClose={onRequestClose}
+        overlayClassName={styles['menu-hamb']}
+        className={styles['menu-container']}
+        >
+            <h1>Toma no cu esse caralho dos inferno</h1>
+        </Modal>
+    )
+}
+
+
+export default MenuHamb