From f25f18824c175d71678f10c154195a7a9595022d Mon Sep 17 00:00:00 2001
From: amanda almeida <manda.fonsecaff@gmail.com>
Date: Fri, 30 Dec 2022 00:20:23 -0300
Subject: [PATCH] feat(menu): adiciona menu mobile

---
 src/assets/img/iconExit.png    | Bin 0 -> 268 bytes
 src/assets/img/iconMenu.png    | Bin 0 -> 217 bytes
 src/components/Header.tsx      |  47 +++++++++++----
 src/components/HeaderLinks.tsx |  13 ++++
 src/components/Link.tsx        |   3 +-
 src/components/menuMobile.tsx  |  32 ++++++++++
 src/styles/header.scss         | 106 +++++++++++++++++++++++++++++++--
 7 files changed, 185 insertions(+), 16 deletions(-)
 create mode 100644 src/assets/img/iconExit.png
 create mode 100644 src/assets/img/iconMenu.png
 create mode 100644 src/components/HeaderLinks.tsx
 create mode 100644 src/components/menuMobile.tsx

diff --git a/src/assets/img/iconExit.png b/src/assets/img/iconExit.png
new file mode 100644
index 0000000000000000000000000000000000000000..2dd684580ca3b8989addd96af5aa91420fbf406e
GIT binary patch
literal 268
zcmeAS@N?(olHy`uVBq!ia0vp^{2<K11|+SoP4xm&oCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{z6X|$B+ufxsw_N9SnFFjGF|lngnwWahR>(
zz0ttilfa@ZaggKUE+wUxTmR`j_praTg@Ms!O^pM~bp4nqe-<BQU)^!+sMxh1>4mCk
zHOb14TwSA|T@fsNn!7cK(Q{998mm>0a`%!0AG~>rR-RCEy|elMnvOrUQ;tMMSS+mZ
zu@&X5lZ==rzU@}St`^<5CNIyI7hY_#JJWW;_=(WA2kSpseq~-A@q6<Nk=;{(j%Dz4
L^>bP0l+XkKJ=|fL

literal 0
HcmV?d00001

diff --git a/src/assets/img/iconMenu.png b/src/assets/img/iconMenu.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b91465017ad0283f5b7ed3dbaa75926bc3fcc45
GIT binary patch
literal 217
zcmeAS@N?(olHy`uVBq!ia0vp^GC(ZO!3HEHPU(jODb50q$YKTtZeb8+WSBKa0w~B>
z9OUlAu<o49OCX0O-O<;Pfnj4m_n$;oAV1I3#WAFU@$I#XybTIGEEg_w7BHJ#=Di|#
z$HhER*u8=GRVj<`&L0=2%Y0d{$QU%^=Bbd&H`wAAUUt)CwL0rRBU0zZdLwbCiqrX-
zkL-+ve_8K+cvi`IafNfeJg3sX%Q6=-&h!cV(|7AxFMZ0rhn;m2(+eJ*>z9ExGkCiC
KxvX<aXaWFt21ZH%

literal 0
HcmV?d00001

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 5517897..aed77fe 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,25 +1,52 @@
 import SearchBar from "./SearchBar";
 import Logo from "../assets/img/logoM3.png";
 import Cart from "../assets/img/Cart.png";
+import iconMenu from "../assets/img/iconMenu.png";
 import Link from "./Link";
+import HeaderLinks from "./HeaderLinks";
+import MenuMobile from "./menuMobile";
 
 const Header = () => {
+  const activeMenuMobile = async () => {
+    const menu = document.querySelector(".page-header__menu-mobile");
+    if (menu?.classList.contains("active")) {
+      menu?.classList.remove("active");
+    } else {
+      menu?.classList.add("active");
+    }
+  };
+
   return (
     <div className="page-header">
-      <div className="page-header__container-top">
-        <img src={Logo} alt="" />
-        <SearchBar />
-        <div className="page-header__container-login">
-          <Link link="/" text="ENTRAR" className="page-header__link" />
-          <a href="/" aria-label="Carrinho">
-            <img src={Cart} alt="" className="page-header__cart" />
+      <div className="page-header__container">
+        <div className="page-header__container-top">
+          <div className="page-header__menu">
+            <button
+              className="page-header__menu-button"
+              aria-label="Menu"
+              onClick={activeMenuMobile}
+            >
+              <img src={iconMenu} alt="" />
+            </button>
+            <MenuMobile onClick={activeMenuMobile} />
+          </div>
+          <a href="/">
+            <img src={Logo} alt="" />
           </a>
+          <SearchBar />
+          <div className="page-header__container-login">
+            <Link link="/" text="ENTRAR" />
+            <a href="/" aria-label="Carrinho">
+              <img src={Cart} alt="" className="page-header__cart" />
+            </a>
+          </div>
+        </div>
+        <div className="page-header__mobile">
+          <SearchBar />
         </div>
       </div>
       <div className="page-header__container-bottom">
-        <Link link="/" text="CURSOS" className="page-header__link" />
-        <Link link="/" text="SAIBA MAIS" className="page-header__link" />
-        <Link link="/" text="INSTITUCIONAIS" className="page-header__link" />
+        <HeaderLinks />
       </div>
     </div>
   );
diff --git a/src/components/HeaderLinks.tsx b/src/components/HeaderLinks.tsx
new file mode 100644
index 0000000..b40da5c
--- /dev/null
+++ b/src/components/HeaderLinks.tsx
@@ -0,0 +1,13 @@
+import Link from "./Link";
+
+const HeaderLinks = () => {
+  return (
+    <>
+      <Link link="/" text="CURSOS" />
+      <Link link="/" text="SAIBA MAIS" />
+      <Link link="/" text="INSTITUCIONAIS" />
+    </>
+  );
+};
+
+export default HeaderLinks;
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 4d2e2f5..c3b0eee 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -1,12 +1,11 @@
 export interface LinkProps {
   link: string;
   text: string;
-  className: string;
 }
 
 const Link = (props: LinkProps) => {
   return (
-    <a href={props.link} className={props.className}>
+    <a href={props.link} className="link">
       {props.text}
     </a>
   );
diff --git a/src/components/menuMobile.tsx b/src/components/menuMobile.tsx
new file mode 100644
index 0000000..0611e05
--- /dev/null
+++ b/src/components/menuMobile.tsx
@@ -0,0 +1,32 @@
+import iconExit from "../assets/img/iconExit.png";
+import Link from "./Link";
+import HeaderLinks from "./HeaderLinks";
+
+interface MenuMobileProps {
+  onClick: React.MouseEventHandler;
+}
+
+const MenuMobile = (props: MenuMobileProps) => {
+  return (
+    <div className="page-header__menu-mobile">
+      <div className="page-header__menu-mobile--container">
+        <div className="page-header__menu-mobile--header">
+          <Link link="/" text="ENTRAR" />
+          <button
+            className="page-header__menu-mobile--button-exit"
+            aria-label="exit"
+            type="submit"
+            onClick={props.onClick}
+          >
+            <img src={iconExit} alt="" />
+          </button>
+        </div>
+        <div className="page-header__menu-mobile--links">
+          <HeaderLinks />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MenuMobile;
diff --git a/src/styles/header.scss b/src/styles/header.scss
index 22077df..804e099 100644
--- a/src/styles/header.scss
+++ b/src/styles/header.scss
@@ -9,8 +9,8 @@
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
-        border-bottom: 1px solid $gray-600;
-        padding: 0 100px;
+
+
     }
 
     &__busca {
@@ -19,7 +19,7 @@
     }
 
     &__busca-input {
-        width: 248px;
+        width: 98.6%;
         height: 32px;
         background: $white;
         border: 2px solid $gray-700;
@@ -52,7 +52,7 @@
         gap: 55px;
     }
 
-    &__link {
+    .link {
         font-weight: 400;
         font-size: 14px;
         line-height: 16px;
@@ -68,4 +68,102 @@
         align-items: center;
         gap: 55px;
     }
+
+    &__menu-button {
+        background: transparent;
+        border: 0;
+        cursor: pointer;
+    }
+
+    &__menu-mobile {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: rgba(69, 69, 69, 0.7);
+        width: 100%;
+        height: 100%;
+        z-index: 50;
+        display: none;
+
+        &--container {
+            height: 585px;
+            background: $white;
+            width: 96.5%;
+        }
+
+        &--header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: $black;
+            padding: 31px 16px;
+        }
+
+        &--button-exit {
+            background: transparent;
+            border: 0;
+            outline: 0;
+            cursor: pointer;
+        }
+
+        &--links {
+            display: flex;
+            flex-direction: column;
+            align-self: start;
+            gap: 12px;
+            padding: 31px 0 0 16px;
+
+            .link {
+                color: #C4C4C4;
+            }
+        }
+
+    }
+
+    &__mobile {
+        padding: 0 16px 25px;
+    }
+
+    .active {
+        display: block;
+    }
+
+
+
+    @media screen and (min-width: 1025px) {
+        &__container-top {
+            padding: 0 100px;
+            border-bottom: 1px solid $gray-600;
+        }
+
+        &__menu,
+        &__mobile {
+            display: none;
+        }
+    }
+
+    @media screen and (max-width: 1024px) {
+
+        &__container-top {
+            padding: 0 16px;
+
+            .page-header__busca {
+                display: none;
+            }
+        }
+
+        &__container-login {
+            .link {
+                display: none;
+            }
+        }
+
+        &__container-bottom {
+            display: none;
+        }
+
+        &__busca {
+            width: 100%;
+        }
+    }
 }
\ No newline at end of file