diff --git a/desafio-react-typescript/src/components/Header/Header.tsx b/desafio-react-typescript/src/components/Header/Header.tsx
index 385b77c..02016cd 100644
--- a/desafio-react-typescript/src/components/Header/Header.tsx
+++ b/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 (
)
}
diff --git a/desafio-react-typescript/src/components/Header/components/HeaderBottom.module.scss b/desafio-react-typescript/src/components/Header/components/HeaderBottom.module.scss
index f8ec82b..b585c29 100644
--- a/desafio-react-typescript/src/components/Header/components/HeaderBottom.module.scss
+++ b/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 @@
}
}
}
+
diff --git a/desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx b/desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx
index b3c2197..b28dabc 100644
--- a/desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx
+++ b/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 (
-
+
Entrar
-
diff --git a/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx b/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx
index 73b4867..d3b18e9 100644
--- a/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx
+++ b/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 (
setIsOpen(true)}
>
@@ -27,11 +34,16 @@ const HeaderTop = () => {