From 0598c83fc09414d6ad4070ef1dbe779e4079c8b7 Mon Sep 17 00:00:00 2001
From: Sabrina Miranda <sabrina.miranda1@bol.com.br>
Date: Sat, 7 Jan 2023 20:53:42 -0300
Subject: [PATCH] =?UTF-8?q?feat(header):=20Estiza=20o=20header=20para=20mo?=
 =?UTF-8?q?biles=20e=20adiciona=20o=20bot=C3=A3o=20do=20menu=20hamburguer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HeaderTop/HeaderTop.module.scss           | 52 ++++++++++++++++++-
 src/components/HeaderTop/HeaderTop.tsx        |  5 ++
 src/pages/Home.module.scss                    |  4 ++
 3 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/src/components/HeaderTop/HeaderTop.module.scss b/src/components/HeaderTop/HeaderTop.module.scss
index 776ddb1..fb245db 100644
--- a/src/components/HeaderTop/HeaderTop.module.scss
+++ b/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 @@
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/components/HeaderTop/HeaderTop.tsx b/src/components/HeaderTop/HeaderTop.tsx
index bc75130..7b37e67 100644
--- a/src/components/HeaderTop/HeaderTop.tsx
+++ b/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" />
diff --git a/src/pages/Home.module.scss b/src/pages/Home.module.scss
index 6fc04aa..0e249ac 100644
--- a/src/pages/Home.module.scss
+++ b/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;
+    }
 }
\ No newline at end of file