From 589e14a541584149081fcf7bbbd0ede1f655c9ac Mon Sep 17 00:00:00 2001
From: Izabela Balizardo <izah_rb@hotmail.com>
Date: Sun, 15 Jan 2023 22:46:43 -0300
Subject: [PATCH] feat:Menu Hamburguer

---
 src/components/header/Header.module.css   | 19 +++++++++++++----
 src/components/header/Header.tsx          | 16 +++++++++++++--
 src/components/header/MenuHamb.module.css |  3 +++
 src/components/header/MenuHamb.tsx        | 25 +++++++++++++++++++++++
 4 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 src/components/header/MenuHamb.module.css
 create mode 100644 src/components/header/MenuHamb.tsx

diff --git a/src/components/header/Header.module.css b/src/components/header/Header.module.css
index b1c6328..2b3fa51 100644
--- a/src/components/header/Header.module.css
+++ b/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 {
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 5a727f3..611d607 100644
--- a/src/components/header/Header.tsx
+++ b/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="/">
diff --git a/src/components/header/MenuHamb.module.css b/src/components/header/MenuHamb.module.css
new file mode 100644
index 0000000..1ec564f
--- /dev/null
+++ b/src/components/header/MenuHamb.module.css
@@ -0,0 +1,3 @@
+.menu {
+    background-color: red;
+}
\ No newline at end of file
diff --git a/src/components/header/MenuHamb.tsx b/src/components/header/MenuHamb.tsx
new file mode 100644
index 0000000..b131021
--- /dev/null
+++ b/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
\ No newline at end of file