feat(header): Estiza o header para mobiles e adiciona o botão do menu hamburguer

src/components/HeaderTop/HeaderTop.module.scss

@@ -26,6 +26,33 @@
         @media ((min-width: 1900px) and (max-width: 2499px)) {
             grid-template-columns: 1fr 415px 1fr;
         }
+    
+        @media (max-width: 1024px) {
+            grid-template-columns: 10% 80% 10%;
+            padding: 25px 16px;
+            height: 139px;
+        }
+    }
+
+    &__btn-hamburger {
+        display: none;
+    
+        @media (max-width: 1024px) {
+            display: flex;
+            align-items: center;
+            background: transparent;
+            border: none;
+            grid-area: 1/1;
+    
+            &__img {
+                width: 100%;
+                max-width: 28px;
+            }
+    
+            &:hover {
+                filter: brightness(80%);
+            }
+        }
     }
     
     &__logo {
@@ -58,6 +85,10 @@
         align-items: center;
         position: relative;
     
+        @media (max-width: 1024px) {
+            grid-area: 2 / 1 / 2 / 4;
+        }
+    
         &__input {
             margin: 0 auto;
             width: 100%;
@@ -89,6 +120,12 @@
                 max-width: 415px;
             }
     
+            @media (max-width: 1024px) {
+                min-width: 100%;
+                margin-top: 25px;
+                height: 36px;
+            }
+    
             &::placeholder {
                 font-size: 14px;
                 line-height: 16px;
@@ -126,6 +163,10 @@
                 top: 11px;
                 bottom: 11px;
             }
+    
+            @media (max-width: 1024px) {
+                top: 34px;
+            }
 
             &__img {
                 
@@ -143,6 +184,11 @@
         justify-content: right;
         gap: 55px;
     
+        @media (max-width: 1024px) {
+            grid-area: 1/3;
+            gap: 0;
+        }
+    
         &__login {
             color: variables.$white;
             font-size: 14px;
@@ -162,6 +208,10 @@
                 font-size: 28px;
                 line-height: 33px;
             }
+    
+            @media (max-width: 1024px) {
+                display: none;
+            }
         }
     
         &__btn-cart {
@@ -182,4 +232,4 @@
             }
         }
     }
-}
+}

src/components/HeaderTop/HeaderTop.tsx

@@ -5,6 +5,7 @@ import styles from "./HeaderTop.module.scss";
 import imgLogo from "./assets/logo-m3academy.png";
 import imgCart from "./assets/cart.svg";
 import imgSearch from "./assets/search.svg";
+import imgHamburgerBtn from "./assets/hamburger-menu-btn-icon.svg";
 
 const HeaderTop = () => {
 
@@ -20,6 +21,10 @@ const HeaderTop = () => {
         <div className={styles["header-top"]}>
             <div className={styles["header-top__wrapper"]}> 
 
+                <button className={styles["header-top__btn-hamburger"]}> 
+                        <img className={styles["header-top__btn-hamburger__img"]} src= {imgHamburgerBtn} alt="Ícone Menu Hamburguer" />
+                </button>
+
                 <picture className={styles["header-top__logo"]}>
                     <a href="/">
                         <img className={styles["header-top__logo__img"]} src= {imgLogo} alt="Logo M3 Academy" />

src/pages/Home.module.scss

@@ -11,4 +11,8 @@
     @media ((min-width: 2500px) and (max-width: 3599px)) {
         height: 162px;
     }
+
+    @media (max-width: 1024px) {
+        height: 139px;
+    }
 }