Article original : How to Use the react-mui-sidebar Package to Build Responsive, Customizable Sidebars
Dans le développement web moderne, une barre latérale bien conçue peut considérablement améliorer l'expérience utilisateur en offrant une navigation facile et un accès rapide aux fonctionnalités importantes.
Le package react-mui-sidebar, propulsé par Material-UI, est un outil React NPM utile conçu pour faciliter la création de barres latérales réactives et hautement personnalisables.
Dans cet article, nous explorerons les aspects clés de react-mui-sidebar et comment vous pouvez l'utiliser pour sublimer l'expérience de navigation latérale dans vos applications React.
Table des matières
Prérequis
Avant de plonger dans le tutoriel, assurez-vous de disposer des éléments suivants :
Bases de React comme les composants, les props, l'état (state) et le JSX
Connaissance de React Router ou du App Router de Next.js pour comprendre le fonctionnement des liens et de la navigation
Compréhension de Material-UI / MUI : thèmes, composants, stylisation
Utilisation des packages NPM / Yarn : installation, importation et gestion des dépendances
Compétences de base en CSS / mise en page : Flexbox, largeurs, design réactif, etc.
Voici ce que nous allons construire :
Voici également une démo en direct que vous pouvez consulter.
Qu'est-ce que MUI (Material-UI) ?
Material-UI est un Framework UI React largement adopté qui apporte les principes du Material Design de Google aux applications React. React MUI Sidebar exploite les forces de Material-UI, offrant une intégration fluide pour créer des barres latérales esthétiques et réactives.
Fonctionnalités de React MUI Sidebar
Design réactif : React MUI Sidebar garantit une mise en page cohérente et adaptative sur différentes tailles d'écran, répondant à la demande croissante d'interfaces adaptées aux mobiles.
Options de personnalisation : Vous pouvez facilement modifier l'apparence de la barre latérale pour qu'elle corresponde au design global de votre application, permettant un aspect cohérent et fidèle à votre marque.
Intégration avec React et Next.js : React MUI Sidebar s'intègre parfaitement à React et Next.js, offrant une expérience de développement familière et efficace.
Convivialité : React MUI Sidebar est conçu dans un souci de simplicité, ce qui facilite son incorporation dans vos projets. Grâce à une documentation intuitive, vous pouvez rapidement comprendre et implémenter les fonctionnalités de la barre latérale.
Support des icônes : La barre latérale intègre un support pour les icônes, vous aidant à améliorer l'attrait visuel et l'ergonomie de vos applications. Vous pouvez utiliser n'importe quelle bibliothèque d'icônes et fournir le composant d'icône.
Support des menus et sous-menus : Il offre une structure hiérarchique avec un support pour les menus principaux et les sous-menus imbriqués. Cette fonctionnalité vous permet d'organiser et de présenter des structures de navigation complexes de manière claire et intuitive.
Transitions fluides : La barre latérale incorpore des effets de transition fluides, améliorant l'expérience utilisateur globale en offrant un flux de navigation visuellement agréable. Les animations sont implémentées avec soin pour éviter tout effet saccadé lors des interactions.
Pourquoi choisir react-mui-sidebar ?
Il existe plusieurs raisons d'utiliser cet outil pratique. En voici quelques-unes majeures :
Performance optimisée
react-mui-sidebar est conçu et configuré pour une haute performance, garantissant des interactions utilisateur fluides et réactives. En interne, il minimise les nouveaux rendus via la mémoïsation afin que seules les parties du menu qui changent réellement soient mises à jour. Il utilise une structure DOM légère et un rendu conditionnel des éléments imbriqués pour éviter les montages inutiles.
Puisqu'il est basé sur MUI, il exploite également une stylisation efficace via la prop sx ou les styled components plutôt que des recalculs de thèmes lourds.
Ces caractéristiques sont cruciales pour les applications, en particulier celles dotées d'interfaces utilisateur complexes, où les problèmes de performance peuvent nuire à l'expérience utilisateur.
Force de la communauté
React MUI Sidebar bénéficie d'une base d'utilisateurs large et active, en partie grâce à l'importante communauté Material UI. C'est un avantage pour les utilisateurs car cela signifie qu'il existe une multitude de ressources, de tutoriels et d'assistance disponibles.
Une communauté forte peut contribuer à la croissance du Framework, fournir des solutions aux problèmes courants et favoriser la collaboration entre les développeurs.
Maintenance fiable
react-mui-sidebar est activement soutenu par des mises à jour régulières et une maintenance proactive de sa communauté. Les mises à jour régulières incluent souvent des corrections de bugs, des correctifs de sécurité et de nouvelles fonctionnalités, ce qui permet de s'assurer que le Framework reste actuel et adaptable aux besoins évolutifs des utilisateurs. C'est particulièrement important pour les projets à long terme et cela montre un engagement envers l'amélioration continue du Framework.
Comment démarrer avec react-mui-sidebar
Dans ce tutoriel, je vais vous guider à travers l'installation et la configuration de react-mui-sidebar dans une application React et Next.js. Vous apprendrez comment intégrer la barre latérale, ajouter un logo, créer des menus et utiliser des liens.
Étape 1 : Installer react-mui-sidebar
Pour commencer, vous devrez installer le package react-mui-sidebar dans votre projet React ou Next.js. Vous pouvez le faire en utilisant npm ou yarn.
Avec npm :
npm install react-mui-sidebar
Avec yarn :
yarn add react-mui-sidebar
Cela ajoutera react-mui-sidebar et ses dépendances à votre projet.
Étape 2 : Importer le composant React MUI Sidebar
Une fois le package installé, vous pouvez importer les composants nécessaires de react-mui-sidebar dans votre projet. Ces composants vous permettront de personnaliser la barre latérale avec des menus, des sous-menus et même un logo.
import { Sidebar, Menu, MenuItem, Submenu, Logo } from "react-mui-sidebar";
Étape 3 : Configurer le routage pour React ou Next.js
Pour activer la navigation à l'intérieur des composants de react-mui-sidebar comme MenuItem ou Logo, vous devez passer un composant de lien provenant de react-router ou next/link en utilisant la prop component à l'intérieur du composant correspondant, comme illustré dans l'exemple ci-dessous :
Si vous utilisez React Router :
import { Link } from "react-router-dom";
const App = () => {
return (
<Sidebar width={"270px"}>
<Logo
component={Link} // Passage du lien au composant pour le routage
href="/"
img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png"
>
AdminMart
</Logo>
<Menu subHeading="HOME">
<MenuItem
icon={<CottageOutlinedIcon />}
component={Link} // Passage du lien au composant pour le routage
link="/tes"
badge={true}
isSelected={true}
>
{" "}
{/* texte pour votre lien */}
Link Text
</MenuItem>
</Menu>
</Sidebar>
);
};
export default App;
Si vous utilisez le App Router de Next.js :
import Link from "next/link";
const App = () => {
return (
<Sidebar width={"270px"}>
<Logo
component={Link} // Passage du lien au composant pour le routage
href="/"
img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png"
>
AdminMart
</Logo>
<Menu subHeading="HOME">
<MenuItem
icon={<CottageOutlinedIcon />}
component={Link} // Passage du lien au composant pour le routage
link="/tes"
badge={true}
isSelected={true}
>
{" "}
{/* texte pour votre lien */}
Link Text
</MenuItem>
</Menu>
</Sidebar>
);
};
export default App;
Étape 4 : Initialiser la barre latérale
Nous allons maintenant configurer le composant Sidebar dans votre application. Vous pouvez définir la largeur de la barre latérale à l'aide de la prop width. Voici un exemple simple :
<Sidebar width={"270px"}> // passez la largeur souhaitée pour votre barre latérale
{/* Le contenu de la barre latérale va ici */}
</Sidebar>
Cela initialise la barre latérale avec une largeur de 270px. Vous pouvez ajuster cette largeur en fonction de vos besoins de conception.
Étape 5 : Ajouter un logo à la barre latérale
Vous pouvez ajouter un logo à l'intérieur de la barre latérale en utilisant le composant Logo. Pour ce faire, vous pouvez fournir une URL src ou utiliser la prop img pour lier une image de logo via un CDN. Vous pouvez également rendre le logo cliquable en passant un lien de navigation via les props component et href. Voici comment procéder :
<Sidebar width={"270px"}>
<Logo
component={Link}
href="/"
img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png" // chemin de l'image que vous souhaitez utiliser comme logo
>
AdminMart
</Logo>
</Sidebar>
Dans cet exemple, nous avons ajouté un logo provenant d'un CDN via la prop img, utilisé la prop component pour passer le Link, et défini le chemin de navigation sur (/) (la page d'accueil) via la prop href. Nous avons également défini le texte "AdminMart" comme nom de l'application.
Étape 6 : Créer un menu à l'intérieur de la barre latérale
Créons maintenant un menu à l'intérieur de la barre latérale en utilisant le composant Menu. Vous pouvez spécifier un titre de sous-menu via la prop subHeading. À l'intérieur du Menu, vous pouvez ajouter des composants MenuItem pour chaque élément.
Vous pouvez également fournir une prop link ainsi que la prop component au MenuItem pour transformer l'élément en un lien cliquable.
Voici comment structurer le menu :
<Sidebar width={"270px"}>
<Menu subHeading="HOME">
<MenuItem component={Link} link="/" badge="true" isSelected={true} >
Modern
</MenuItem>
<MenuItem>eCommerce</MenuItem>
<MenuItem>Analytical</MenuItem>
</Menu>
</Sidebar>
Dans cet exemple :
Nous avons ajouté un Menu avec l'en-tête "HOME".
Le premier MenuItem possède une prop
link, donc cliquer dessus naviguera vers la page d'accueil (/).Les deuxième et troisième composants MenuItem sont de simples éléments textuels sans liens.
La prop badge="true" peut être utilisée pour afficher un badge ou une notification sur le MenuItem, et la prop isSelected={true} marque cet élément de menu comme étant actuellement sélectionné ou actif. Vous pouvez personnaliser cette fonctionnalité selon vos besoins.
Étape 7 : Ajouter des sous-menus (Optionnel)
Pour ajouter des sous-menus à l'intérieur du menu principal, vous pouvez utiliser le composant Submenu. Le Submenu peut être imbriqué dans le composant Menu et contient son propre ensemble de MenuItems. Utilisez la prop title pour définir l'en-tête du sous-menu.
Voici un exemple d'ajout de sous-menu :
<Sidebar width={"270px"}>
<Menu subHeading="SERVICES">
<MenuItem component={Link} link="/web-development">Web Development</MenuItem>
<MenuItem component={Link} link="/seo-services">SEO Services</MenuItem>
<Submenu title="Marketing">
<MenuItem component={Link} link="/digital-marketing">Digital Marketing</MenuItem>
<MenuItem component={Link} link="/content-marketing">Content Marketing</MenuItem>
</Submenu>
</Menu>
</Sidebar>
Dans cet exemple :
Un sous-menu sous l'en-tête "Marketing" est ajouté à l'intérieur du menu "SERVICES".
Le sous-menu contient deux MenuItems avec des liens vers différentes pages de services.
Conclusion
Vous avez maintenant intégré avec succès une barre latérale entièrement fonctionnelle dans votre application React et Next.js en utilisant react-mui-sidebar. Vous pouvez personnaliser davantage la barre latérale en :
Modifiant la largeur et le design.
Ajoutant plus de sous-menus, d'éléments de menu ou d'icônes.
Utilisant des liens pour naviguer entre les pages.
Cette configuration offre une barre latérale flexible, réactive et facile à utiliser, parfaite pour la plupart des applications web.
Essayez-le :
Vous pouvez voir la démo fonctionnelle de react-mui-sidebar ici : Voir la démo.
Note : dans ce tutoriel, nous avons utilisé les Material UI Icons pour construire cette barre latérale. N'hésitez pas à choisir une bibliothèque alternative ou à utiliser des icônes différentes selon vos besoins spécifiques.