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éactionn’hésitez pas à passer à l’étape suivante.
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;
Création du composant de navigation
Le composant de navigation que vous allez créer ressemblera à ceci :
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 :
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:
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 :
<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>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;
}.sidenavClosed {
composes: sidenav;
transition: width 0.3s ease-in-out;
width: 60px
}
.sideitem {
display: flex;
align-items: center;
padding: 10px 20px;
cursor: pointer;
color:
text-decoration: none;
}
.linkText {
padding-left: 16px;
}
.linkTextClosed {
composes: linkText;
visibility: hidden;
}
.sideitem:hover {
background-color:
}
.menuBtn {
align-self: center;
align-self: flex-start;
justify-self: flex-end;
color:
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.
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”.
Modification des liens de navigation
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.
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.sidenavClosed}>
<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.linkTextClosed}>{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 sidenavClosed.
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.
— to www.makeuseof.com