Com crear un menú de navegació plegable amb React

Un menú de navegació de la barra lateral normalment consta d'una llista vertical d'enllaços. Podeu crear un conjunt d'enllaços a React mitjançant react-router-dom.

Seguiu aquests passos per crear un menú de navegació lateral de React amb enllaços que continguin icones de material d'IU. Els enllaços mostraran pàgines diferents quan hi feu clic.

Creació d'una aplicació React

Si ja tens un Projecte reaccionar , no dubteu a passar al següent pas.

MAKEUSEO VÍDEO DEL DIA

Podeu utilitzar l'ordre create-react-app per començar a funcionar amb React ràpidament. Instal·la totes les dependències i la configuració per a tu.

Executeu l'ordre següent per crear un projecte React anomenat react-sidenav.

npx create-react-app react-sidenav

Això crearà una carpeta react-sidenav amb alguns fitxers per començar. Per netejar una mica aquesta carpeta, aneu a la carpeta src i substituïu el contingut d'App.js per això:

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

El component de navegació que creareu serà així:

Visualització no replegada del menú de navegació de React

És bastant senzill, però un cop hagueu acabat, hauríeu de poder modificar-lo segons les vostres necessitats. Podeu replegar el component de navegació mitjançant la icona de doble fletxa a la part superior:

Vista replegada del menú de navegació de React

Comenceu creant la vista no replegada. A més de la icona de fletxa, la barra lateral conté una llista d'elements. Cadascun d'aquests elements té una icona i un text. En lloc de crear repetidament un element per a cadascun, podeu emmagatzemar les dades de cada element en una matriu i després repetir-hi mitjançant una funció de mapa.

Per demostrar-ho, creeu una nova carpeta anomenada lib i afegiu un fitxer nou anomenat 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" 
    } 
]

Les icones utilitzades anteriorment són de la biblioteca Material UI, així que instal·leu-la primer amb aquesta ordre:

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

A continuació, creeu una carpeta anomenada Components i afegiu un nou component anomenat Sidenav.js .

En aquest fitxer, importeu navData des de ../lib i creeu l'esquelet per al fitxer Sidenav funció:

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

Per crear els enllaços, modifiqueu l'element div d'aquest component a això:

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

Aquest component crea un enllaç de navegació que conté la icona i el text de l'enllaç per a cada iteració de la funció de mapa.

L'element botó conté la icona de fletxa esquerra de la biblioteca d'IU de material. Importeu-lo a la part superior del component mitjançant aquest codi.

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

També potser us heu adonat que els noms de classe fan referència a un objecte d'estils. Això es deu al fet que aquest tutorial utilitza mòduls CSS. Els mòduls CSS us permeten crear estils d'àmbit local a React . No cal que instal·leu ni configureu res si heu utilitzat create-react-app per iniciar aquest projecte.

A la carpeta Components, creeu un fitxer nou anomenat sidenav.module.css i afegiu el següent:

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

Configuració del router React

Els elements div retornats per la funció de mapa haurien de ser enllaços. A React, podeu crear enllaços i rutes mitjançant react-router-dom.

Al terminal, instal·leu react-router-dom mitjançant npm.

npm install react-router-dom@latest

Aquesta ordre instal·la la darrera versió de react-router-dom.

A Index.js, embolcalleu el component de l'aplicació amb l'encaminador.

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

A continuació, a App.js, afegiu les vostres rutes.

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;

Modifiqueu App.css amb aquests estils.

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

Cada ruta retorna una pàgina diferent en funció de l'URL que s'ha passat a accessoris de camí . Creeu una carpeta nova anomenada Pàgines i afegiu quatre components: la pàgina Inici, Explora, Estadístiques i Configuració. Aquí teniu un exemple:

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

Si visiteu el camí /home, hauríeu de veure 'Inici'.

Els enllaços de la barra lateral haurien de conduir a la pàgina coincident quan hi feu clic. A Sidenav.js, modifiqueu la funció de mapa per utilitzar el component NavLink de react-router-dom en lloc de l'element 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> 
})}

Recordeu importar NavLink a la part superior del fitxer.

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

NavLink rep la ruta de l'URL de l'enllaç a través de la prop.

Fins a aquest punt, la barra de navegació està oberta. Per fer-lo plegable, podeu canviar-ne l'amplada canviant la classe CSS quan un usuari faci clic al botó de fletxa. A continuació, podeu tornar a canviar la classe CSS per obrir-la.

afegir aplicacions a vizio smart tv

Per aconseguir aquesta funcionalitat de commutació, heu de saber quan la barra lateral està oberta i tancada.

Per a això, utilitzeu el ganxo useState. Això Ganxo de reacció us permet afegir i fer un seguiment de l'estat en un component funcional.

A sideNav.js, creeu el ganxo per a l'estat obert.

const [open, setopen] = useState(true)

Inicialitzar l'estat obert a true, de manera que la barra lateral sempre estarà oberta quan inicieu l'aplicació.

A continuació, creeu la funció que canviarà aquest estat.

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

Ara podeu utilitzar el valor obert per crear classes CSS dinàmiques com aquesta:

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

Els noms de classe CSS utilitzats estaran determinats per l'estat obert. Per exemple, si open és cert, l'element div extern tindrà un nom de classe sidenav. En cas contrari, la classe serà sidenavd.

Això és el mateix per a la icona, que canvia a la icona de fletxa dreta quan tanqueu la barra lateral.

Recordeu importar-lo.

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

El component de la barra lateral ara és plegable.

Agafa el codi complet d'aquest Repositori GitHub i prova-ho tu mateix.

Styling React Components

React fa que sigui senzill construir un component de navegació plegable. Podeu utilitzar algunes de les eines que ofereix React com react-router-dom per gestionar l'encaminament i els ganxos per fer un seguiment de l'estat col·lapsat.

També podeu utilitzar mòduls CSS per dissenyar components, encara que no cal que ho facin. Utilitzeu-los per crear classes d'àmbit local que siguin úniques i que podeu treure dels fitxers del paquet si no s'utilitzen.

Com crear un menú de navegació plegable amb React

Creació d'una aplicació React

Creació del component de navegació

Configuració del router React

Modificació dels enllaços de navegació

Styling React Components