From dc6b02c8172dc11995c0406564819a07e900aa02 Mon Sep 17 00:00:00 2001
From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com>
Date: Thu, 5 Jan 2023 23:23:44 -0300
Subject: [PATCH] feat: adiciona o html estatico do header mobile

---
 src/assets/img/close.svg                      |  4 ++
 src/assets/img/hamburguer.svg                 |  5 ++
 src/components/Header/Header.module.scss      | 56 ++++++++++++++-----
 src/components/Header/Header.tsx              | 25 ++++++---
 .../InputMenuMobile/InputMenuMobile.tsx       | 27 +++++++++
 .../inputMenuMobile.module.scss               | 47 ++++++++++++++++
 .../MenuHamburguer/MenuHamburguer.module.scss | 18 ++++++
 .../Header/MenuHamburguer/MenuHamburguer.tsx  | 50 +++++++++++++++++
 src/global.scss                               |  1 +
 9 files changed, 211 insertions(+), 22 deletions(-)
 create mode 100644 src/assets/img/close.svg
 create mode 100644 src/assets/img/hamburguer.svg
 create mode 100644 src/components/Header/InputMenuMobile/InputMenuMobile.tsx
 create mode 100644 src/components/Header/InputMenuMobile/inputMenuMobile.module.scss
 create mode 100644 src/components/Header/MenuHamburguer/MenuHamburguer.module.scss
 create mode 100644 src/components/Header/MenuHamburguer/MenuHamburguer.tsx

diff --git a/src/assets/img/close.svg b/src/assets/img/close.svg
new file mode 100644
index 0000000..e0e6d36
--- /dev/null
+++ b/src/assets/img/close.svg
@@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2284 1.28215L1.22996 10.9942C0.550673 11.6541 0.568968 12.7044 1.27083 13.3401C1.97268 13.9759 3.09232 13.9564 3.77161 13.2966L13.77 3.58449C14.4493 2.92466 14.431 1.87436 13.7292 1.23858C13.0273 0.602806 11.9077 0.622311 11.2284 1.28215Z" fill="white"/>
+<path d="M1.65213 3.40819L10.8751 13.7186C11.5082 14.4263 12.6262 14.5239 13.3724 13.9366C14.1185 13.3493 14.2102 12.2995 13.5771 11.5918L4.35414 1.28143C3.72107 0.573715 2.603 0.476092 1.85686 1.06338C1.11072 1.65067 1.01906 2.70048 1.65213 3.40819Z" fill="white"/>
+</svg>
diff --git a/src/assets/img/hamburguer.svg b/src/assets/img/hamburguer.svg
new file mode 100644
index 0000000..6cadeb3
--- /dev/null
+++ b/src/assets/img/hamburguer.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/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
index e3f2622..6dbe7a1 100644
--- a/src/components/Header/Header.module.scss
+++ b/src/components/Header/Header.module.scss
@@ -1,5 +1,5 @@
-.container-header {
-  .header-wrapper {
+.container {
+  &__wrapper {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -7,12 +7,17 @@
     background-color: var(--black);
     border-bottom: 1px solid var(--gray-100);
 
+    @media (max-width: 1024px) {
+      border: none;
+      padding: 25px 16px;
+    }
+
     &__container-logo {
-      width: 12.597%;
+      width: 136px;
       height: 25.86px;
 
-      @media screen and (min-width: 2500px) {
-        width: 11.55%;
+      @media (min-width: 2500px) {
+        width: 265.62px;
         height: 50.5px;
       }
 
@@ -22,7 +27,7 @@
         .logo-m3 {
           width: 100%;
 
-          @media screen and (min-width: 2500px) {
+          @media (min-width: 2500px) {
             height: 50.5px;
           }
         }
@@ -32,8 +37,11 @@
     &__container-input-busca {
       position: relative;
       width: 24.452%;
+      @media (max-width: 1024px) {
+        display: none;
+      }
 
-      @media screen and (min-width: 2500px) {
+      @media (min-width: 2500px) {
         width: 22.421%;
       }
 
@@ -52,7 +60,7 @@
 
         //font-family: roboto;
 
-        @media screen and (min-width: 2500px) {
+        @media (min-width: 2500px) {
           height: 57px;
 
           font-weight: 400;
@@ -75,7 +83,11 @@
         right: 17px;
         cursor: pointer;
 
-        @media screen and (min-width: 2500px) {
+        @media (max-width: 1025px) {
+          display: none;
+        }
+
+        @media (min-width: 2500px) {
           width: 35.15px;
           height: 35.15px;
           top: 10px;
@@ -85,7 +97,8 @@
         img {
           height: 18px;
           width: 18px;
-          @media screen and (min-width: 2500px) {
+          color: var(--black-200);
+          @media (min-width: 2500px) {
             width: 35.15px;
             height: 35.15px;
           }
@@ -107,21 +120,31 @@
         font-family: var(--font-roboto);
         cursor: pointer;
 
-        @media screen and (min-width: 2500px) {
+        @media (max-width: 1024px) {
+          display: none;
+        }
+
+        @media (min-width: 2500px) {
           font-weight: 400;
           font-size: 28px;
           line-height: 33px;
         }
       }
 
-      img {
+      button {
+        background: transparent;
+        border: none;
         width: 28px;
         height: 28px;
 
-        @media screen and (min-width: 2500px) {
+        @media (min-width: 2500px) {
           width: 54.68px;
           height: 54.68px;
         }
+
+        img {
+          width: 100%;
+        }
       }
     }
   }
@@ -129,6 +152,9 @@
   .container-nav {
     background-color: var(--black);
     padding: 14px 100.32px 14px 100px;
+    @media (max-width: 1025px) {
+      display: none;
+    }
 
     ul {
       display: flex;
@@ -141,7 +167,7 @@
         color: var(--white);
         font-family: var(--font-roboto);
 
-        @media screen and (min-width: 2500px) {
+        @media (min-width: 2500px) {
           font-weight: 500;
           font-size: 28px;
           line-height: 33px;
@@ -156,7 +182,7 @@
       li:nth-child(2) {
         margin: 0 55px;
 
-        @media screen and (min-width: 2500px) {
+        @media (min-width: 2500px) {
           margin: 0 55.92px 0 55.71px;
         }
       }
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 07b9587..0c8b70a 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,4 +1,7 @@
 import React from "react";
+import { InputMenuMobile } from "./InputMenuMobile/InputMenuMobile"
+import { MenuHamburguer } from "./MenuHamburguer/MenuHamburguer"
+
 import styleHeader from "./Header.module.scss"
 
 import logo from "../../assets/img/logo-m3.png"
@@ -8,17 +11,21 @@ import search from "../../assets/img/search.svg"
 
 
 export function Header() {
-    return (
-        <header className={styleHeader["container-header"]}>
 
-            <div className={styleHeader["header-wrapper"]}>
-                <div className={styleHeader["header-wrapper__container-logo"]}>
+    return (
+        <header className={styleHeader["container"]}>
+
+            <div className={styleHeader["container__wrapper"]}>
+
+                <MenuHamburguer />
+
+                <div className={styleHeader["container__wrapper__container-logo"]}>
                     <a href="teste">
                         <img className={styleHeader["logo-m3"]} src={logo} alt="Logo M3 Academy" />
                     </a>
                 </div>
 
-                <div className={styleHeader["header-wrapper__container-input-busca"]}>
+                <div className={styleHeader["container__wrapper__container-input-busca"]}>
                     <input
                         className={styleHeader["input-busca"]}
                         placeholder="Buscar...">
@@ -28,13 +35,17 @@ export function Header() {
                     </button>
                 </div>
 
-                <div className={styleHeader["header-wrapper__container-login-cart"]}>
+                <div className={styleHeader["container__wrapper__container-login-cart"]}>
                     <p>ENTRAR</p>
-                    <img src={cart} alt="Carrinho" />
+                    <button>
+                        <img src={cart} alt="Carrinho" />
+                    </button>
                 </div>
 
             </div>
 
+            <InputMenuMobile />
+
             <nav className={styleHeader["container-nav"]}>
                 <ul>
                     <li><a href="teste">CURSOS</a></li>
diff --git a/src/components/Header/InputMenuMobile/InputMenuMobile.tsx b/src/components/Header/InputMenuMobile/InputMenuMobile.tsx
new file mode 100644
index 0000000..11ed94a
--- /dev/null
+++ b/src/components/Header/InputMenuMobile/InputMenuMobile.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import styleInput from "./inputMenuMobile.module.scss"
+
+import search from "../../../assets/img/search.svg"
+
+export const InputMenuMobile = () => {
+    return (
+
+        <form className={styleInput["container__form-input-button"]}>
+            <input
+                className={styleInput["container__form-input-button__input"]}
+                type="text"
+                name="search"
+                placeholder="Buscar..."
+            />
+            <button
+                type="submit"
+                className={styleInput["container__form-input-button__button"]}>
+
+                <img src={search} alt="Icone de busca" />
+            </button>
+        </form>
+
+    )
+}
+
+export default InputMenuMobile;
\ No newline at end of file
diff --git a/src/components/Header/InputMenuMobile/inputMenuMobile.module.scss b/src/components/Header/InputMenuMobile/inputMenuMobile.module.scss
new file mode 100644
index 0000000..e420a5a
--- /dev/null
+++ b/src/components/Header/InputMenuMobile/inputMenuMobile.module.scss
@@ -0,0 +1,47 @@
+.container {
+  &__form-input-button {
+    background: var(--black);
+    position: relative;
+    padding: 0 16px 25px;
+    display: flex;
+
+    @media (min-width: 1025px) {
+      display: none;
+    }
+
+    &__input {
+      width: 100%;
+      height: 36px;
+      border: 2px solid var(--white-100);
+      border-radius: 5px;
+      padding: 10px 40px 10px 16px;
+
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 16px;
+      font-family: var(--font-roboto);
+
+      &::placeholder {
+        color: var(--gray-100);
+      }
+    }
+
+    &__button {
+      position: absolute;
+      z-index: 10;
+      border: none;
+      background: transparent;
+      outline: none;
+      top: 8px;
+      right: 30px;
+      width: 18px;
+      height: 18px;
+
+      img {
+        width: 18px;
+        height: 18px;
+        color: var(--black-200);
+      }
+    }
+  }
+}
diff --git a/src/components/Header/MenuHamburguer/MenuHamburguer.module.scss b/src/components/Header/MenuHamburguer/MenuHamburguer.module.scss
new file mode 100644
index 0000000..60ff545
--- /dev/null
+++ b/src/components/Header/MenuHamburguer/MenuHamburguer.module.scss
@@ -0,0 +1,18 @@
+.container {
+  &__wrapper {
+    &__btnHamburguer {
+      @media (min-width: 1025px) {
+        display: none;
+      }
+      button {
+        background: transparent;
+        border: none;
+
+        img {
+          width: 28px;
+          height: 22.5px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/Header/MenuHamburguer/MenuHamburguer.tsx b/src/components/Header/MenuHamburguer/MenuHamburguer.tsx
new file mode 100644
index 0000000..979c464
--- /dev/null
+++ b/src/components/Header/MenuHamburguer/MenuHamburguer.tsx
@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import styleMenu from "./MenuHamburguer.module.scss"
+
+import hamburguer from "../../../assets/img/hamburguer.svg"
+import closeMenu from "../../../assets/img/close.svg"
+
+export const MenuHamburguer = () => {
+
+    const [menuOpen, setMenuOpen] = useState<boolean>(false);
+
+    const handleMenuHamburguer = (state: boolean) => {
+        setMenuOpen(!state)
+
+    };
+
+    return (
+        <>
+
+            <div className={styleMenu["container__wrapper__btnHamburguer"]}>
+                <button onClick={() => handleMenuHamburguer(menuOpen)}>
+                    <img src={hamburguer} alt="Imagem expansão de menu" />
+                </button>
+            </div>
+
+
+            {menuOpen &&
+                <>
+                    <div>
+                        <a href="/">Entrar</a>
+                        <button>
+                            <img src={closeMenu} alt="Imagem fechar menu" />
+                        </button>
+                    </div>
+
+                    <nav>
+                        <ul>
+                            <li><a href="/">Cursos</a></li>
+                            <li><a href="/">Saiba mais</a></li>
+                            <li><a href="/">Institucionais</a></li>
+                        </ul>
+                    </nav>
+
+                </>
+            }
+
+        </>
+    )
+}
+
+export default MenuHamburguer;
\ No newline at end of file
diff --git a/src/global.scss b/src/global.scss
index 296b4ca..20560f4 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -4,6 +4,7 @@
 
   --black: #000000;
   --black-100: #303030;
+  --black-200: #292929;
 
   --white: #ffffff;
   --white-100: #f0f0f0;