Um menu de navegação da barra lateral geralmente consiste em uma lista vertical de links. Você pode criar um conjunto de links no React usando react-router-dom.
Siga estas etapas para criar um menu de navegação lateral do React com links contendo ícones da interface do usuário do material. Os links renderizarão páginas diferentes quando você clicar neles.
Criando um aplicativo React
Se você já tem um Reagir projeto, sinta-se à vontade para pular para a próxima etapa.
Você pode usar o comando create-react-app para começar a usar o React rapidamente. Ele instala todas as dependências e configurações para você.
Execute o seguinte comando para criar um projeto React chamado react-sidenav.
npx crio-react-app react-sidenav
Isso criará uma pasta react-sidenav com alguns arquivos para você começar. Para limpar um pouco esta pasta, navegue até a pasta src e substitua o conteúdo de App.js por este:
importar './App.css';funçãoAplicativo() {
Retorna (
<div className="Aplicativo"></div>
);
}
exportarpredefinição Aplicativo;
Criando o componente de navegação
O componente de navegação que você criará ficará assim:
É bastante simples, mas quando terminar, você poderá modificá-lo para atender às suas necessidades. Você pode recolher o componente de navegação usando o ícone de seta dupla na parte superior:
Comece criando a exibição não recolhida. Além do ícone de seta, a barra lateral contém uma lista de itens. Cada um desses itens tem um ícone e algum texto. Em vez de criar repetidamente um elemento para cada um, você pode armazenar os dados de cada item em uma matriz e, em seguida, iterar sobre ele usando uma função de mapa.
Para demonstrar, crie uma nova pasta chamada lib e adicione um novo arquivo chamado navData.js.
importar InícioÍcone a partir de '@mui/icons-material/Home';
importar Ícone TravelExplore a partir de '@mui/icons-material/TravelExplore';
importar Ícone de gráfico de barras a partir de '@mui/icons-material/BarChart';
importar Ícone de configurações a partir de '@mui/icons-material/Settings';
exportarconst navData = [
{
código: 0,
ícone: <InícioÍcone/>,
texto: "Casa",
link: "/"
},
{
código: 1,
ícone: <Ícone TravelExplore/>,
texto: "Explorar",
link: "explorar"
},
{
identificação: 2,
ícone: <Ícone de gráfico de barras/>,
texto: "Estatisticas",
link: "Estatisticas"
},
{
ID: 3,
ícone: <Ícone de configurações/>,
texto: "Definições",
link: "definições"
}
]
Os ícones usados acima são da biblioteca Material UI, então instale-o primeiro usando este comando:
npm instalar @mui/material @emoção/react @emoção/styled
npm instalar @mui/icons-material
Em seguida, crie uma pasta chamada Componentes e adicione um novo componente chamado Sidenav.js.
Neste arquivo, importe navData de ../lib e crie o esqueleto para o Sidenav função:
// Em Sidenav.js
importar { navData } a partir de "../lib/navData";
exportarpredefiniçãofunçãoSidenav() {
Retorna (
<div>
</div>
)
}
Para criar os links, modifique o elemento div neste componente para este:
<div>
<botão className={styles.menuBtn}>
<TecladoDoubleArrowLeftIcon />
</button>
{navData.map (item =>{
Retorna <div key={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.texto}</span>
</div>
})}
</div>Este componente cria um link de navegação contendo o ícone e o texto do link para cada iteração na função de mapa.
O elemento de botão contém o ícone de seta para a esquerda da biblioteca de interface do usuário do material. Importe-o na parte superior do componente usando este código.
importar TecladoDoubleSetaEsquerdaÍcone a partir de '@mui/icons-material/KeyboardDoubleArrowLeft';
Você também deve ter notado que os nomes das classes fazem referência a um objeto de estilos. Isso ocorre porque este tutorial usa módulos CSS. Módulos CSS permitem que você crie estilos com escopo local no React. Você não precisa instalar ou configurar nada se usou create-react-app para iniciar este projeto.
Na pasta Componentes, crie um novo arquivo chamado sidenav.module.css e adicione o seguinte:
.sidenav {
largura: 250px;
transição: largura 0.3sfacilidade de entrada;
altura: 100vh;
cor de fundo: rgb (10,25,41);
preenchimento superior: 28px;
}.sidenavFechado {
compõe: sidenav;
transição: largura 0.3sfacilidade de entrada;
largura: 60px
}.sideitem {
exibição: flexível;
alinhar-itens: centro;
preenchimento: 10px 20px;
cursor: ponteiro;
cor: #B2BAC2;
decoração de texto: nenhuma;
}.Texto do link {
padding-left: 16px;
}.linkTextClosed {
compõe: linkText;
visibilidade: oculto;
}.sideitem:flutuar {
cor de fundo: #244f7d1c;
}
.menuBtn {
alinhar-auto: Centro;
align-self: flex-começar;
justificar-se: flex-fim;
cor: #B2BAC2;
cor de fundo: transparente;
borda: nenhuma;
cursor: ponteiro;
padding-esquerdo: 20px;
}
Configurando o React Router
Os elementos div retornados pela função map devem ser links. No React, você pode criar links e rotas usando react-router-dom.
No terminal, instale react-router-dom via npm.
npm instala react-router-dom@Mais recentes
Este comando instala a versão mais recente do react-router-dom.
Em Index.js, envolva o componente App com o roteador.
importar Reagir a partir de 'reagir';
importar ReactDOM a partir de 'react-dom/client';
importar Aplicativo a partir de './Aplicativo';
importar { BrowserRouter } a partir de 'react-router-dom';
const root = ReactDOM.createRoot(documento.getElementById('root'));
raiz.render(
<Reagir. Modo estrito>
<NavegadorRoteador>
<Aplicativo />
</BrowserRouter>
</React.StrictMode>
);
Em seguida, no App.js, adicione suas rotas.
importar {
NavegadorRoteador,
Rotas,
Rota,
} a partir de "react-router-dom";importar './App.css';
importar Sidenav a partir de './Components/Sidenav';
importar Explorar a partir de "./Páginas/Explorar";
importar Casa a partir de "./Páginas/Home";
importar Definições a partir de "./Páginas/Configurações";
importar Estatisticas a partir de "./Páginas/Estatísticas";
funçãoAplicativo() {
Retorna (
<div className="Aplicativo">
<Sidenav/>
<a Principal>
<Rotas>
<Caminho da rota="/" elemento={<Casa />}/>
<Caminho da rota="/explore" elemento={<Explorar />} />
<Caminho da rota="/statistics" elemento={<Estatisticas />}/>
<Caminho da rota="/settings" elemento={<Definições />} />
</Routes>
</main>
</div>
);
}
exportarpredefinição Aplicativo;
Modifique o App.css com esses estilos.
corpo {
margem: 0;
preenchimento: 0;
}.Aplicativo {
exibição: flexível;
}
a Principal {
preenchimento: 10px;
}
Cada rota retorna uma página diferente dependendo do URL passado para o adereços de caminho. Crie uma nova pasta chamada Páginas e adicione quatro componentes — a página inicial, explorar, estatísticas e configurações. Aqui está um exemplo:
exportarpredefiniçãofunçãoCasa() {
Retorna (
<div>Casa</div>
)
}
Se você visitar o caminho /home, deverá ver "Home".
Os links na barra lateral devem levar à página correspondente quando você clicar neles. No Sidenav.js, modifique a função map para usar o componente NavLink do react-router-dom em vez do elemento div.
{navData.map (item => {
Retorna <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{item.texto}</span>
</NavLink>
})}
Lembre-se de importar o NavLink no topo do arquivo.
importar { NavLink } a partir de "react-router-dom";
O NavLink recebe o caminho da URL para o link por meio de to prop.
Até este ponto, a barra de navegação está aberta. Para torná-lo recolhível, você pode alternar sua largura alterando a classe CSS quando um usuário clica no botão de seta. Você pode então alterar a classe CSS novamente para abri-la.
Para obter essa funcionalidade de alternância, você precisa saber quando a barra lateral está aberta e fechada.
Para isso, use o gancho useState. este Gancho de reação permite adicionar e rastrear o estado em um componente funcional.
Em sideNav.js, crie o gancho para o estado aberto.
const [abrir, definirabrir] = useState(verdadeiro)
Inicialize o estado aberto como verdadeiro, para que a barra lateral esteja sempre aberta quando você iniciar o aplicativo.
Em seguida, crie a função que irá alternar este estado.
const alternarAbrir = () => {
setopen(!open)
}
Agora você pode usar o valor aberto para criar classes CSS dinâmicas como esta:
<div className={abrir? estilos.sidenav: estilos.sidenavFechado}>
<botão className={styles.menuBtn} onClick={toggleOpen}>
{abrir? <TecladoDoubleArrowLeftIcon />: <TecladoDoubleArrowRightIcon />}
</button>
{navData.map (item =>{
Retorna <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={abrir? styles.linkText: styles.linkTextClosed}>{item.texto}</span>
</NavLink>
})}
</div>
Os nomes de classe CSS usados serão determinados pelo estado aberto. Por exemplo, se open for true, o elemento div externo terá um nome de classe sidenav. Caso contrário, a classe será sidenavClosed.
Isso é o mesmo para o ícone, que muda para o ícone de seta para a direita quando você fecha a barra lateral.
Lembre-se de importá-lo.
importar TecladoDoubleSetaDireitaÍcone a partir de '@mui/icons-material/KeyboardDoubleArrowRight';
O componente da barra lateral agora é recolhível.
Pegue o código completo deste Repositório do GitHub e tente você mesmo.
Estilizando Componentes Reagir
O React simplifica a construção de um componente de navegação recolhível. Você pode usar algumas das ferramentas que o React fornece, como react-router-dom, para lidar com roteamento e ganchos para acompanhar o estado recolhido.
Você também pode usar módulos CSS para estilizar componentes, embora não seja necessário. Use-os para criar classes com escopo local que sejam exclusivas e que você possa remover dos arquivos de pacote se não estiverem em uso.