feat(Header): Cria a lógica para o menu e input de busca

desafio-react-typescript/src/components/Header/Header.tsx

@@ -1,13 +1,15 @@
-import React from "react";
+import React, { useState } from "react";
 import HeaderBottom from "./components/HeaderBottom";
 import HeaderTop from "./components/HeaderTop";
 import styles from "./Header.module.scss";
 
 const Header = () => {
+
+    const [isOpen, setIsOpen] = useState(false);
     return (
         <header className={styles["header"]}>
-            <HeaderTop />
-            <HeaderBottom />
+            <HeaderTop isOpen={isOpen} setIsOpen={setIsOpen}/>
+            <HeaderBottom isOpen={isOpen} setIsOpen={setIsOpen}/>
         </header>
     )
 }

desafio-react-typescript/src/components/Header/components/HeaderBottom.module.scss

@@ -17,7 +17,14 @@
     width: 100%;
     height: 100vh;
 
-    // display: none;
+    left: -100%;
+
+    transition: all 0.3s linear;
+
+  }
+
+  &__active {
+    left: 0;
   }
 
   &__head {
@@ -76,3 +83,4 @@
     }
   }
 }
+

desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx

@@ -3,12 +3,26 @@ import styles from "./HeaderBottom.module.scss";
 
 import close from "../../../assets/svgs/close-button.svg";
 
-const HeaderBottom = () => {
+interface HeaderBottomProps {
+  isOpen: boolean;
+  setIsOpen(value: boolean): void;
+}
+
+const HeaderBottom = ({ isOpen, setIsOpen }: HeaderBottomProps) => {
   return (
-    <div className={styles["headerBottom"]}>
+    <div
+      className={
+        isOpen
+          ? `${styles["headerBottom"]} ${styles["headerBottom__active"]}`
+          : `${styles["headerBottom"]}`
+      }
+    >
       <div className={styles["headerBottom__head"]}>
         <p className={styles["headerBottom__login"]}>Entrar</p>
-        <button className={styles["headerBottom__close-button "]}>
+        <button
+          className={styles["headerBottom__close-button "]}
+          onClick={() => setIsOpen(false)}
+        >
           <img src={close} alt="Fechar" />
         </button>
       </div>

desafio-react-typescript/src/components/Header/components/HeaderTop.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import logoM3Academy from "../../../assets/imgs/Logo-M3Academy.png";
 import carrinho from "../../../assets/svgs/carrinho.svg";
@@ -7,13 +7,20 @@ import menu from "../../../assets/svgs/menu-hamburguer.svg";
 
 import styles from "./HeaderTop.module.scss";
 
-const HeaderTop = () => {
+interface HeaderTopProps {
+  isOpen: boolean;
+  setIsOpen(value: boolean): void;
+}
+
+const HeaderTop = ({ isOpen, setIsOpen }: HeaderTopProps) => {
+  const [value, setValue] = useState("");
 
   return (
     <div className={styles["headerTop"]}>
       <div className={styles["headerTop__menu-container"]}>
         <button
           className={styles["headerTop__menu-mobile"]}
+          onClick={() => setIsOpen(true)}
         >
           <img className={styles["headerTop__menu"]} src={menu} alt="Menu" />
         </button>
@@ -27,11 +34,16 @@ const HeaderTop = () => {
       </figure>
       <div className={styles["headerTop__input-container"]}>
         <input
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
           className={styles["headerTop__input"]}
           type="search"
           placeholder="Buscar..."
         />
-        <button className={styles["headerTop__lupa-wrapper"]}>
+        <button
+          className={styles["headerTop__lupa-wrapper"]}
+          onClick={() => setValue("")}
+        >
           <img src={lupa} alt="Lupa" />
         </button>
       </div>