Cómo crear un menú de navegación plegable usando React

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.

cómo obtener la contraseña wifi de android

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.

MAKEUSEOF VÍDEO DEL DÍA

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

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

El componente de navegación que creará se verá así:

Vista no colapsada del menú de navegación de React

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:

Vista contraída del menú de navegación de React

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.

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" 
    } 
]

Los íconos usados arriba son de la biblioteca Material UI, así que instálalo primero usando este comando:

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

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

Para crear los enlaces, modifique el elemento div en este componente a esto:

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

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

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 { 
    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ó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.

no puedo usar las teclas de flecha en Excel

npm install react-router-dom@latest

Este comando instala la última versión de react-router-dom.

En Index.js, envuelva el componente de la aplicación con el enrutador.

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ón, en App.js, agregue sus rutas.

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 App.css con estos estilos.

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

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

Recuerde importar NavLink en la parte superior del archivo.

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

los servicios de google play han dejado de mensaje

En sideNav.js, cree el gancho para el estado abierto.

const [open, setopen] = useState(true)

Inicialice el estado abierto en verdadero, de modo que la barra lateral siempre esté abierta cuando inicie la aplicación.

A continuación, cree la función que alternará este estado.

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

Ahora puede usar el valor abierto para crear clases 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>

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á sidenavd.

Esto es lo mismo para el ícono, que cambia al ícono de la flecha hacia la derecha cuando cierras la barra lateral.

Recuerda importarlo.

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

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.

Cómo crear un menú de navegación plegable usando React

Creación de una aplicación de reacción

Creación del componente de navegación

Configuración del enrutador React

Modificación de enlaces de navegación

Dar estilo a los componentes de React