Se você leu o tutorial anterior ou viu o vídeo percebeu que o front deixou a desejar.
Se ainda não leu confira aqui depois volte nessa página.
Mas a proposta anterior era mesmo mostrar o poder do react-router-dom em melhorar a acessibilidade e conferir funcionalidades na navegação.
Hoje vamos ver como usar a biblioteca css w3css do w3school que você pode conferir na documentação rica desse framework css.
Simbora.
Vamos alterar alguns arquivos e instalar a biblioteca.
Primeiro na pasta public do React crie uma pasta nomeando-a css.
Após isso você pode baixar para essa pasta o arquivo w3.css você poderá baixar diretamente no site do w3schools.
Agora vamos mexer nos arquivos. Beleza.
Altere App.js conforme abaixo.
import React from 'react';
import './App.css';
import { Outlet, Link} from 'react-router-dom';
function Navbar(){
return(
<div>
<nav className="w3-bar w3-green">
<Link to="./invoices">Invoices</Link> |{" "}
<Link to="./expences">Expences</Link>
</nav>
<Outlet />
</div>
)
}
export default function () {
return(
<div>
<Navbar />
</div>
)
}
Nós chamamos w3-bar e w3-green na Navbar e chamamos os links dos componentes Invoices e Expences dentro.
Agora vamos alterar o css de Invoices o novo css ficou assim.
main{
display: flex;
flex-direction: column;
padding: 1rem 0;m
}
nav{
border-right: solid 1px;
padding: 1rem;
}
.links{
display: block;
margin: 1rem 0;
}
Altere também seu invoices.jsx
import React from 'react';
import './invoices.css';
import { Outlet, Link } from "react-router-dom";
import { getInvoices } from "../data";
export default function Invoices() {
let invoices = getInvoices();
return (
<div className="w3-half">
<div className="w3-sidebar">
<nav>
{invoices.map((invoice) => (
<Link className="links"
to={`/invoices/${invoice.number}`}
key={invoice.number}>
{invoice.name}
</Link>
))}
</nav>
</div>
<div className="w3-margin w3-right">
<Outlet />
</div>
</div>
);
}
Você poderá aprender mais na documentação do w3.css que é bem completa.
Paramos aqui mas você vai ver que o layout já começou a ficar bonito...
Agora é posssível ir incrementando conforme o gosto de cada um.
Fico por aqui...
Epa.
O vídeo curto do layout melhorado você pode ver aqui.
