Un menú de navegación de la barra lateral generalmente consta de una lista vertical de enlaces. Puede crear un conjunto de enlaces en React usando react-router-dom.
Siga estos pasos para crear un menú de navegación lateral de React con enlaces que contengan iconos de interfaz de usuario de material. Los enlaces mostrarán diferentes páginas cuando haga clic en ellos.
Creación de una aplicación de reacción
Si ya tienes un proyecto reaccionar, no dude en pasar al siguiente paso.
Puede usar el comando create-react-app para comenzar a usar React rápidamente. Instala todas las dependencias y configuraciones por ti.
Ejecute el siguiente comando para crear un proyecto React llamado react-sidenav.
npx crear-reaccionar-aplicación reaccionar-sidenav
Esto creará una carpeta react-sidenav con algunos archivos para que pueda comenzar. Para limpiar un poco esta carpeta, navegue a la carpeta src y reemplace el contenido de App.js con esto:
importar './Aplicación.css';funciónaplicación() {
devolver (
<div className="aplicación"></div>
);
}
exportardefecto aplicación;
Creación del componente de navegación
El componente de navegación que creará se verá así:
Es bastante simple, pero una vez que haya terminado, debería poder modificarlo para satisfacer sus necesidades. Puede colapsar el componente de navegación usando el icono de doble flecha en la parte superior:
Comience creando la vista no colapsada. Aparte del icono de flecha, la barra lateral contiene una lista de elementos. Cada uno de estos elementos tiene un icono y algo de texto. En lugar de crear repetidamente un elemento para cada uno, puede almacenar los datos de cada elemento en una matriz y luego iterarlo usando una función de mapa.
Para demostrarlo, cree una nueva carpeta llamada lib y agregue un nuevo archivo llamado navData.js.
importar InicioIcono de '@mui/iconos-material/Inicio';
importar ViajesExplorarIcono de '@mui/iconos-material/TravelExplore';
importar Gráfico De BarrasIcono de '@mui/iconos-material/BarChart';
importar ConfiguraciónIcono de '@mui/iconos-material/Configuraciones';
exportarconstante datos de navegación = [
{
identificación: 0,
icono: <InicioIcono/>,
texto: "Hogar",
Enlace: "/"
},
{
identificación: 1,
icono: <ViajarExplorarIcono/>,
texto: "Explorar",
Enlace: "explorar"
},
{
identificación: 2,
icono: <Icono de gráfico de barras/>,
texto: "Estadísticas",
Enlace: "Estadísticas"
},
{
identificación: 3,
icono: <ConfiguraciónIcono/>,
texto: "Ajustes",
Enlace: "ajustes"
}
]
Los íconos usados arriba son de la biblioteca Material UI, así que instálalo primero usando este comando:
instalar npm @mui/material @emoción/react @emoción/styled
instalar npm @mui/icons-material
A continuación, cree una carpeta llamada Componentes y agregue un nuevo componente llamado Sidenav.js.
En este archivo, importe navData desde ../lib y cree el esqueleto para el Navegación lateral función:
// En Sidenav.js
importar { datos de navegación } de "../lib/navData";
exportardefectofunciónNavegación lateral() {
devolver (
<división>
</div>
)
}
Para crear los enlaces, modifique el elemento div en este componente a esto:
<división>
<botón className={estilos.menuBtn}>
<TecladoDobleFlechaIzquierdaIcono />
</button>
{navData.map (elemento =>{
devolver <div key={item.id} className={styles.sideitem}>
{elemento.icono}
<abarcan className={styles.linkText}>{elemento.texto}</span>
</div>
})}
</div>Este componente crea un enlace de navegación que contiene el icono y el texto del enlace para cada iteración en la función de mapa.
El elemento de botón contiene el icono de flecha izquierda de la biblioteca Material UI. Importarlo en la parte superior del componente usando este código.
importar tecladodobleflechaizquierdaicono de '@mui/iconos-material/TecladoDoubleArrowLeft';
Es posible que también haya notado que los nombres de las clases hacen referencia a un objeto de estilos. Esto se debe a que este tutorial usa módulos CSS. Los módulos CSS le permiten crear estilos de alcance local en React. No necesita instalar ni configurar nada si usó create-react-app para iniciar este proyecto.
En la carpeta Componentes, cree un nuevo archivo llamado sidenav.módulo.css y agrega lo siguiente:
.sidenav {
ancho: 250px;
transición: ancho 0.3sfacilidad de entrada y salida;
altura: 100vh;
color de fondo: rgb (10,25,41);
acolchado superior: 28px;
}.sidenavCerrado {
compone: sidenav;
transición: ancho 0.3sfacilidad de entrada y salida;
ancho: 60px
}.elemento lateral {
pantalla: flexible;
alinear elementos: centro;
relleno: 10px 20px;
cursor: puntero;
color: #B2BAC2;
texto-decoración: ninguno;
}.Texto del enlace {
relleno-izquierda: 16px;
}.linkTextCerrado {
compone: linkText;
visibilidad: oculto;
}.elemento lateral:flotar {
color de fondo: #244f7d1c;
}
.menuBtn {
alinear-uno mismo: centro;
alinear-auto: flex-comienzo;
justificarse a sí mismo: flexionarfinal;
color: #B2BAC2;
color de fondo: transparente;
borde: ninguno;
cursor: puntero;
relleno-izquierda: 20px;
}
Configuración del enrutador React
Los elementos div devueltos por la función de mapa deben ser enlaces. En React, puedes crear enlaces y rutas usando react-router-dom.
En la terminal, instale react-router-dom a través de npm.
npm instalar reaccionar-enrutador-dom@más reciente
Este comando instala la última versión de react-router-dom.
En Index.js, envuelva el componente de la aplicación con el enrutador.
importar Reaccionar de 'reaccionar';
importar ReactDOM de 'reaccionar-dom/cliente';
importar aplicación de './Aplicación';
importar { NavegadorRouter } de 'reaccionar-router-dom';
constante root = ReactDOM.createRoot(documento.getElementById('raíz'));
raíz.prestar(
<Reaccionar. Modo estricto>
<NavegadorRouter>
<aplicación />
</BrowserRouter>
</React.StrictMode>
);
A continuación, en App.js, agregue sus rutas.
importar {
NavegadorRouter,
rutas,
Ruta,
} de "reaccionar-enrutador-dom";importar './Aplicación.css';
importar Navegación lateral de './Componentes/Sidenav';
importar Explorar de "./Páginas/Explorar";
importar Hogar de "./Páginas/Inicio";
importar Ajustes de "./Páginas/Configuración";
importar Estadísticas de "./Páginas/Estadísticas";
funciónaplicación() {
devolver (
<div className="aplicación">
<Sidenav/>
<principal>
<Rutas>
<Ruta ruta ="/" elemento={<Hogar />}/>
<Ruta ruta ="/explore" elemento={<Explorar />} />
<Ruta ruta ="/statistics" elemento={<Estadísticas />}/>
<Ruta ruta ="/settings" elemento={<Ajustes />} />
</Routes>
</main>
</div>
);
}
exportardefecto aplicación;
Modifique App.css con estos estilos.
cuerpo {
margen: 0;
relleno: 0;
}.aplicación {
pantalla: flexible;
}
principal {
relleno: 10px;
}
Cada ruta devuelve una página diferente dependiendo de la URL pasada a la accesorios de ruta. Cree una nueva carpeta llamada Páginas y agregue cuatro componentes: la página Inicio, Explorar, Estadísticas y Configuración. Aquí hay un ejemplo:
exportardefectofunciónHogar() {
devolver (
<división>Hogar</div>
)
}
Si visita la ruta /home, debería ver "Home".
Los enlaces en la barra lateral deberían conducir a la página correspondiente cuando hagas clic en ellos. En Sidenav.js, modifique la función de mapa para usar el componente NavLink de react-router-dom en lugar del elemento div.
{navData.map (elemento => {
devolver <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{elemento.icono}
<abarcan className={styles.linkText}>{elemento.texto}</span>
</NavLink>
})}
Recuerde importar NavLink en la parte superior del archivo.
importar { Enlace de navegación } de "reaccionar-router-dom";
NavLink recibe la ruta URL para el enlace a través de la prop.
Hasta este punto, la barra de navegación está abierta. Para hacerlo plegable, puede alternar su ancho cambiando la clase CSS cuando un usuario hace clic en el botón de flecha. Luego puede cambiar la clase CSS nuevamente para abrirla.
Para lograr esta funcionalidad de alternar, necesita saber cuándo la barra lateral está abierta y cerrada.
Para esto, usa el enlace useState. Este Gancho de reacción le permite agregar y rastrear el estado en un componente funcional.
En sideNav.js, cree el gancho para el estado abierto.
constante [abrir, establecerabrir] = usarEstado(verdadero)
Inicialice el estado abierto a verdadero, por lo que la barra lateral siempre estará abierta cuando inicie la aplicación.
A continuación, cree la función que alternará este estado.
constante alternarAbrir = () => {
setopen(!abrir)
}
Ahora puede usar el valor abierto para crear clases CSS dinámicas como esta:
<div className={abrir? estilos.sidenav: estilos.sidenavCerrado}>
<botón className={styles.menuBtn} onClick={toggleOpen}>
{¿abierto? <TecladoDobleFlechaIzquierdaIcono />: <TecladoDobleFlechaDerechaIcono />}
</button>
{navData.map (elemento =>{
devolver <NavLink key={item.id} className={styles.sideitem} to={item.link}>
{elemento.icono}
<abarcan className={abierto? estilos.linkText: estilos.linkTextClosed}>{elemento.texto}</span>
</NavLink>
})}
</div>
Los nombres de clase de CSS utilizados estarán determinados por el estado abierto. Por ejemplo, si open es verdadero, el elemento div externo tendrá un nombre de clase sidenav. De lo contrario, la clase será sidenavClosed.
Esto es lo mismo para el ícono, que cambia al ícono de la flecha hacia la derecha cuando cierras la barra lateral.
Recuerda importarlo.
importar TecladoDobleFlechaDerechaIcono de '@mui/iconos-material/TecladoDoubleArrowRight';
El componente de la barra lateral ahora es plegable.
Coge el código completo de este repositorio GitHub y pruébalo tú mismo.
Dar estilo a los componentes de React
React simplifica la creación de un componente de navegación plegable. Puede usar algunas de las herramientas que proporciona React, como react-router-dom, para manejar el enrutamiento y los enlaces para realizar un seguimiento del estado colapsado.
También puede usar módulos CSS para diseñar componentes, aunque no es necesario. Úselos para crear clases de ámbito local que sean únicas y que pueda eliminar de los archivos del paquete si no están en uso.
