From 4834ed54a91758ba1922654f11cedce6ae2fcf5b Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Fri, 6 Jan 2023 22:55:24 -0300
Subject: [PATCH] feat(mobile):Menu Hamburguer responsivo

---
 .../assets/icons/Hamburger_menu.svg           |   5 ++
 .../assets/imgs/Logo-M3Academy-mobile.png     | Bin 0 -> 2974 bytes
 .../src/components/modules/header.module.scss |  45 +++++++++++++++++-
 desafio-5/src/components/scripts/header.tsx   |  31 +++++++++++-
 4 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 desafio-5/src/components/assets/icons/Hamburger_menu.svg
 create mode 100644 desafio-5/src/components/assets/imgs/Logo-M3Academy-mobile.png

diff --git a/desafio-5/src/components/assets/icons/Hamburger_menu.svg b/desafio-5/src/components/assets/icons/Hamburger_menu.svg
new file mode 100644
index 0000000..6cadeb3
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/Hamburger_menu.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.25 19.0001H1.75002C0.783509 19.0001 0 19.7836 0 20.7501C0 21.7166 0.783508 22.5001 1.75002 22.5001H26.25C27.2165 22.5001 28 21.7166 28 20.7501C28 19.7836 27.2165 19.0001 26.25 19.0001Z" fill="white"/>
+<path d="M26.25 9.5H1.75002C0.783509 9.5 0 10.2835 0 11.25C0 12.2165 0.783508 13 1.75002 13H26.25C27.2165 13 28 12.2165 28 11.25C28 10.2835 27.2165 9.5 26.25 9.5Z" fill="white"/>
+<path d="M26.25 0H1.75002C0.783509 0 0 0.783509 0 1.75002C0 2.71652 0.783508 3.50003 1.75002 3.50003H26.25C27.2165 3.50003 28 2.71652 28 1.75002C28 0.783509 27.2165 0 26.25 0Z" fill="white"/>
+</svg>
diff --git a/desafio-5/src/components/assets/imgs/Logo-M3Academy-mobile.png b/desafio-5/src/components/assets/imgs/Logo-M3Academy-mobile.png
new file mode 100644
index 0000000000000000000000000000000000000000..d7524ec3c22d35380f9dcf88ca6b67986b1673bf
GIT binary patch
literal 2974
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
Ur3(w^b^rhX07*qoM6N<$g3bP&DF6Tf

literal 0
HcmV?d00001

diff --git a/desafio-5/src/components/modules/header.module.scss b/desafio-5/src/components/modules/header.module.scss
index 65fc241..ffb7183 100644
--- a/desafio-5/src/components/modules/header.module.scss
+++ b/desafio-5/src/components/modules/header.module.scss
@@ -10,6 +10,13 @@
     justify-content: space-between;
     height: 22.225vh;
     max-height: 160px;
+
+    &-mobileTop{
+        display: none;
+    }
+    &-mobilebottom{
+        display: none;
+    }
     // Top-header
 
     &-top {
@@ -23,6 +30,7 @@
         border-bottom: 1px solid $-gray-300;
 
     &-logo {
+        border: 0;
         width: 12.593%;
         max-width: 264.61px;
         margin: 3px 0;
@@ -207,9 +215,42 @@
         }
     }
 }
+
 //Mobile
 
-@media screen and (min-width: 280px) and (max-width: 490px) {
+@media screen and (min-width: 280px) and (max-width: 1024px) {
 
+    .Header_wrapper {
+        height: 25.93vh;
+        max-height: 100%;
+        // Top-header-mobile
 
-}
+        &-mobileTop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 25px 16px;
+            gap: 10px;
+            background: pink;
+            &-menu{
+                border: none;
+                min-height: 22.5px;
+                height: 4.083vh;
+                width: 8.17%;
+                .hamburguer{
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+
+        // Top-header-desktop
+        &-top {
+            display: none;
+        }
+        //bottom-header-desktop
+        &-bottom {
+            display: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/desafio-5/src/components/scripts/header.tsx b/desafio-5/src/components/scripts/header.tsx
index 7301d2f..931b1a6 100644
--- a/desafio-5/src/components/scripts/header.tsx
+++ b/desafio-5/src/components/scripts/header.tsx
@@ -2,19 +2,21 @@ import React, { useState, useEffect, useRef, useMemo, useCallback,useContext} fr
 
 import HeaderStyles from "../modules/header.module.scss"
 import Logo from '../assets/imgs/Logo.png';
+import LogoMobile from '../assets/imgs/Logo-M3Academy-mobile.png';
 import Lupa from "../assets/icons/search_Icon_desk.svg";
 import Cart from "../assets/icons/cart_desk_icon.svg";
+import MenuMobile from "../assets/icons/Hamburger_menu.svg";
 
 const Header = () =>{
     return (
         <div className={HeaderStyles["Header_wrapper"]}>
 
             <div className={HeaderStyles["Header_wrapper-top"]}>
-                <div className={HeaderStyles["Header_wrapper-top-logo"]}>
+                <fieldset className={HeaderStyles["Header_wrapper-top-logo"]}>
                     <a href="/">
                         <img src={Logo} alt="Logo" />
                     </a>
-                </div>
+                </fieldset>
                 <div className={HeaderStyles["Header_wrapper-top-Searchbox"]}>
                     <input name="search" type="text" placeholder="Buscar">
                     </input>
@@ -32,6 +34,31 @@ const Header = () =>{
                 </div>
             </div>
 
+            <div className={HeaderStyles["Header_wrapper-mobileTop"]}>
+                <fieldset className={HeaderStyles["Header_wrapper-mobileTop-menu"]}>
+                    <img className={HeaderStyles["hamburguer"]} src={MenuMobile} alt="Logo-mobile" />
+                </fieldset>
+                {/* <fieldset className={HeaderStyles["Header_wrapper-mobileTop-menu"]}>
+                    <a href="/">
+                        <img src={LogoMobile} alt="Logo-mobile" />
+                    </a>
+                </fieldset>
+                <button>
+                    <img src={Cart} alt="Carrinho_icon" />
+                </button> */}
+            </div>
+
+            {/* <div className={HeaderStyles["Header_wrapper-mobilebottom"]}>
+                <div className={HeaderStyles["Header_wrapper-mobilebottom-Searchbox"]}>
+                        <input name="search" type="text" placeholder="Buscar">
+                        </input>
+                        <label htmlFor="search">
+                            <button>
+                                <img src={Lupa} alt="Lupa" />
+                            </button>
+                        </label>
+                </div>
+            </div> */}
 
             <div className={HeaderStyles["Header_wrapper-bottom"]}>
                 <nav className={HeaderStyles["Header_wrapper-bottom-navigator"]}>