From 92531d2269316614935cb278f5fbaac550df31c9 Mon Sep 17 00:00:00 2001
From: MarcelloMartins <marcello08martins@outlook.com>
Date: Thu, 19 Jan 2023 17:46:40 -0300
Subject: [PATCH] feat(header): created responsiveness tablet and mobile header

---
 src/components/Header/index.tsx          |  4 +++
 src/components/Header/styles.module.scss | 40 ++++++++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 41e8a33..bd2c15a 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -2,12 +2,16 @@ import styles from "./styles.module.scss";
 import Logo from "../../assets/img/logoM3.png";
 import Lupa from "../../assets/svg/lupa.svg";
 import Cart from "../../assets/svg/cart.svg";
+import Menu from "../../assets/svg/menu.svg";
 
 export default function Header() {
   return (
     <>
       <header className={styles.Header}>
         <div className={styles.firstDiv}>
+          <button className={styles.menuHamburguer}>
+            <img src={Menu} alt="menu" />
+          </button>
           <img className={styles.logo} src={Logo} alt="logo m3" />
           <div className={styles.searchDiv}>
             <input type="text" placeholder="Buscar..."></input>
diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss
index 2dcd65b..8c4cad7 100644
--- a/src/components/Header/styles.module.scss
+++ b/src/components/Header/styles.module.scss
@@ -78,6 +78,46 @@
       display: flex;
       padding-left: 7.81vw;
     }
+
+    .menuHamburguer {
+      border: 0;
+      background: black;
+      padding-left: 16px;
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .Header {
+    height: 139px;
+
+    .menuHamburguer {
+      display: flex !important;
+    }
+
+    .logo {
+      padding-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 {
+      padding-right: 16px !important;
+    }
+  }
+  .secondDiv {
+    display: none !important;
   }
 }