src/components/Header/HeaderWrapper.module.scss

@@ -7,7 +7,7 @@
   align-items: center;
   border-bottom: 1px solid $primary-500;
   padding: 0 100px;
-  background-color: $black;
+  background-color: $black-100;
 
   @media (min-width: 2500px) {
     padding: 22px 100px;

src/components/Header/Menu.css

@@ -1,89 +0,0 @@
-.menu-wrapper {
-  position: absolute;
-  /* O inset é uma abreviação do top, bottom, left e right juntos. */
-  inset: 0;
-  display: flex;
-  pointer-events: none;
-  opacity: 0;
-}
-
-div:has(> .menu-wrapper.false) {
-  display: none;
-}
-
-@media (max-width: 1024px) {
-  div:has(> .menu-wrapper.false) {
-    display: flex;
-  }
-}
-
-.menu-wrapper.false {
-  display: none;
-}
-
-.menu-wrapper.opened {
-  opacity: 1;
-  pointer-events: all;
-}
-
-.menu-content {
-  z-index: 2;
-  width: 90.5%;
-  height: 585px;
-}
-
-@media (max-width: 1024px) {
-  .menu-icon {
-    display: flex;
-  }
-}
-
-@media (min-width: 280px) and (max-width: 1024px) {
-  .menu-content {
-    width: 95.30%;
-  }
-}
-
-.menu-content-header {
-  padding: 31px 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #000;
-}
-
-.menu-content-header a {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 16px;
-  text-transform: uppercase;
-  color: #fff;
-  text-decoration: none;
-}
-
-.menu-content-nav {
-  background-color: #fff;
-  height: 100%;
-  padding: 31px 16px;
-}
-
-.menu-content-nav li {
-  list-style: none;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 16px;
-  text-transform: uppercase;
-  color: #c4c4c4;
-}
-
-.menu-content-nav li:nth-child(2) {
-  margin: 12px 0;
-}
-
-.menu-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: #454545B2;
-  z-index: 1;
-}

src/components/Header/Menu.module.scss

@@ -0,0 +1,74 @@
+@import "../../styles/utils/variables.scss";
+
+.menuWrapper {
+  position: absolute;
+  /* O inset é uma abreviação do top, bottom, left e right juntos. */
+  inset: 0;
+  display: flex;
+  pointer-events: none;
+  opacity: 0;
+
+  .menuContent {
+    z-index: 2;
+    width: 90.5%;
+  }
+
+  .menuContent-header {
+    padding: 31px 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: $black-100;
+
+    a {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 16px;
+      text-transform: uppercase;
+      color: $white;
+      text-decoration: none;
+    }
+  }
+
+  .menuContent-nav {
+    background-color: $white;
+    height: 585px;
+    padding: 31px 16px;
+
+    li {
+      list-style: none;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16px;
+      text-transform: uppercase;
+      color: $primary-400;
+
+      &:nth-child(2) {
+        margin: 12px 0;
+      }
+    }
+  }
+
+  .menuOverlay {
+    position: fixed;
+    inset: 0;
+    background-color: #454545b2;
+    z-index: 1;
+  }
+}
+
+.menuOpened {
+  opacity: 1;
+  pointer-events: all;
+
+  @media (min-width: 280px) and (max-width: 1024px) {
+    width: 95.3%;
+  }
+}
+
+@media (min-width: 1025px) {
+  div:has(> .menuWrapper) {
+    display: none;
+  }
+}

src/components/Header/MenuOpened.tsx

@@ -1,7 +1,10 @@
+// Bibliotecas
 import React from "react";
 
-import "./Menu.css";
+// Componentes
+import menuOpened from "./Menu.module.scss";
 
+// Imagens
 import menuClose from "../../assets/svg/closeMenu.svg";
 
 interface MenuProps {
@@ -11,9 +14,15 @@ interface MenuProps {
 
 const MenuOpened = ({ isOpened, setIsOpened }: MenuProps) => {
   return (
-    <div className={`menu-wrapper ${isOpened && "opened"}`}>
-      <div className="menu-content">
-        <div className="menu-content-header">
+    <div
+      className={
+        isOpened
+          ? `${menuOpened['menuWrapper']} ${menuOpened["menuOpened"]}`
+          : `${menuOpened["menuWrapper"]}`
+      }
+    >
+      <div className={menuOpened["menuContent"]}>
+        <div className={menuOpened["menuContent-header"]}>
           <div>
             <a href="#entrar">Entrar</a>
           </div>
@@ -27,7 +36,7 @@ const MenuOpened = ({ isOpened, setIsOpened }: MenuProps) => {
           </div>
         </div>
 
-        <nav className="menu-content-nav">
+        <nav className={menuOpened["menuContent-nav"]}>
           <ul>
             <li>Cursos</li>
             <li>Saiba mais</li>
@@ -37,7 +46,7 @@ const MenuOpened = ({ isOpened, setIsOpened }: MenuProps) => {
       </div>
 
       <div
-        className="menu-overlay"
+        className={menuOpened["menuOverlay"]}
         onClick={() => setIsOpened(false)}
       />
     </div>