react-project/src/assets/styles/Home.module.scss

@@ -1,8 +1,12 @@
 .main {
   border: 1px solid red;
 
-  header {
-    margin-bottom: 50px;
+  margin-left: 100px;
+  margin-right: 100px;
+
+  &__title {
+    text-align: center;
+    margin-bottom: 80px;
   }
 
   .navigation {
@@ -10,10 +14,16 @@
 
     &__items {
       list-style: none;
-      margin-left: 20px;
+      border-right: 1px solid black;
+      width: 302px;
+      height: 285px;
+      margin-right: 30px;
 
       a {
+        padding: 10px 16px;
+        display: block;
         text-decoration: none;
+        color: gray;
         /*color: $black;*/
       }
     }
@@ -23,8 +33,3 @@
     margin-top: 50px;
   }
 }
-
-.testeh3 {
-  color: red;
-  margin-bottom: 20px;
-}

react-project/src/assets/styles/global.scss

@@ -6,3 +6,8 @@
 
 //Colors
 $black: #000;
+
+.ativo {
+  color: white !important;
+  background-color: black;
+}

react-project/src/components/Navigation.tsx

@@ -4,25 +4,57 @@ import { NavLink } from "react-router-dom";
 import styles from "../assets/styles/Home.module.scss";
 
 const Navigation = () => {
+  let activeClassName = "ativo";
+
   return (
     <ul className={styles["navigation__items"]}>
       <li className={styles["navigation__item"]}>
-        <NavLink to="/sobre">Sobre</NavLink>
+        <NavLink
+          to="/"
+          className={({ isActive }) => (isActive ? activeClassName : undefined)}
+        >
+          Sobre
+        </NavLink>
       </li>
       <li className={styles["navigation__item"]}>
-        <NavLink to="/pagamento">Forma de Pagamento</NavLink>
+        <NavLink
+          to="/pagamento"
+          className={({ isActive }) => (isActive ? activeClassName : undefined)}
+        >
+          Forma de Pagamento
+        </NavLink>
       </li>
       <li className={styles["navigation__item"]}>
-        <NavLink to="/entrega">Entrega</NavLink>
+        <NavLink
+          to="/entrega"
+          className={({ isActive }) => (isActive ? activeClassName : undefined)}
+        >
+          Entrega
+        </NavLink>
       </li>
       <li className={styles["navigation__item"]}>
-        <NavLink to="/troca">Troca e Devolução</NavLink>
+        <NavLink
+          to="/troca"
+          className={({ isActive }) => (isActive ? activeClassName : undefined)}
+        >
+          Troca e Devolução
+        </NavLink>
       </li>
       <li className={styles["navigation__item"]}>
-        <NavLink to="/seguranca">Segurança e Privacidade</NavLink>
+        <NavLink
+          to="/seguranca"
+          className={({ isActive }) => (isActive ? activeClassName : undefined)}
+        >
+          Segurança e Privacidade
+        </NavLink>
       </li>
       <li className={styles["navigation__item"]}>
-        <NavLink to="/contato">Contato</NavLink>
+        <NavLink
+          to="/contato"
+          className={({ isActive }) => (isActive ? activeClassName : undefined)}
+        >
+          Contato
+        </NavLink>
       </li>
     </ul>
   );

react-project/src/pages/Home.tsx

@@ -17,20 +17,22 @@ import { Contato } from "../components/Contato";
 
 const Home = () => {
   return (
-    <div className={styles["main"]}>
+    <div>
       <Header />
-      <h3 className={styles["testeh3"]}>Teste HOME</h3>
+      <div className={styles["main"]}>
+        <h1 className={styles["main__title"]}>INSTITUCIONAL</h1>
 
-      <div className={styles["navigation"]}>
-        <Navigation />
-        <Routes>
-          <Route path="/sobre" element={<Sobre />} />
-          <Route path="/pagamento" element={<Pagamento />} />
-          <Route path="/entrega" element={<Entrega />} />
-          <Route path="/troca" element={<Troca />} />
-          <Route path="/seguranca" element={<Seguranca />} />
-          <Route path="/contato" element={<Contato />} />
-        </Routes>
+        <div className={styles["navigation"]}>
+          <Navigation />
+          <Routes>
+            <Route path="/" element={<Sobre />} />
+            <Route path="/pagamento" element={<Pagamento />} />
+            <Route path="/entrega" element={<Entrega />} />
+            <Route path="/troca" element={<Troca />} />
+            <Route path="/seguranca" element={<Seguranca />} />
+            <Route path="/contato" element={<Contato />} />
+          </Routes>
+        </div>
       </div>
 
       <Footer />