refactor(header): renomeia HeaderBottom para HeaderNavbar, aplica WidthContext no header

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;
-    }
   }
 }

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 (
     <>
-      <HeaderMobile className={`${styles["container"]} ${styles["header-mobile"]}`} />
-      <HeaderDesktop className={`${styles["container"]} ${styles["header-desktop"]}`} />
+      {isMobile ? (
+        <HeaderMobile
+          className={`${styles["container"]} ${styles["header-mobile"]}`}
+        />
+      ) : (
+        <HeaderDesktop
+          className={`${styles["container"]} ${styles["header-desktop"]}`}
+        />
+      )}
     </>
   );
 };

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;
     }
   }

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) => {
           <Minicart />
         </div>
       </div>
-      <HeaderBottom />
+      <HeaderNavbar />
     </header>
   );
 };

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;
 }

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;

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 (
     <nav className={styles["navbar"]}>
       <ul className={styles["navbar-list"]}>
@@ -23,4 +23,4 @@ const HeaderBottom = () => {
   );
 };
 
-export { HeaderBottom };
+export { HeaderNavbar };