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.
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 créer-réagir-app réagir-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 :
importer './App.css';fonctionApplication() {
revenir (
<div nom_classe="Application"></div>
);
}
exporterdéfaut application ;
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.
importer AccueilIcône de '@mui/icons-material/Accueil' ;
importer VoyageExplorerIcône de '@mui/icons-material/TravelExplore' ;
importer IcôneGraphique À Barres de '@mui/icons-material/BarChart' ;
importer ParamètresIcône de '@mui/icons-material/Settings' ;
exporterconstante navData = [
{
identifiant: 0,
icône: <Icône Accueil/>,
texte: "Maison",
lien: "/"
},
{
identifiant: 1,
icône: <TravelExploreIcon/>,
texte: "Explorer",
lien: "explorer"
},
{
identifiant: 2,
icône: <Icône de graphique à barres/>,
texte: "Statistiques",
lien: "statistiques"
},
{
identifiant: 3,
icône: <Icône Paramètres/>,
texte: "Réglages",
lien: "réglages"
}
]
Les icônes utilisées ci-dessus proviennent de la bibliothèque Material UI, installez-la donc d'abord à l'aide de cette commande :
installation npm @mui/material @émotion/react @émotion/styled
installation npm @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:
// Dans Sidenav.js
importer { données de navigation } de "../lib/navData" ;
exporterdéfautfonctionSinav() {
revenir (
<div>
</div>
)
}
Pour créer les liens, modifiez l'élément div de ce composant en ceci :
<div>
<bouton className={styles.menuBtn}>
<IcôneClavierDoubleFlècheGauche />
</button>
{navData.map (élément =>{
revenir <clé div={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{élément.texte}</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.
importer ClavierDoubleFlècheGaucheIcône de '@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 {
largeur: 250 pixels ;
transition: largeur 0.3sfacilité d'entrée;
hauteur: 100vh ;
couleur d'arrière-plan: rvb (10,25,41) ;
rembourrage supérieur: 28 px ;
}.sidenavFermé {
compose: sidenav ;
transition: largeur 0.3sfacilité d'entrée;
largeur: 60px
}.sideitem {
affichage: flexible ;
align-items: center ;
rembourrage: 10px 20px ;
curseur: pointeur ;
Couleur: #B2BAC2 ;
décoration de texte: aucune ;
}.linkText {
rembourrage à gauche: 16 px ;
}.linkTextClosed {
compose: linkText ;
visibilité: masquée ;
}.sideitem:flotter {
Couleur de l'arrière plan: #244f7d1c ;
}
.menuBtn {
aligner-soi: centre;
align-self: flex-début;
se justifier: flex-fin;
Couleur: #B2BAC2 ;
couleur de fond: transparente ;
bordure: aucune ;
curseur: pointeur ;
rembourrage à gauche: 20 px ;
}
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 installer réagir-routeur-dom@dernier
Cette commande installe la dernière version de react-router-dom.
Dans Index.js, encapsulez le composant App avec le routeur.
importer Réagir de 'réagir';
importer RéagirDOM de 'réagir-dom/client' ;
importer Application de './App' ;
importer { NavigateurRouter } de 'réagir-routeur-dom' ;
constante root = ReactDOM.createRoot(document.getElementById('racine'));
racine.rendre(
<Réagir. Mode strict>
<NavigateurRouteur>
<Application />
</BrowserRouter>
</React.StrictMode>
);
Ensuite, dans App.js, ajoutez vos routes.
importer {
navigateurrouteur,
Itinéraires,
Itinéraire,
} de "réagir-routeur-dom";importer './App.css';
importer Sinav de './Composants/Sidenav' ;
importer Explorer de "./Pages/Explorer" ;
importer Maison de "./Pages/Accueil" ;
importer Réglages de "./Pages/Paramètres" ;
importer Statistiques de "./Pages/Statistiques" ;
fonctionApplication() {
revenir (
<div nom_classe="Application">
<Sidenav/>
<principale>
<Itinéraires>
<Chemin d'accès ="/" élément={<Maison />}/>
<Chemin d'accès ="/explore" élément={<Explorer />} />
<Chemin d'accès ="/statistics" élément={<Statistiques />}/>
<Chemin d'accès ="/settings" élément={<Réglages />} />
</Routes>
</main>
</div>
);
}
exporterdéfaut application ;
Modifiez App.css avec ces styles.
corps {
marge: 0 ;
rembourrage: 0 ;
}.App {
affichage: flexible ;
}
principale {
rembourrage: 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:
exporterdéfautfonctionMaison() {
revenir (
<div>Maison</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 (élément => {
revenir <Clé NavLink={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{élément.texte}</span>
</NavLink>
})}
N'oubliez pas d'importer NavLink en haut du fichier.
importer { NavLink } de "réagir-routeur-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.
constante [open, setopen] = useState(vrai)
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.
constante toggleOpen = () => {
setopen(!open)
}
Vous pouvez désormais utiliser la valeur open pour créer des classes CSS dynamiques comme celle-ci :
<div className={ouvrir? styles.sidenav: styles.sidenavFermé}>
<bouton className={styles.menuBtn} onClick={toggleOpen}>
{ouvert? <IcôneClavierDoubleFlècheGauche />: <ClavierDoubleArrowRightIcon />}
</button>
{navData.map (élément =>{
revenir <Clé NavLink={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={ouvrir? styles.linkText: styles.linkTextClosed}>{élément.texte}</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.
importer ClavierDoubleArrowRightIcon de '@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.
