Une Navbar Responsive
React ? Tailwind ? une Navbar Responsive ? Ok !
Article de Christophe_c
Une Navbar Responsive
Avec React et Tailwind, voyons comment useState peut nous aider.
La librairie React Icons permet d'avoir un large choix d'icones à intégrer à nos projets.
Profitons en !
https://react-icons.github.io/react-icons/
On se retrousse les manches, ça va bien se passer... Easy la navbar !!!
La vidéo
L'idée générale à retenir est qu'il ne faut pas forcément se contorsionner à créer une barre de navigation modulable en fonction de la taille de l'écran de l'utilisateur !
On peut se créer une Navbar pour PC, une pour smartphone, voir une troisième destinée aux tablette et ne faire apparaitre que la navbar adaptée à l'cran utilisée en arttibuant un petit "hidden" aux 2 autres Navbar.
On peut ainsi se passer des limites qu'une Navbar unique imposerait potentiellement aux autres.
Pour la transition de la Navbar mobile, Tailwind utilisé ici n'apporte pas une solution utltime et non réalisable en CSS Vanilla.
A vous d'imaginiez vos Navbar idéales ! Fun, pratiques, fonctionnelles, originales !
Et si vous souhaitez en apprendre plus sur React : C'est par ici !!!
A bientôt Compagnon de Code