forked from M3-Academy/desafio-react-e-typescript
feature(footer): Implementa React e Typescript para o footer.
This commit is contained in:
parent
69cd45f795
commit
86b9f1a086
41
src/components/Navegation.tsx
Normal file
41
src/components/Navegation.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { useState } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
|
||||
import "./Navegation.modules.scss";
|
||||
|
||||
export const Navegation = () => {
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
|
||||
const handlechange = () => {
|
||||
setIsActive((isActive) => !isActive);
|
||||
};
|
||||
|
||||
let toggleClassCheck = isActive ? "active" : "";
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="MenuRoutes">
|
||||
<ul className="links_wrapper">
|
||||
<li className={`Title_links ${toggleClassCheck} `}>
|
||||
<NavLink to={"/"}> Sobre </NavLink>
|
||||
</li>
|
||||
<li className={`Title_links ${toggleClassCheck} `}>
|
||||
<NavLink to={"/Pagamentos"}> Formas de Pagamento </NavLink>
|
||||
</li>
|
||||
<li className={`Title_links ${toggleClassCheck} `}>
|
||||
<NavLink to={"/Entrega"}> Entrega </NavLink>
|
||||
</li>
|
||||
<li className={`Title_links ${toggleClassCheck} `}>
|
||||
<NavLink to={"/Devolução"}> Troca e Devolução </NavLink>
|
||||
</li>
|
||||
<li className={`Title_links ${toggleClassCheck} `}>
|
||||
<NavLink to={"/Segurança"}> Segurança e Privacidade </NavLink>
|
||||
</li>
|
||||
<li className={`Title_links ${toggleClassCheck} `}>
|
||||
<NavLink to={"/Contatos"}> Contatos </NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</>
|
||||
);
|
||||
};
|
Loading…
Reference in New Issue
Block a user