feat(header): created responsiveness tablet and mobile header

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>

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;
   }
 }