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

Entrega do Desafio #2

Merged
anacarolinaduartecavalcante merged 81 commits from develop into main 2023-01-14 14:05:45 +00:00
Conversation 0 Commits 81 Files Changed 59 +88 -77
2 changed files with 88 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c2685a7dd4 - Show all commits

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

@ -1,5 +1,6 @@
@import "../../variaveis.scss";
//Main
main {
width: 100%;
min-height: calc(100vh - 588px);
@ -112,21 +113,28 @@ main {
width: 100%;
}
& a {
width: auto;
height: 39px;
font-family: "Roboto";
font-style: normal;
font-size: 16px;
line-height: 19px;
text-decoration: none;
display: flex;
align-items: center;
padding-left: 16px;
@media (min-width: 2500px) {
height: 58px;
font-size: 32px;
line-height: 38px;
& ul {
padding-left: 0;
margin: 0;
& li {
list-style: none;
& a {
width: auto;
height: 39px;
font-family: "Roboto";
font-style: normal;
font-size: 16px;
line-height: 19px;
text-decoration: none;
display: flex;
align-items: center;
padding-left: 16px;
@media (min-width: 2500px) {
height: 58px;
font-size: 32px;
line-height: 38px;
}
}
}
}
}

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

@ -12,72 +12,75 @@ const Main = () => {
<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>
<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>
</nav>
<h1>institucional</h1>
<section className={styles["Container"]}>
<aside>
<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>
<ul>
<li>
<NavLink to="/" style={({ isActive }) => ({
color: isActive ? "#fff" : "#7d7d7d",
background: isActive ? "#000000" : "unset",
fontWeight: isActive ? "700" : "400",})}>
Sobre
</NavLink>
</li>
<li>
<NavLink to="/formadepagamento" style={({ isActive }) => ({
color: isActive ? "#fff" : "#7d7d7d",
background: isActive ? "#000000" : "unset",
fontWeight: isActive ? "700" : "400",})}>
Forma de Pagamento
</NavLink>
</li>
<li>
<NavLink to="/entrega" style={({ isActive }) => ({
color: isActive ? "#fff" : "#7d7d7d",
background: isActive ? "#000000" : "unset",
fontWeight: isActive ? "700" : "400",
})}>
Entrega
</NavLink>
</li>
<li>
<NavLink to="/trocaedevolucao"
style={({ isActive }) => ({
color: isActive ? "#fff" : "#7d7d7d",
background: isActive ? "#000000" : "unset",
fontWeight: isActive ? "700" : "400",
})}>
Troca e Devolução
</NavLink>
</li>
<li>
<NavLink to="/segurancaprivacidade"
style={({ isActive }) => ({
color: isActive ? "#fff" : "#7d7d7d",
background: isActive ? "#000000" : "unset",
fontWeight: isActive ? "700" : "400",
})}>
Segurança e Privacidade
</NavLink>
</li>
<li>
<NavLink to="/contato"
style={({ isActive }) => ({
color: isActive ? "#fff" : "#7d7d7d",
background: isActive ? "#000000" : "unset",
fontWeight: isActive ? "700" : "400",
})}>
Contato
</NavLink>
</li>
</ul>
</aside>
<Rotas />
</section>