anacarolinaduartecavalcante/desafio-react-e-typescript-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(main): substituindo Link do aside por NavLink

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-05 10:07:33 -03:00
parent 9d90919098
commit 5fa3221248
2 changed files with 64 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Main/Main.module.scss
View File

@ -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 {

70
src/components/Main/Main.tsx
View File

@ -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>