From 553fd8a402c52373cd5b4942a21cc0ed8c71df89 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Tue, 3 Jan 2023 09:52:07 -0300 Subject: [PATCH 1/5] feat(HeaderTop): Cria a estrutura HTML do HeaderTop --- .../src/assets/imgs/logo-m3.png | Bin 0 -> 2935 bytes .../src/assets/svgs/carrinho.svg | 12 ++++++++ .../src/assets/svgs/lupa.svg | 3 ++ .../src/components/Header/Header.tsx | 12 ++++++++ .../Header/components/HeaderTop.tsx | 29 ++++++++++++++++++ desafio-react-typescript/src/index.tsx | 2 +- .../src/pages/Institucional.tsx | 3 +- .../src/styles/global.scss | 2 ++ 8 files changed, 61 insertions(+), 2 deletions(-) create mode 100644 desafio-react-typescript/src/assets/imgs/logo-m3.png create mode 100644 desafio-react-typescript/src/assets/svgs/carrinho.svg create mode 100644 desafio-react-typescript/src/assets/svgs/lupa.svg create mode 100644 desafio-react-typescript/src/components/Header/Header.tsx create mode 100644 desafio-react-typescript/src/components/Header/components/HeaderTop.tsx diff --git a/desafio-react-typescript/src/assets/imgs/logo-m3.png b/desafio-react-typescript/src/assets/imgs/logo-m3.png new file mode 100644 index 0000000000000000000000000000000000000000..b205989c277eba5fe97a916e8a567c791fb37e7f GIT binary patch literal 2935 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 h0Na3PwSyc+{{=79r|KO=we + + + + + + + + + + + diff --git a/desafio-react-typescript/src/assets/svgs/lupa.svg b/desafio-react-typescript/src/assets/svgs/lupa.svg new file mode 100644 index 0000000..9f9b9f0 --- /dev/null +++ b/desafio-react-typescript/src/assets/svgs/lupa.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio-react-typescript/src/components/Header/Header.tsx b/desafio-react-typescript/src/components/Header/Header.tsx new file mode 100644 index 0000000..9a91b8b --- /dev/null +++ b/desafio-react-typescript/src/components/Header/Header.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import HeaderTop from "./components/HeaderTop"; + +const Header = () => { + return ( +
+ +
+ ) +} + +export default Header; \ No newline at end of file diff --git a/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx b/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx new file mode 100644 index 0000000..ed6e992 --- /dev/null +++ b/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx @@ -0,0 +1,29 @@ +import React from "react"; + +import logoM3 from "../../../assets/imgs/logo-m3.png"; +import carrinho from "../../../assets/svgs/carrinho.svg"; +import lupa from "../../../assets/svgs/lupa.svg"; + +const HeaderTop = () => { + return ( +
+
+ Logo da M3 +
+
+ + + + +
+
+ Entrar + + + +
+
+ ); +}; + +export default HeaderTop; diff --git a/desafio-react-typescript/src/index.tsx b/desafio-react-typescript/src/index.tsx index c651365..c10bda9 100644 --- a/desafio-react-typescript/src/index.tsx +++ b/desafio-react-typescript/src/index.tsx @@ -1,6 +1,6 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import "./global.scss"; +import "./styles/global.scss"; import { Institucional } from "./pages/Institucional"; diff --git a/desafio-react-typescript/src/pages/Institucional.tsx b/desafio-react-typescript/src/pages/Institucional.tsx index 0d9a1c3..c3c62b0 100644 --- a/desafio-react-typescript/src/pages/Institucional.tsx +++ b/desafio-react-typescript/src/pages/Institucional.tsx @@ -1,9 +1,10 @@ import React from "react"; +import Header from "../components/Header/Header"; const Institucional = () => { return (
-

Institucional

+
) } diff --git a/desafio-react-typescript/src/styles/global.scss b/desafio-react-typescript/src/styles/global.scss index 1b915e8..85f9157 100644 --- a/desafio-react-typescript/src/styles/global.scss +++ b/desafio-react-typescript/src/styles/global.scss @@ -1,3 +1,5 @@ +@import "variaveis.scss"; + * { margin: 0; padding: 0; From bf6587004660b9fa778aaef383d00c49d8e7d0d6 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Tue, 3 Jan 2023 12:06:48 -0300 Subject: [PATCH 2/5] feat(HeaderTop): Cria o estilo para todos os tamanhos de tela --- .../src/assets/imgs/Logo-M3Academy.png | Bin 0 -> 6366 bytes .../src/assets/imgs/logo-m3.png | Bin 2935 -> 0 bytes .../src/assets/svgs/menu-hamburguer.svg | 5 + .../Header/components/HeaderTop.module.scss | 123 ++++++++++++++++++ .../Header/components/HeaderTop.tsx | 48 ++++--- .../src/pages/Institucional.tsx | 4 +- .../src/styles/global.scss | 29 ++++- .../src/styles/mixins.scss | 32 +++++ .../src/styles/variaveis.scss | 11 +- 9 files changed, 230 insertions(+), 22 deletions(-) create mode 100644 desafio-react-typescript/src/assets/imgs/Logo-M3Academy.png delete mode 100644 desafio-react-typescript/src/assets/imgs/logo-m3.png create mode 100644 desafio-react-typescript/src/assets/svgs/menu-hamburguer.svg create mode 100644 desafio-react-typescript/src/components/Header/components/HeaderTop.module.scss create mode 100644 desafio-react-typescript/src/styles/mixins.scss diff --git a/desafio-react-typescript/src/assets/imgs/Logo-M3Academy.png b/desafio-react-typescript/src/assets/imgs/Logo-M3Academy.png new file mode 100644 index 0000000000000000000000000000000000000000..ba1dd73c4d8172f961dc049141bf71610b11eeb4 GIT binary patch literal 6366 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 h0Na3PwSyc+{{=79r|KO=we + + + + diff --git a/desafio-react-typescript/src/components/Header/components/HeaderTop.module.scss b/desafio-react-typescript/src/components/Header/components/HeaderTop.module.scss new file mode 100644 index 0000000..26e90b2 --- /dev/null +++ b/desafio-react-typescript/src/components/Header/components/HeaderTop.module.scss @@ -0,0 +1,123 @@ +@import "../../../styles/variaveis.scss"; +@import "../../../styles/mixins.scss"; + +.headerTop { + @include display(flex, row, center, space-between); + + padding: 22px 100px; + background: $black; + + @include mq($lg, max) { + padding: 25px 16px; + flex-wrap: wrap; + } + + img { + display: block; + width: 100%; + } + + &__menu-container { + display: none; + @include mq($lg, max) { + display: block; + } + } + + &__image-container { + width: 12.59259259%; + min-width: 100px; + + @include mq($lg, max) { + width: 13.709678%; + } + + @include mq($sm, max) { + width: 39.650145%; + } + + @include mq($xl, min) { + width: 11.549%; + } + } + + &__image { + width: 100%; + } + + &__input-container { + position: relative; + width: 22.77777777778%; + + @include mq($lg, max) { + order: 3; + width: 100%; + margin-top: 25px; + } + + @include mq($xl, min) { + width: 22.4185%; + } + } + + &__input { + width: 100%; + height: 32px; + padding: 8px 44px 8px 16px; + + @include borderStyle(2px, $primary-700, 5px); + @include fontStyle($Roboto, 400, 14px, 16px, $primary-500); + + @include mq($lg, max) { + height: 35px; + padding: 10px 44px 10px 16px ; + } + + @include mq($xl, min) { + height: 57px; + padding: 12px 64px 12px 16px; + + @include fontStyleResponsive(28px, 33px); + } + } + + &__lupa-wrapper { + position: absolute; + top: 50%; + right: 0; + margin-right: 16px; + transform: translateY(-50%); + + @include mq($xl, min) { + width: 35.15px; + height: 35.15px; + + margin-right: 16.47px; + } + } + + &__login-container { + @include display(flex, row, center, space-between); + gap: 55px; + } + + &__login { + @include fontStyle($Roboto, 400, 14px, 16px, $white); + text-transform: uppercase; + + @include mq($lg, max) { + display: none; + } + + @include mq($xl, min) { + @include fontStyleResponsive(28px, 33px); + } + } + + &__minicart-container { + @include mq($xl, min) { + width: 54.68px; + height: 54.68px; + } + } +} diff --git a/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx b/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx index ed6e992..a10bf5c 100644 --- a/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx +++ b/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx @@ -1,26 +1,44 @@ import React from "react"; -import logoM3 from "../../../assets/imgs/logo-m3.png"; +import logoM3Academy from "../../../assets/imgs/Logo-M3Academy.png"; import carrinho from "../../../assets/svgs/carrinho.svg"; import lupa from "../../../assets/svgs/lupa.svg"; +import menu from "../../../assets/svgs/menu-hamburguer.svg" + +import styles from "./HeaderTop.module.scss"; const HeaderTop = () => { return ( -
-
- Logo da M3 -
-
- - - - +
+
+
-
- Entrar - - - +
+ Logo da M3 Academy +
+
+ + +
+
+ + Entrar + +
); diff --git a/desafio-react-typescript/src/pages/Institucional.tsx b/desafio-react-typescript/src/pages/Institucional.tsx index c3c62b0..4604f89 100644 --- a/desafio-react-typescript/src/pages/Institucional.tsx +++ b/desafio-react-typescript/src/pages/Institucional.tsx @@ -3,9 +3,9 @@ import Header from "../components/Header/Header"; const Institucional = () => { return ( -
+ <>
-
+ ) } diff --git a/desafio-react-typescript/src/styles/global.scss b/desafio-react-typescript/src/styles/global.scss index 85f9157..3463675 100644 --- a/desafio-react-typescript/src/styles/global.scss +++ b/desafio-react-typescript/src/styles/global.scss @@ -1,8 +1,29 @@ -@import "variaveis.scss"; +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } +input, +button { + border: none; + outline: none; +} + +button { + cursor: pointer; + background: transparent; +} + +a { + text-decoration: none; +} + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + display: none; +} diff --git a/desafio-react-typescript/src/styles/mixins.scss b/desafio-react-typescript/src/styles/mixins.scss new file mode 100644 index 0000000..c287845 --- /dev/null +++ b/desafio-react-typescript/src/styles/mixins.scss @@ -0,0 +1,32 @@ +@mixin display($display, $fd, $al, $jc) { + display: $display; + flex-direction: $fd; + align-items: $al; + justify-content: $jc; +} + +@mixin fontStyle($fm, $fw, $fs, $lh, $fc) { + font-family: $fm; + font-weight: $fw; + font-size: $fs; + line-height: $lh; + color: $fc; +} + +@mixin fontStyleResponsive($fs, $lh) { + font-size: $fs; + line-height: $lh; + } + + + +@mixin borderStyle($bpx, $bc, $br) { + border: $bpx solid $bc; + border-radius: $br; +} + +@mixin mq($width, $type) { + @media only screen and (#{$type}-width: $width) { + @content; + } +} diff --git a/desafio-react-typescript/src/styles/variaveis.scss b/desafio-react-typescript/src/styles/variaveis.scss index 19f11f9..82ed3d7 100644 --- a/desafio-react-typescript/src/styles/variaveis.scss +++ b/desafio-react-typescript/src/styles/variaveis.scss @@ -11,4 +11,13 @@ $primary-500: #C6C6C6; $primary-600: #C4C4C4; $primary-700: #F2F2F2; $primary-800: #F9F9F9; -$primary-900: #FF0000; \ No newline at end of file +$primary-900: #FF0000; + + +//Fonts +$Roboto: "Roboto"; + +//media Queries +$sm: 375px; +$lg: 1024px; +$xl: 2500px; \ No newline at end of file From 6394f80cd2c56e462d70a7370f564c9d121b32be Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Tue, 3 Jan 2023 13:26:44 -0300 Subject: [PATCH 3/5] feat(HeaderBottom): Cria a estrutura HTML do HeaderBottom --- .../src/components/Header/Header.tsx | 2 ++ .../components/Header/components/HeaderBottom.tsx | 15 +++++++++++++++ 2 files changed, 17 insertions(+) create mode 100644 desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx diff --git a/desafio-react-typescript/src/components/Header/Header.tsx b/desafio-react-typescript/src/components/Header/Header.tsx index 9a91b8b..e61dbb1 100644 --- a/desafio-react-typescript/src/components/Header/Header.tsx +++ b/desafio-react-typescript/src/components/Header/Header.tsx @@ -1,10 +1,12 @@ import React from "react"; +import HeaderBottom from "./components/HeaderBottom"; import HeaderTop from "./components/HeaderTop"; const Header = () => { return (
+
) } diff --git a/desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx b/desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx new file mode 100644 index 0000000..45a42ad --- /dev/null +++ b/desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +const HeaderBottom = () => { + return ( + + ) +} + +export default HeaderBottom; \ No newline at end of file From 5bdbc158cd262d8b05845efae03b5baa726c44e6 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Tue, 3 Jan 2023 14:29:00 -0300 Subject: [PATCH 4/5] feat(HeaderBottom): Cria os estilos para todos os tamanhos de tela --- .../src/assets/svgs/close-button.svg | 4 + .../src/components/Header/Header.module.scss | 3 + .../src/components/Header/Header.tsx | 3 +- .../components/HeaderBottom.module.scss | 78 +++++++++++++++++++ .../Header/components/HeaderBottom.tsx | 45 ++++++++--- .../Header/components/HeaderTop.module.scss | 8 +- .../Header/components/HeaderTop.tsx | 9 ++- desafio-react-typescript/src/styles/all.scss | 2 + .../src/styles/global.scss | 7 +- .../src/styles/mixins.scss | 3 +- .../src/styles/variaveis.scss | 4 - 11 files changed, 139 insertions(+), 27 deletions(-) create mode 100644 desafio-react-typescript/src/assets/svgs/close-button.svg create mode 100644 desafio-react-typescript/src/components/Header/Header.module.scss create mode 100644 desafio-react-typescript/src/components/Header/components/HeaderBottom.module.scss create mode 100644 desafio-react-typescript/src/styles/all.scss diff --git a/desafio-react-typescript/src/assets/svgs/close-button.svg b/desafio-react-typescript/src/assets/svgs/close-button.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/desafio-react-typescript/src/assets/svgs/close-button.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio-react-typescript/src/components/Header/Header.module.scss b/desafio-react-typescript/src/components/Header/Header.module.scss new file mode 100644 index 0000000..ab9f51a --- /dev/null +++ b/desafio-react-typescript/src/components/Header/Header.module.scss @@ -0,0 +1,3 @@ +.header { + position: relative; +} \ No newline at end of file diff --git a/desafio-react-typescript/src/components/Header/Header.tsx b/desafio-react-typescript/src/components/Header/Header.tsx index e61dbb1..385b77c 100644 --- a/desafio-react-typescript/src/components/Header/Header.tsx +++ b/desafio-react-typescript/src/components/Header/Header.tsx @@ -1,10 +1,11 @@ import React from "react"; import HeaderBottom from "./components/HeaderBottom"; import HeaderTop from "./components/HeaderTop"; +import styles from "./Header.module.scss"; const Header = () => { 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 new file mode 100644 index 0000000..f8ec82b --- /dev/null +++ b/desafio-react-typescript/src/components/Header/components/HeaderBottom.module.scss @@ -0,0 +1,78 @@ +@import "../../../styles/all.scss"; + +.headerBottom { + border-top: 1px solid $primary-600; + background: $black; + + padding: 14px 100px; + + @include mq($lg, max) { + position: absolute; + background-color: $white; + background: rgba(69, 69, 69, 0.7); + + top: 0; + border: 0; + padding: 0; + width: 100%; + height: 100vh; + + // display: none; + } + + &__head { + display: none; + + @include mq($lg, max) { + @include display(flex, row, center, space-between); + padding: 31px 16px; + background-color: $black; + + width: 96.484375%; + } + + @include mq($sm, max) { + width: 90.4%; + } + } + + &__login { + @include fontStyle(400, 14px, 16px, $white); + text-transform: uppercase; + } + + &__container { + display: flex; + gap: 55px; + + @include mq($lg, max) { + padding: 31px 16px; + display: block; + width: 96.484375%; + height: 507px; + + background-color: white; + + li { + margin-bottom: 12px; + } + } + + @include mq($sm, max) { + width: 90.4%; + } + } + + &__content { + @include fontStyle(500, 14px, 16px, $white); + text-transform: uppercase; + + @include mq($lg, max) { + @include fontStyle(500, 14px, 16px, $primary-600); + } + + @include mq($xl, min) { + @include fontStyleResponsive(28px, 33px); + } + } +} diff --git a/desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx b/desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx index 45a42ad..b3c2197 100644 --- a/desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx +++ b/desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx @@ -1,15 +1,36 @@ -import React from 'react'; +import React from "react"; +import styles from "./HeaderBottom.module.scss"; + +import close from "../../../assets/svgs/close-button.svg"; const HeaderBottom = () => { - return ( - - ) -} + return ( +
+
+

Entrar

+ +
+ +
+ ); +}; -export default HeaderBottom; \ No newline at end of file +export default HeaderBottom; diff --git a/desafio-react-typescript/src/components/Header/components/HeaderTop.module.scss b/desafio-react-typescript/src/components/Header/components/HeaderTop.module.scss index 26e90b2..78292fb 100644 --- a/desafio-react-typescript/src/components/Header/components/HeaderTop.module.scss +++ b/desafio-react-typescript/src/components/Header/components/HeaderTop.module.scss @@ -1,5 +1,5 @@ -@import "../../../styles/variaveis.scss"; -@import "../../../styles/mixins.scss"; +@import "../../../styles/all.scss"; + .headerTop { @include display(flex, row, center, space-between); @@ -66,7 +66,7 @@ padding: 8px 44px 8px 16px; @include borderStyle(2px, $primary-700, 5px); - @include fontStyle($Roboto, 400, 14px, 16px, $primary-500); + @include fontStyle(400, 14px, 16px, $primary-500); @include mq($lg, max) { height: 35px; @@ -102,7 +102,7 @@ } &__login { - @include fontStyle($Roboto, 400, 14px, 16px, $white); + @include fontStyle(400, 14px, 16px, $white); text-transform: uppercase; @include mq($lg, max) { diff --git a/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx b/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx index a10bf5c..73b4867 100644 --- a/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx +++ b/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx @@ -3,16 +3,19 @@ import React from "react"; import logoM3Academy from "../../../assets/imgs/Logo-M3Academy.png"; import carrinho from "../../../assets/svgs/carrinho.svg"; import lupa from "../../../assets/svgs/lupa.svg"; -import menu from "../../../assets/svgs/menu-hamburguer.svg" +import menu from "../../../assets/svgs/menu-hamburguer.svg"; import styles from "./HeaderTop.module.scss"; const HeaderTop = () => { + return (
-
diff --git a/desafio-react-typescript/src/styles/all.scss b/desafio-react-typescript/src/styles/all.scss new file mode 100644 index 0000000..996eacd --- /dev/null +++ b/desafio-react-typescript/src/styles/all.scss @@ -0,0 +1,2 @@ +@import "./mixins.scss"; +@import "variaveis.scss"; \ No newline at end of file diff --git a/desafio-react-typescript/src/styles/global.scss b/desafio-react-typescript/src/styles/global.scss index 3463675..f6d6243 100644 --- a/desafio-react-typescript/src/styles/global.scss +++ b/desafio-react-typescript/src/styles/global.scss @@ -1,9 +1,10 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; + font-family: "Roboto", sans-serif; } input, @@ -21,6 +22,10 @@ a { text-decoration: none; } +ul { + list-style-type: none; +} + input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, diff --git a/desafio-react-typescript/src/styles/mixins.scss b/desafio-react-typescript/src/styles/mixins.scss index c287845..100e7d9 100644 --- a/desafio-react-typescript/src/styles/mixins.scss +++ b/desafio-react-typescript/src/styles/mixins.scss @@ -5,8 +5,7 @@ justify-content: $jc; } -@mixin fontStyle($fm, $fw, $fs, $lh, $fc) { - font-family: $fm; +@mixin fontStyle($fw, $fs, $lh, $fc) { font-weight: $fw; font-size: $fs; line-height: $lh; diff --git a/desafio-react-typescript/src/styles/variaveis.scss b/desafio-react-typescript/src/styles/variaveis.scss index 82ed3d7..ae83622 100644 --- a/desafio-react-typescript/src/styles/variaveis.scss +++ b/desafio-react-typescript/src/styles/variaveis.scss @@ -13,10 +13,6 @@ $primary-700: #F2F2F2; $primary-800: #F9F9F9; $primary-900: #FF0000; - -//Fonts -$Roboto: "Roboto"; - //media Queries $sm: 375px; $lg: 1024px; From ed95c276f6224ada9d0a247ba5204a7f9340cb06 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Tue, 3 Jan 2023 15:25:56 -0300 Subject: [PATCH 5/5] =?UTF-8?q?feat(Header):=20Cria=20a=20l=C3=B3gica=20pa?= =?UTF-8?q?ra=20o=20menu=20e=20input=20de=20busca?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Header/Header.tsx | 8 +++++--- .../components/HeaderBottom.module.scss | 10 +++++++++- .../Header/components/HeaderBottom.tsx | 20 ++++++++++++++++--- .../Header/components/HeaderTop.tsx | 18 ++++++++++++++--- 4 files changed, 46 insertions(+), 10 deletions(-) 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 (
@@ -27,11 +34,16 @@ const HeaderTop = () => {
setValue(e.target.value)} className={styles["headerTop__input"]} type="search" placeholder="Buscar..." /> -