Come creare un menu di navigazione comprimibile usando React

Un menu di navigazione della barra laterale consiste in genere in un elenco verticale di collegamenti. Puoi creare una serie di collegamenti in React usando react-router-dom.

Segui questi passaggi per creare un menu di navigazione laterale React con collegamenti contenenti icone dell'interfaccia utente del materiale. I collegamenti visualizzeranno pagine diverse quando si fa clic su di essi.

Creazione di un'applicazione di reazione

Se hai già un Reagire progetto , sentiti libero di saltare al passaggio successivo.

FARE USO DEL VIDEO DEL GIORNO

Puoi utilizzare il comando create-react-app per iniziare rapidamente a utilizzare React. Installa tutte le dipendenze e la configurazione per te.

Esegui il comando seguente per creare un progetto React chiamato react-sidenav.

npx create-react-app react-sidenav

Questo creerà una cartella react-sidenav con alcuni file per iniziare. Per ripulire un po' questa cartella, vai alla cartella src e sostituisci il contenuto di App.js con questo:

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

Il componente di navigazione che creerai sarà simile al seguente:

Visualizzazione non compressa del menu di navigazione di React

È piuttosto semplice, ma una volta terminato, dovresti essere in grado di modificarlo in base alle tue esigenze. Puoi comprimere il componente di navigazione utilizzando l'icona a doppia freccia in alto:

Vista compressa del menu di navigazione di React

Inizia creando la vista non compressa. Oltre all'icona della freccia, la barra laterale contiene un elenco di elementi. Ciascuno di questi elementi ha un'icona e del testo. Invece di creare ripetutamente un elemento per ciascuno, puoi archiviare i dati per ogni elemento in un array e quindi scorrere su di esso utilizzando una funzione di mappa.

Per dimostrare, crea una nuova cartella chiamata lib e aggiungi un nuovo file chiamato 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" 
    } 
]

Le icone utilizzate sopra provengono dalla libreria Material UI, quindi installala prima usando questo comando:

cambia il colore dei capelli editor fotografico online gratuito

npm install @mui/material @emotion/react @emotion/styled 
npm install @mui/icons-material

Quindi, crea una cartella chiamata Componenti e aggiungi un nuovo componente chiamato Sidenav.js .

In questo file, importa navData da ../lib e crea lo scheletro per il Sidenav funzione:

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

Per creare i collegamenti, modifica l'elemento div in questo componente in questo modo:

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

Questo componente crea un collegamento di navigazione contenente l'icona e il testo del collegamento per ogni iterazione nella funzione mappa.

L'elemento pulsante contiene l'icona della freccia sinistra dalla libreria dell'interfaccia utente del materiale. Importalo nella parte superiore del componente usando questo codice.

import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';

Potresti anche aver notato che i nomi delle classi fanno riferimento a un oggetto stili. Questo perché questo tutorial utilizza i moduli CSS. I moduli CSS ti consentono di creare stili con ambito locale in React . Non è necessario installare o configurare nulla se hai utilizzato create-react-app per avviare questo progetto.

Nella cartella Componenti, crea un nuovo file chiamato sidenav.module.css e aggiungi quanto segue:

.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; 
}

Configurazione del router React

Gli elementi div restituiti dalla funzione map dovrebbero essere collegamenti. In React, puoi creare collegamenti e percorsi utilizzando react-router-dom.

Nel terminale, installa react-router-dom tramite npm.

npm install react-router-dom@latest

Questo comando installa l'ultima versione di react-router-dom.

In Index.js, avvolgi il componente App con il router.

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> 
);

Quindi, in App.js, aggiungi i tuoi percorsi.

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;

Modifica App.css con questi stili.

body { 
  margin: 0; 
  padding: 0; 
} 
  
.App { 
  display: flex; 
} 
  
main { 
  padding: 10px; 
}

Ciascun percorso restituisce una pagina diversa a seconda dell'URL passato al puntelli di percorso . Crea una nuova cartella denominata Pagine e aggiungi quattro componenti: Pagina iniziale, Esplora, Statistiche e Impostazioni. Ecco un esempio:

export default function Home() { 
  return ( 
    <div>Home</div> 
  ) 
}

Se visiti il percorso /home, dovresti vedere 'Home'.

I collegamenti nella barra laterale dovrebbero portare alla pagina corrispondente quando fai clic su di essi. In Sidenav.js, modifica la funzione della mappa per utilizzare il componente NavLink da react-router-dom invece dell'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> 
})}

Ricordarsi di importare NavLink nella parte superiore del file.

import { NavLink } from "react-router-dom";

NavLink riceve il percorso dell'URL per il collegamento tramite il to prop.

Fino a questo punto la barra di navigazione è aperta. Per renderlo comprimibile, puoi cambiarne la larghezza modificando la classe CSS quando un utente fa clic sul pulsante freccia. È quindi possibile modificare nuovamente la classe CSS per aprirla.

Per ottenere questa funzionalità di attivazione/disattivazione, devi sapere quando la barra laterale è aperta e chiusa.

Per questo, usa l'hook useState. Questo Gancio di reazione consente di aggiungere e tenere traccia dello stato in un componente funzionale.

In sideNav.js, crea l'hook per lo stato aperto.

migliori app di fitness per Apple Watch 2

const [open, setopen] = useState(true)

Inizializza lo stato aperto su true, quindi la barra laterale sarà sempre aperta all'avvio dell'applicazione.

Quindi, crea la funzione che attiverà questo stato.

const toggleOpen = () => { 
    setopen(!open) 
}

Ora puoi utilizzare il valore aperto per creare classi CSS dinamiche come questa:

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

I nomi delle classi CSS utilizzati saranno determinati dallo stato aperto. Ad esempio, se open è true, l'elemento div esterno avrà un nome di classe sidenav. In caso contrario, la classe sarà sidenavd.

Questo è lo stesso per l'icona, che cambia nell'icona della freccia destra quando chiudi la barra laterale.

Ricordati di importarlo.

import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';

Il componente della barra laterale ora è comprimibile.

Prendi il codice completo da questo Archivio GitHub e prova tu stesso.

Styling dei componenti di reazione

React semplifica la creazione di un componente di navigazione comprimibile. Puoi usare alcuni degli strumenti forniti da React come react-router-dom per gestire il routing e gli hook per tenere traccia dello stato compresso.

Puoi anche usare i moduli CSS per definire lo stile dei componenti, anche se non è necessario. Usali per creare classi con ambito locale uniche e che puoi rimuovere dai file bundle se non sono in uso.

Come creare un menu di navigazione comprimibile usando React

Creazione di un'applicazione di reazione

Creazione del componente di navigazione

Configurazione del router React

Modifica dei collegamenti di navigazione

Styling dei componenti di reazione