feat(menu): adiciona menu mobile

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>
   );

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;

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>
   );

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;

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%;
+        }
+    }
 }