Os menus da barra lateral são um ótimo recurso para as interfaces de usuário de aplicativos da web e móveis. Os menus da barra lateral não apenas aumentam a funcionalidade de um aplicativo, mas também melhoram a experiência do usuário em geral, tornando a navegação mais fácil!

Neste tutorial, aprenderemos como você pode fazer um menu da barra lateral incrível do zero em Reagir. Vamos começar!

Configurando o projeto

Primeiro, certifique-se de ter o mais recente versão do Node.js instalada em sua máquina local. Execute o seguinte comando para configurar um projeto React em seu diretório:

Npx create-react-app my-app

Atualmente, nossa estrutura de pastas se parece com a imagem abaixo:

Vamos excluir alguns arquivos desnecessários para que nossa pasta src se pareça com a imagem abaixo:

Atualmente, App.css não tem estilos, mas vamos adicioná-los mais tarde! Nossos arquivos App.js e index.js se parecem com os dois blocos de código a seguir, respectivamente:

import’./App.css’; function App () {return (

); } exportar aplicativo padrão; import React from’react’; importar ReactDOM de’react-dom’; importar aplicativo de’./App’; ReactDOM.render ( , document.getElementById (‘root’));

Agora, vamos executar nosso aplicativo React com o seguinte comando:

yarn start

Você deve receber a seguinte saída:

Criando um menu da barra lateral

Para criar um menu de barra lateral, teremos que instalar as seguintes bibliotecas:

npm install react-icons react-router-dom–save

Vamos criar uma nova pasta chamada componentes.js. Dentro, criaremos um arquivo chamado SideMenuData.js.

Os Ícones do React a biblioteca oferece elementos para a criação de interfaces bonitas e personalizadas. Em SideMenuData.js, adicionaremos o seguinte objeto JavaScript, que usaremos para preencher nosso menu lateral com elementos dos ícones React:

import React from’react’; importar * como FaIcons de’react-icons/fa’; importar * como AiIcons de’react-icons/ai’; importar * como IoIcons de’react-icons/io’; export const SidebarData=[{title:’Home’, path:’/’, icon: , cName:’nav-text’}, {title:’Reports’, path:’/reports’, ícone: , cName:’nav-text’}, {title:’Products’, path:’/products’, icon: , cName:’nav-text’}, ];

Agora que nossos dados estão prontos, vamos criar uma pasta chamada Navbar.js. Certifique-se de importar Navbar.js em App.js. Adicione o seguinte código ao Navbar.js:

import React, {useState} from’react’; importar * como FaIcons de’react-icons/fa’; import {Link} de’react-router-dom’; function Navbar () {const [sidebar, setSidebar]=useState (false); const showSidebar=()=> setSidebar (! sidebar); return (<>

) ; } exportar barra de navegação padrão;

Obteremos o seguinte resultado:

Atualmente, nada aparece em nosso menu da barra lateral porque não adicionamos o estado da barra lateral! Vamos adicionar o código para nosso menu da barra lateral em nossa pasta Navbar.js:

import React, {useState} from’react’; importar * como FaIcons de’react-icons/fa’; importar * como AiIcons de’react-icons/ai’; import {Link} de’react-router-dom’; import {SidebarData} de’./SideBarData’; function Navbar () {const [sidebar, setSidebar]=useState (false); const showSidebar=()=> setSidebar (! sidebar); return (<>

); } exportar barra de navegação padrão;

No bloco de código acima, usamos a função de mapa para criar elementos da barra lateral usando os dados em SideBarData.js.

A variável de estado e a verificação condicional nos permitem alternar entre mostrar e ocultar nossa barra lateral. Atualmente, o recurso de alternância não funciona porque ainda não adicionamos nenhum CSS. A saída de saída será semelhante à imagem abaixo:

Adicionando estilos

Crie um novo arquivo chamado Navbar.css e armazene-o no diretório components.js. Vamos adicionar os seguintes estilos a ele:

.navbar {background-color: rgb (183, 247, 181); altura: 80px; display: flex; justify-content: start; alinhar-itens: centro; }.menu-bars {margin-left: 2rem; tamanho da fonte: 2rem; fundo: nenhum; }.nav-menu {cor de fundo: rgb (183, 247, 181); largura: 250px; altura: 100vh; display: flex; justificar o conteúdo: centro; posição: fixa; topo: 0; esquerda:-100%; transição: 850ms; }.nav-menu.active {left: 0; transição: 350ms; }.nav-text {display: flex; justify-content: start; alinhar-itens: centro; preenchimento: 8px 0px 8px 16px; estilo de lista: nenhum; altura: 60px; }.nav-text a {text-decoration: none; cor preta; tamanho da fonte: 18px; largura: 95%; altura: 100%; display: flex; alinhar-itens: centro; preenchimento: 0 16px; raio da borda: 4px; }.nav-text a: hover {background-color: #ffffff; }.nav-menu-items {largura: 100%; }.navbar-toggle {background-color: rgb (183, 247, 181); largura: 100%; altura: 80px; display: flex; justify-content: start; alinhar-itens: centro; } span {margin-left: 16px; }

Nas classes nav-menu e nav-menu.active, respectivamente, adicionamos código para mostrar e ocultar a barra lateral. Definimos o atributo esquerdo em nav-menu.active para 100px, o que ocultará o menu da barra lateral. Quando nosso estado muda, a classe é definida como nav-menu.active, alterando o atributo esquerdo para 0 e exibindo o menu da barra lateral.

Agora, salve essas alterações e você receberá a seguinte saída:

Ao pairar, veremos um fundo branco:

Por último, precisamos vincular nossos itens às suas páginas específicas.

Adicionando navegação

Vamos criar uma nova pasta e nomeá-la como páginas. Vamos criar e adicionar os seguintes novos arquivos a ele.

Home.js direciona o usuário para a página inicial:

import React from’react’; função Home () {return (

); } exportar a página inicial padrão;

O Products.js direciona o usuário para a página Produtos:

import React from’react’; função Products () {return (

); } exportar produtos padrão;

Reports.js direciona o usuário para a página Relatórios:

import React from’react’; function Reports () {return (

); } exportar relatórios padrão;

A estrutura final do arquivo se parece com a imagem abaixo:

Na imagem acima, as páginas representadas são os componentes React necessários para adicionar navegação usando a biblioteca react-navigation. Tudo é feito no componente raiz.

A seguir, vamos para nossa pasta App.js e importamos o seguinte código:

import {BrowserRouter as Router, Switch, Route} from’react-router-dom’; import Home from’./pages/Home’; importar relatórios de’./pages/Reports’; importar produtos de’./pages/Products’;

BrowserRouter é o componente de alto nível para todas as rotas. O switch envolve as rotas secundárias para permitir a navegação pelo aplicativo. Agora, temos nosso arquivo App.js final:

import React from’react’; import’./App.css’; importar Navbar de’./components/Navbar’; import {BrowserRouter as Router, Switch, Route} de’react-router-dom’; import Home from’./pages/Home’; importar relatórios de’./pages/Reports’; importar produtos de’./pages/Products’; function App () {return (<> ); } exportar aplicativo padrão;

Se você clicar em qualquer um dos itens do menu da barra lateral, você será direcionado para sua respectiva página, conforme visto na captura de tela abaixo:

Vamos adicionar alguns toques finais aos nossos estilos ! Adicione o seguinte código ao nosso arquivo App.css:

* {box-sizing: border-box; margem: 0; preenchimento: 0; }.home,.reports,.products {display: flex; altura: 90vh; alinhar-itens: centro; justificar o conteúdo: centro; tamanho da fonte: 3rem; }

Voila! Você criou com sucesso um belo menu de barra lateral do zero no React.

Conclusão

Neste tutorial, aprendemos como construir um componente da barra lateral do zero no React. As informações neste tutorial são úteis se você deseja melhorar a interface do usuário de seus aplicativos React. Você deve se sentir à vontade para personalizar esta abordagem para que seja mais adequada às suas necessidades.

Espero que tenha gostado deste tutorial!