Comment créer un menu de navigation pliable à l'aide de React

Un menu de navigation de la barre latérale se compose généralement d'une liste verticale de liens. Vous pouvez créer un ensemble de liens dans React en utilisant react-router-dom.

Suivez ces étapes pour créer un menu de navigation latéral React avec des liens contenant des icônes d'interface utilisateur matérielles. Les liens afficheront différentes pages lorsque vous cliquerez dessus.

Création d'une application réactive

Si vous avez déjà un Projet de réaction , n'hésitez pas à passer à l'étape suivante.

UTILISEZ LA VIDÉO DU JOUR

Vous pouvez utiliser la commande create-react-app pour être rapidement opérationnel avec React. Il installe toutes les dépendances et la configuration pour vous.

Exécutez la commande suivante pour créer un projet React appelé react-sidenav.

npx create-react-app react-sidenav

Cela créera un dossier react-sidenav avec quelques fichiers pour vous aider à démarrer. Pour nettoyer un peu ce dossier, accédez au dossier src et remplacez le contenu de App.js par ceci :

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

Le composant de navigation que vous allez créer ressemblera à ceci :

Vue non réduite du menu de navigation de React

C'est assez simple, mais une fois que vous avez terminé, vous devriez pouvoir le modifier en fonction de vos besoins. Vous pouvez réduire le composant de navigation à l'aide de l'icône à double flèche en haut :

comment sortir des réseaux sociaux

Commencez par créer la vue non réduite. Outre l'icône de flèche, la barre latérale contient une liste d'éléments. Chacun de ces éléments a une icône et du texte. Au lieu de créer de manière répétitive un élément pour chacun, vous pouvez stocker les données de chaque élément dans un tableau, puis les parcourir à l'aide d'une fonction de carte.

Pour illustrer, créez un nouveau dossier appelé lib et ajoutez un nouveau fichier appelé 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 icônes utilisées ci-dessus proviennent de la bibliothèque Material UI, installez-la donc d'abord à l'aide de cette commande :

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

Ensuite, créez un dossier appelé Composants et ajouter un nouveau composant appelé Sidenav.js .

Dans ce fichier, importez navData depuis ../lib et créez le squelette du Sinav fonction:

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

Pour créer les liens, modifiez l'élément div de ce composant en ceci :

464D2C5E256A2FBCAAE727DA6DA810AFA9F7EB3

Ce composant crée un lien de navigation contenant l'icône et le texte du lien pour chaque itération de la fonction de carte.

L'élément de bouton contient l'icône de flèche gauche de la bibliothèque Material UI. Importez-le en haut du composant en utilisant ce code.

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

Vous avez peut-être également remarqué que les noms de classe font référence à un objet styles. En effet, ce tutoriel utilise des modules CSS. Les modules CSS vous permettent de créer des styles de portée locale dans React . Vous n'avez pas besoin d'installer ou de configurer quoi que ce soit si vous avez utilisé create-react-app pour démarrer ce projet.

Dans le dossier Composants, créez un nouveau fichier appelé sidenav.module.css et ajoutez ce qui suit :

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

Configuration du routeur React

Les éléments div renvoyés par la fonction map doivent être des liens. Dans React, vous pouvez créer des liens et des itinéraires à l'aide de react-router-dom.

Dans le terminal, installez react-router-dom via npm.

npm install react-router-dom@latest

Cette commande installe la dernière version de react-router-dom.

Dans Index.js, encapsulez le composant App avec le routeur.

le service de service de profil utilisateur a échoué à la connexion Windows 10

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

Ensuite, dans App.js, ajoutez vos itinéraires.

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;

Modifiez App.css avec ces styles.

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

Chaque route renvoie une page différente en fonction de l'URL transmise au accessoires de chemin . Créez un nouveau dossier appelé Pages et ajoutez quatre composants : la page Accueil, Explorer, Statistiques et Paramètres. Voici un exemple:

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

Si vous visitez le chemin /home, vous devriez voir 'Accueil'.

Les liens dans la barre latérale doivent mener à la page correspondante lorsque vous cliquez dessus. Dans Sidenav.js, modifiez la fonction map pour utiliser le composant NavLink de react-router-dom au lieu de l'élément 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> 
})}

N'oubliez pas d'importer NavLink en haut du fichier.

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

NavLink reçoit le chemin de l'URL du lien via la prop.

Jusqu'à ce point, la barre de navigation est ouverte. Pour le rendre pliable, vous pouvez modifier sa largeur en modifiant la classe CSS lorsqu'un utilisateur clique sur le bouton fléché. Vous pouvez ensuite modifier à nouveau la classe CSS pour l'ouvrir.

Pour obtenir cette fonctionnalité de basculement, vous devez savoir quand la barre latérale est ouverte et fermée.

comment apprendre le design d'intérieur vous-même

Pour cela, utilisez le crochet useState. Cette Crochet de réaction vous permet d'ajouter et de suivre l'état d'un composant fonctionnel.

Dans sideNav.js, créez le crochet pour l'état ouvert.

const [open, setopen] = useState(true)

Initialisez l'état d'ouverture à vrai, de sorte que la barre latérale sera toujours ouverte lorsque vous démarrez l'application.

Ensuite, créez la fonction qui fera basculer cet état.

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

Vous pouvez désormais utiliser la valeur open pour créer des classes CSS dynamiques comme celle-ci :

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

Les noms de classe CSS utilisés seront déterminés par l'état ouvert. Par exemple, si open est vrai, l'élément div externe aura un nom de classe sidenav. Sinon, la classe sera sidenavd.

Il en va de même pour l'icône, qui se transforme en icône de flèche droite lorsque vous fermez la barre latérale.

N'oubliez pas de l'importer.

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

Le composant de la barre latérale est maintenant pliable.

Prenez le code complet de ceci Référentiel GitHub et essayez-le vous-même.

Styliser les composants React

React facilite la création d'un composant de navigation pliable. Vous pouvez utiliser certains des outils fournis par React, tels que react-router-dom pour gérer le routage et les crochets pour suivre l'état réduit.

Vous pouvez également utiliser des modules CSS pour styliser les composants, bien que vous n'ayez pas à le faire. Utilisez-les pour créer des classes à portée locale qui sont uniques et que vous pouvez supprimer des fichiers bundle s'ils ne sont pas utilisés.

Comment créer un menu de navigation pliable à l'aide de React

Création d'une application réactive

Création du composant de navigation

Configuration du routeur React

Modification des liens de navigation

Styliser les composants React