From e4d73b8f6f3d970a002a5bccadcadb01510d983c Mon Sep 17 00:00:00 2001 From: Andrea Matsunaga Date: Tue, 17 Jan 2023 15:41:16 -0300 Subject: [PATCH] refactor(header): renomeia HeaderBottom para HeaderNavbar, aplica WidthContext no header --- src/components/Header/Header.module.scss | 10 ---------- src/components/Header/Header.tsx | 20 ++++++++++++++----- .../HeaderDesktop/HeaderDesktop.module.scss | 4 ++-- .../Header/HeaderDesktop/HeaderDesktop.tsx | 7 +++---- .../Header/HeaderMobile/HeaderMobile.tsx | 6 +++--- .../HeaderNavbar.module.scss} | 14 +++++++------ .../HeaderNavbar.tsx} | 12 +++++------ 7 files changed, 37 insertions(+), 36 deletions(-) rename src/components/Header/{HeaderBottom/HeaderBottom.module.scss => HeaderNavbar/HeaderNavbar.module.scss} (75%) rename src/components/Header/{HeaderBottom/HeaderBottom.tsx => HeaderNavbar/HeaderNavbar.tsx} (62%) diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss index 2db6719..c7a80d1 100644 --- a/src/components/Header/Header.module.scss +++ b/src/components/Header/Header.module.scss @@ -6,15 +6,5 @@ display: flex; flex-direction: column; gap: 25px; - - @media screen and (width > 1024px) { - display: none; - } - } - - &.header-desktop { - @media screen and (width <= 1024px) { - display: none; - } } } diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 15d4cc1..da3de6f 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,15 +1,25 @@ -// import React from "react"; - -import styles from "./Header.module.scss"; +import React, { useContext } from "react"; import { HeaderDesktop } from "./HeaderDesktop/HeaderDesktop"; import { HeaderMobile } from "./HeaderMobile/HeaderMobile"; +import { WidthContext } from "../../contexts/WidthContext"; + +import styles from "./Header.module.scss"; const Header = () => { + const { isMobile } = useContext(WidthContext); + return ( <> - - + {isMobile ? ( + + ) : ( + + )} ); }; diff --git a/src/components/Header/HeaderDesktop/HeaderDesktop.module.scss b/src/components/Header/HeaderDesktop/HeaderDesktop.module.scss index a29ca70..0f656f8 100644 --- a/src/components/Header/HeaderDesktop/HeaderDesktop.module.scss +++ b/src/components/Header/HeaderDesktop/HeaderDesktop.module.scss @@ -2,13 +2,13 @@ display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; - padding: 25px 100px; + padding: 22px 100px; border-bottom: 1px solid #c4c4c4; .login-cart-wrapper { display: flex; - gap: 55px; align-items: center; justify-content: right; + gap: 55px; } } \ No newline at end of file diff --git a/src/components/Header/HeaderDesktop/HeaderDesktop.tsx b/src/components/Header/HeaderDesktop/HeaderDesktop.tsx index 61443fd..fe7ef7d 100644 --- a/src/components/Header/HeaderDesktop/HeaderDesktop.tsx +++ b/src/components/Header/HeaderDesktop/HeaderDesktop.tsx @@ -1,13 +1,12 @@ import React from "react"; -import styles from "./HeaderDesktop.module.scss"; - -import { HeaderBottom } from "../HeaderBottom/HeaderBottom"; import { Logo } from "../Logo/Logo"; import { Searchbox } from "../Searchbox/Searchbox"; import { LoginButton } from "../LoginButton/LoginButton"; import { Minicart } from "../Minicart/Minicart"; +import { HeaderNavbar } from "../HeaderNavbar/HeaderNavbar"; +import styles from "./HeaderDesktop.module.scss"; interface HeaderDesktopProps { className: string; } @@ -25,7 +24,7 @@ const HeaderDesktop = (props: HeaderDesktopProps) => { - + ); }; diff --git a/src/components/Header/HeaderMobile/HeaderMobile.tsx b/src/components/Header/HeaderMobile/HeaderMobile.tsx index 72a0e66..fab167f 100644 --- a/src/components/Header/HeaderMobile/HeaderMobile.tsx +++ b/src/components/Header/HeaderMobile/HeaderMobile.tsx @@ -1,11 +1,11 @@ import React from "react"; -import { Searchbox } from "../Searchbox/Searchbox"; -import { Logo } from "../Logo/Logo"; + import { MenuButton } from "../MenuButton/MenuButton"; +import { Logo } from "../Logo/Logo"; import { Minicart } from "../Minicart/Minicart"; +import { Searchbox } from "../Searchbox/Searchbox"; import styles from "./HeaderMobile.module.scss"; - interface HeaderMobileProps { className: string; } diff --git a/src/components/Header/HeaderBottom/HeaderBottom.module.scss b/src/components/Header/HeaderNavbar/HeaderNavbar.module.scss similarity index 75% rename from src/components/Header/HeaderBottom/HeaderBottom.module.scss rename to src/components/Header/HeaderNavbar/HeaderNavbar.module.scss index b9d13e2..6167d93 100644 --- a/src/components/Header/HeaderBottom/HeaderBottom.module.scss +++ b/src/components/Header/HeaderNavbar/HeaderNavbar.module.scss @@ -2,22 +2,24 @@ padding: 14px 100px; .navbar-list { - display: flex; - gap: 55px; - list-style: none; margin: 0; padding: 0; + display: flex; + gap: 55px; .navbar-list-item { a { - text-decoration: none; font-family: "Roboto"; font-style: normal; - font-weight: 500; // cursos no componente header à esquerda está 400 e nas páginas 500 + font-weight: 500; font-size: 14px; line-height: 16px; - text-transform: uppercase; color: #ffffff; + text-transform: uppercase; + + &:hover { + filter: brightness(0.5); + } @media screen and (width >= 2500px) { font-size: 28px; diff --git a/src/components/Header/HeaderBottom/HeaderBottom.tsx b/src/components/Header/HeaderNavbar/HeaderNavbar.tsx similarity index 62% rename from src/components/Header/HeaderBottom/HeaderBottom.tsx rename to src/components/Header/HeaderNavbar/HeaderNavbar.tsx index b18edf2..215ac09 100644 --- a/src/components/Header/HeaderBottom/HeaderBottom.tsx +++ b/src/components/Header/HeaderNavbar/HeaderNavbar.tsx @@ -1,15 +1,15 @@ import React from "react"; import { Link } from "react-router-dom"; -import styles from "./HeaderBottom.module.scss"; +import styles from "./HeaderNavbar.module.scss"; const navLinks = [ - { name: "Cursos", value: "cursos" }, - { name: "Saiba Mais", value: "saiba-mais" }, - { name: "Institucionais", value: "intitucionais" }, + { name: "Cursos", value: "/" }, + { name: "Saiba Mais", value: "/" }, + { name: "Institucionais", value: "institucionais/sobre" }, ]; -const HeaderBottom = () => { +const HeaderNavbar = () => { return (