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 (