SabrinaMiranda/desafio-react-e-typescript-sabrina-miranda
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(main): Aplica propriedade para destacar o link ativo do menu lateral

Browse Source
This commit is contained in:
Sabrina Miranda 2023-01-14 02:48:05 -03:00
parent 783e21a824
commit 5a1d807e70
2 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/MenuSideBar/MenuSideBar.module.scss
View File

@ -28,7 +28,7 @@
font-size: 16px;
line-height: 19px;
color: variables.$gray-100;
margin-left: 16px;
padding-left: 16px;
height: 39px;
@media (min-width: 2500px) {

32
src/components/MenuSideBar/MenuSideBar.tsx
View File

@ -2,7 +2,7 @@ import { useState } from "react";
import styles from "./MenuSideBar.module.scss";
import { Link } from "react-router-dom";
import { NavLink } from "react-router-dom";
const MenuSideBar = () => {
@ -12,27 +12,45 @@ const MenuSideBar = () => {
<ul className={styles["menu-sidebar__container"]}>
<li className={styles["menu-sidebar__item"]}>
<Link to={"/sobre"}>Sobre</Link>
<NavLink to={"/sobre"}
style={({ isActive }) => isActive ? {background:"#000000", color:"#FFFFFF", fontWeight: "700"} : {}} >
Sobre
</NavLink>
</li>
<li className={styles["menu-sidebar__item"]}>
<Link to={"/formadepagamento"}>Forma de Pagamento</Link>
<NavLink to={"/formadepagamento"}
style={({ isActive }) => isActive ? {background:"#000000", color:"#FFFFFF", fontWeight: "700"} : {}} >
Forma de Pagamento
</NavLink>
</li>
<li className={styles["menu-sidebar__item"]}>
<Link to={"/entrega"}>Entrega</Link>
<NavLink to={"/entrega"}
style={({ isActive }) => isActive ? {background:"#000000", color:"#FFFFFF", fontWeight: "700"} : {}} >
Entrega
</NavLink>
</li>
<li className={styles["menu-sidebar__item"]}>
<Link to={"/segurancaeprivacidade"}>Segurança e Privacidade</Link>
<NavLink to={"/segurancaeprivacidade"}
style={({ isActive }) => isActive ? {background:"#000000", color:"#FFFFFF", fontWeight: "700"} : {}} >
Segurança e Privacidade
</NavLink>
</li>
<li className={styles["menu-sidebar__item"]}>
<Link to={"/trocaedevolucao"}>Troca e Devolução</Link>
<NavLink to={"/trocaedevolucao"}
style={({ isActive }) => isActive ? {background:"#000000", color:"#FFFFFF", fontWeight: "700"} : {}} >
Troca e Devolução
</NavLink>
</li>
<li className={styles["menu-sidebar__item"]}>
<Link to={"/contato"}>Contato</Link>
<NavLink to={"/contato"}
style={({ isActive }) => isActive ? {background:"#000000", color:"#FFFFFF", fontWeight: "700"} : {}} >
Contato
</NavLink>
</li>
</ul>