From e03866e66d466c1cbf7c93e6604767748584dc9e Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Thu, 5 Jan 2023 10:07:33 -0300
Subject: [PATCH] refactor(main): substituindo Link do aside por NavLink

---
 src/components/Main/Main.module.scss |  6 +--
 src/components/Main/Main.tsx         | 70 ++++++++++++++++++++++++----
 2 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/src/components/Main/Main.module.scss b/src/components/Main/Main.module.scss
index fd1d9f6..386a2a8 100644
--- a/src/components/Main/Main.module.scss
+++ b/src/components/Main/Main.module.scss
@@ -2,6 +2,7 @@
 
 main {
     width: 100%;
+    min-height: calc(100vh - 588px);
     display: flex;
     justify-content: center;
     flex-direction: column;
@@ -48,17 +49,16 @@ main {
             width: 27.864%;
             border-right: 1px solid #000000;
             & a {
-                width: 302px;
+                width: auto;
                 height: 39px;
                 font-family: "Roboto";
                 font-style: normal;
-                font-weight: 400;
                 font-size: 16px;
                 line-height: 19px;
-                color: #7d7d7d;
                 text-decoration: none;
                 display: flex;
                 align-items: center;
+                padding-left: 16px;
             }
         }
         & div {
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
index 905af5a..6332033 100644
--- a/src/components/Main/Main.tsx
+++ b/src/components/Main/Main.tsx
@@ -1,11 +1,9 @@
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter, Link , NavLink } from "react-router-dom";
 import Rotas from "../../config/routes";
-import { Link } from "react-router-dom";
 import HomeIcon from "../../assets/imgs/HomeIcon.svg";
 import ArrowPointToRight from "../../assets/imgs/ArrowPointToRight.svg";
 import styles from "./Main.module.scss";
 
-
 const Main = () => {
   return (
     <BrowserRouter>
@@ -23,12 +21,66 @@ const Main = () => {
         <h1>institucional</h1>
         <section className={styles["Container"]}>
           <aside>
-            <Link to="/sobre">Sobre</Link>
-            <Link to="/formadepagamento">Forma de Pagamento</Link>
-            <Link to="/entrega">Entrega</Link>
-            <Link to="/trocaedevolucao">Troca e Devolução</Link>
-            <Link to="/segurancaprivacidade">Segurança e Privacidade</Link>
-            <Link to="/contato">Contato</Link>
+            <NavLink
+              to="/"
+              style={({ isActive }) => ({
+                color: isActive ? "#fff" : "#7d7d7d",
+                background: isActive ? "#000000" : "unset",
+                fontWeight: isActive ? "700" : "400",
+              })}
+            >
+              Sobre
+            </NavLink>
+            <NavLink
+              to="/formadepagamento"
+              style={({ isActive }) => ({
+                color: isActive ? "#fff" : "#7d7d7d",
+                background: isActive ? "#000000" : "unset",
+                fontWeight: isActive ? "700" : "400",
+              })}
+            >
+              Forma de Pagamento
+            </NavLink>
+            <NavLink
+              to="/entrega"
+              style={({ isActive }) => ({
+                color: isActive ? "#fff" : "#7d7d7d",
+                background: isActive ? "#000000" : "unset",
+                fontWeight: isActive ? "700" : "400",
+              })}
+            >
+              Entrega
+            </NavLink>
+            <NavLink
+              to="/trocaedevolucao"
+              style={({ isActive }) => ({
+                color: isActive ? "#fff" : "#7d7d7d",
+                background: isActive ? "#000000" : "unset",
+                fontWeight: isActive ? "700" : "400",
+              })}
+            >
+              Troca e Devolução
+            </NavLink>
+            <NavLink
+              to="/segurancaprivacidade"
+              style={({ isActive }) => ({
+                color: isActive ? "#fff" : "#7d7d7d",
+                background: isActive ? "#000000" : "unset",
+                fontWeight: isActive ? "700" : "400",
+              })}
+            >
+              Segurança e Privacidade
+            </NavLink>
+            <NavLink
+              to="/contato"
+              style={({ isActive }) => ({
+                color: isActive ? "#fff" : "#7d7d7d",
+                background: isActive ? "#000000" : "unset",
+                fontWeight: isActive ? "700" : "400",
+              })}
+            >
+              Contato
+            </NavLink>
           </aside>
           <Rotas />
         </section>