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

refactor(main): mudando estrutura do nav e margin-bottom do main

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-13 17:00:11 -03:00
parent 4f1a5c9257
commit 039e93451d
2 changed files with 71 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import { BrowserRouter, Link } from "react-router-dom";
import Rotas from "../../config/routes";
import HomeIcon from "./assets/icons/HomeIcon.svg";
import ArrowPointToRight from "./assets/icons/ArrowPointToRight.svg";
import {NavLinkContent} from "./NavLink/NavLink";
import { NavLinkContent } from "./NavLink/NavLink";
import styles from "./styles/Main.module.scss";
const Main = () => {
@ -10,28 +10,36 @@ const Main = () => {
<BrowserRouter>
<main>
<nav className={styles["Navigation__Bar"]}>
<Link to="/" className={styles["Navigation__Bar__HomeLink"]}>
<img src={HomeIcon} alt="ícone da página inicial" />
</Link>
<img
src={ArrowPointToRight}
className={styles["Navigation__Bar__ArrowPointToRight"]}
alt="ícone de seta apontando para qual página está aberta"
/>
<Link to="/" className={styles["Navigation__Bar__InstitucionalLink"]}>
Institucional
</Link>
<ul className={styles["Navigation__Bar__Ul"]}>
<li className={styles["Navigation__Bar__Ul__Li"]}>
<Link to="/" className={styles["Navigation__Bar__Ul__Li__HomeLink"]}>
<img src={HomeIcon} alt="ícone da página inicial" />
</Link>
</li>
<li className={styles["Navigation__Bar__Ul__Li"]}>
<img
src={ArrowPointToRight}
className={styles["Navigation__Bar__Ul__Li__ArrowPointToRight"]}
alt="ícone de seta apontando para qual página está aberta"
/>
</li>
<li className={styles["Navigation__Bar__Ul__Li"]}>
<Link to="/" className={styles["Navigation__Bar__Ul__Li__InstitucionalLink"]}>
Institucional
</Link>
</li>
</ul>
</nav>
<h1>institucional</h1>
<section className={styles["Container"]}>
<aside>
<ul>
<NavLinkContent to="/" text="Sobre"/>
<NavLinkContent to="/" text="Sobre" />
<NavLinkContent to="/formadepagamento" text="Forma de Pagamento"/>
<NavLinkContent to="/entrega" text="Entrega"/>
<NavLinkContent to="/trocaedevolucao" text="Troca e Devolução"/>
<NavLinkContent to="/segurancaeprivacidade" text="Segurança e Privacidade"/>
<NavLinkContent to="/contato" text="Contato"/>
<NavLinkContent to="/entrega" text="Entrega" />
<NavLinkContent to="/trocaedevolucao" text="Troca e Devolução" />
<NavLinkContent to="/segurancaeprivacidade" text="Segurança e Privacidade" />
<NavLinkContent to="/contato" text="Contato" />
</ul>
</aside>
<Rotas />

81
src/components/Main/styles/Main.module.scss
View File

@ -6,15 +6,15 @@ main {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 66.56px;
margin-bottom: 70px;
margin-top: 120px;
position: relative;
@media (min-width: 2500px) {
margin-bottom: 66.56px;
margin-bottom: 84px;
margin-top: 162px;
}
@media (max-width: 1025px) {
margin-bottom: 80px;
margin-bottom: 81px;
margin-top: 139px;
}
.Navigation__Bar {
@ -23,8 +23,6 @@ main {
top: 29px;
bottom: 0;
margin-bottom: 108px;
display: flex;
align-items: center;
@media (min-width: 2500px) {
margin-bottom: 136.75px;
width: 92.002%;
@ -36,37 +34,50 @@ main {
@media (max-width: 376px) {
width: 91.284%;
}
&__ArrowPointToRight {
margin-right: 9.72px;
@media (min-width: 2500px) {
width: 8.9px;
height: 15.62px;
margin-right: 11.74px;
}
}
&__HomeLink {
margin-right: 9.73px;
@media (min-width: 2500px) {
margin-right: 12.12px;
}
& img {
@media (min-width: 2500px) {
width: 31.22px;
height: 31.25px;
&__Ul {
padding-left: 0;
display: flex;
align-items: center;
margin: 0;
&__Li {
list-style: none;
display: flex;
align-items: center;
&__ArrowPointToRight {
margin-right: 9.72px;
width: 4.56px;
height: 8px;
@media (min-width: 2500px) {
width: 8.9px;
height: 15.62px;
margin-right: 11.74px;
}
}
&__HomeLink {
display: flex;
margin-right: 9.73px;
@media (min-width: 2500px) {
margin-right: 12.12px;
}
& img {
@media (min-width: 2500px) {
width: 31.22px;
height: 31.25px;
}
}
}
&__InstitucionalLink {
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #c4c4c4;
text-decoration: none;
text-transform: uppercase;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
}
}
&__InstitucionalLink {
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #c4c4c4;
text-decoration: none;
text-transform: uppercase;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
}