Como criar um menu de navegação dobrável usando o React

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.

MAKEUSEO VÍDEO DO DIA

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 create-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:

import './App.css'; 
  
function App() { 
  return ( 
    <div className="App"></div> 
  ); 
} 
  
export default App;

O componente de navegação que você criará ficará assim:

Visualização não recolhida do menu de navegação React

É bem 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:

Visão recolhida do menu de navegação React

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.

import HomeIcon from '@mui/icons-material/Home'; 
import TravelExploreIcon from '@mui/icons-material/TravelExplore'; 
import BarChartIcon from '@mui/icons-material/BarChart'; 
import SettingsIcon from '@mui/icons-material/Settings'; 
  
export const navData = [ 
    { 
        id: 0, 
        icon: <HomeIcon/>, 
        text: "Home", 
        link: "/" 
    }, 
    { 
        id: 1, 
        icon: <TravelExploreIcon/>, 
        text: "Explore", 
        link: "explore" 
    }, 
    { 
        id: 2, 
        icon: <BarChartIcon/>, 
        text: "Statistics", 
        link: "statistics" 
    }, 
    { 
        id: 3, 
        icon: <SettingsIcon/>, 
        text: "Settings", 
        link: "settings" 
    } 
]

Os ícones usados acima são da biblioteca Material UI, então instale-o primeiro usando este comando:

npm install @mui/material @emotion/react @emotion/styled 
npm install @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:

// In Sidenav.js 
import { navData } from "../lib/navData"; 
export default function Sidenav() { 
  return ( 
    <div> 
    </div> 
  ) 
}

Para criar os links, modifique o elemento div neste componente para este:

<div> 
    <button className={styles.menuBtn}> 
        <KeyboardDoubleArrowLeftIcon /> 
    </button> 
    {navData.map(item =>{ 
        return <div key={item.id} className={styles.sideitem}> 
	                {item.icon} 
	                <span className={styles.linkText}>{item.text}</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.

import KeyboardDoubleArrowLeftIcon from '@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 { 
    width: 250px; 
    transition: width 0.3s ease-in-out; 
    height: 100vh; 
    background-color: rgb(10,25,41); 
    padding-top: 28px; 
} 
  
.sidenavd { 
    composes: sidenav; 
    transition: width 0.3s ease-in-out; 
    width: 60px 
} 
  
.sideitem { 
    display: flex; 
    align-items: center; 
    padding: 10px 20px; 
    cursor: pointer; 
    color: #B2BAC2; 
    text-decoration: none; 
} 
  
.linkText { 
    padding-left: 16px; 
} 
  
.linkTextd { 
    composes: linkText; 
    visibility: hidden; 
} 
  
.sideitem:hover { 
    background-color: #244f7d1c; 
} 
  
.menuBtn { 
    align-self: center; 
    align-self: flex-start;   
    justify-self: flex-end; 
    color: #B2BAC2; 
    background-color: transparent; 
    border: none; 
    cursor: pointer; 
    padding-left: 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 install react-router-dom@latest

Este comando instala a versão mais recente do react-router-dom.

senha proteger arquivo zip windows 10

Em Index.js, envolva o componente App com o roteador.

import React from 'react'; 
import ReactDOM from 'react-dom/client'; 
import App from './App'; 
import { BrowserRouter } from 'react-router-dom'; 
const root = ReactDOM.createRoot(document.getElementById('root')); 
  
root.render( 
  <React.StrictMode> 
    <BrowserRouter> 
	    <App /> 
    </BrowserRouter> 
  </React.StrictMode> 
);

Em seguida, no App.js, adicione suas rotas.

import { 
  BrowserRouter, 
  Routes, 
  Route, 
} from "react-router-dom"; 
  
import './App.css'; 
import Sidenav from './Components/Sidenav'; 
import Explore from "./Pages/Explore"; 
import Home from "./Pages/Home"; 
import Settings from "./Pages/Settings"; 
import Statistics from "./Pages/Statistics"; 
  
function App() { 
  return ( 
    <div className="App"> 
      <Sidenav/> 
      <main> 
        <Routes> 
          <Route  path="/" element={<Home />}/> 
          <Route path="/explore" element={<Explore />} /> 
          <Route path="/statistics" element={<Statistics />}/> 
          <Route path="/settings" element={<Settings />} /> 
        </Routes> 
      </main> 
    </div> 
  ); 
} 
export default App;

Modifique o App.css com esses estilos.

body { 
  margin: 0; 
  padding: 0; 
} 
  
.App { 
  display: flex; 
} 
  
main { 
  padding: 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:

export default function Home() { 
  return ( 
    <div>Home</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 => { 
    return <NavLink key={item.id} className={styles.sideitem} to={item.link}> 
               {item.icon} 
               <span className={styles.linkText}>{item.text}</span> 
           </NavLink> 
})}

Lembre-se de importar o NavLink no topo do arquivo.

import { NavLink } from "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.

EA51AEF81376372D47EFCFC1E3FE8A9369CDFFB6

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 toggleOpen = () => { 
    setopen(!open) 
}

Agora você pode usar o valor aberto para criar classes CSS dinâmicas como esta:

<div className={open?styles.sidenav:styles.sidenavd}> 
    <button className={styles.menuBtn} onClick={toggleOpen}> 
            {open? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />} 
    </button> 
    {navData.map(item =>{ 
        return <NavLink key={item.id} className={styles.sideitem} to={item.link}> 
                  {item.icon} 
                   <span className={open?styles.linkText:styles.linkTextd}>{item.text}</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á sidenavd.

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.

import KeyboardDoubleArrowRightIcon from '@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 React

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 do pacote se não estiverem em uso.

Como criar um menu de navegação dobrável usando o React

Criando um aplicativo React

Criando o componente de navegação

Configurando o React Router

Modificando links de navegação

Estilizando Componentes React