Créer une navigation latérale réactive avec Tailwind CSS et React

Le conférencier souhaite la bienvenue aux spectateurs sur sa chaîne YouTube et présente le tutoriel sur la création d'une navigation latérale en utilisant Tailwind CSS. Il démontre la fonctionnalité de la barre latérale, y compris une section extensible qui révèle des icônes, une barre de recherche simple et un menu avec des sous-éléments qui peuvent être ouverts et fermés tout en maintenant leur état précédent.

Le conférencier mentionne un tutoriel précédent sur la création d'une interface utilisateur de site e-commerce utilisant Tailwind CSS, qui était basé sur du HTML de base. Il fournit un lien vers ce tutoriel dans la description et encourage les spectateurs à le consulter pour plus d'informations sur Tailwind CSS.

Le tutoriel commence avec le conférencier naviguant vers le site officiel de Tailwind CSS pour créer un nouveau projet. Ils sélectionnent l'option 'Créer une application React' dans les guides de framework et ouvrent le terminal pour configurer le répertoire du projet, le nommant 'tailwind nav'. Après avoir exécuté la commande, le projet est créé avec succès.

Le conférencier explique la nécessité d'exécuter une commande pour générer les fichiers 'tailwind.config.js' et 'postcss.config.js' dans le projet. Après avoir confirmé que les fichiers sont créés, il ouvre le projet dans Visual Studio Code et procède à l'installation de Tailwind CSS, PostCSS et Autoprefixer en utilisant une commande spécifique.

Après avoir configuré les fichiers nécessaires, le conférencier exécute le projet en utilisant 'npm run start' et confirme qu'il fonctionne correctement avec les classes Tailwind CSS. Il positionne ensuite l'éditeur de code et le navigateur côte à côte pour faciliter le processus de création de l'interface utilisateur.

Avant de procéder à la conception de l'interface utilisateur, le conférencier décide d'installer le package 'react-icons', qui offre une variété d'options d'icônes pour le projet. Il explique que ce package comprend des icônes de diverses bibliothèques telles que Bootstrap, Font Awesome, et d'autres, et souligne la nécessité d'importer des icônes spécifiques pour les utiliser dans le projet.

L'orateur discute du processus d'intégration d'icônes dans un projet React, mentionnant la copie de noms d'icônes spécifiques à partir d'une liste d'icônes. Ils confirment que les icônes ont été installées avec succès et sont prêtes à être utilisées dans le projet.

Le conférencier commence à personnaliser le thème du projet en créant une couleur violet foncé et une couleur blanche claire en utilisant des valeurs RGB. Cette personnalisation permet d'utiliser les nouvelles couleurs dans tout le projet.

Un div conteneur est créé avec un affichage flex pour structurer la mise en page, qui comprend une barre latérale et une section d'accueil. Le conférencier note que le projet doit être exécuté en utilisant 'npm run start' pour voir les mises à jour.

La couleur de fond de la barre latérale est définie sur violet foncé, et des ajustements sont effectués sur sa hauteur. La section de la page d'accueil est stylisée avec du padding, et le texte principal est placé dans une balise h1, avec des ajustements spécifiques de taille et de poids de police.

Le conférencier se concentre sur la section de navigation, ajoutant des marges et prévoyant de remplacer le texte de remplacement par de véritables composants. Il mentionne la nécessité d'une largeur dynamique qui s'ajuste en fonction de la taille de l'écran.

Une icône est importée de Bootstrap pour permettre à la section de la barre latérale de s'étendre et de se réduire. L'intervenant souligne l'importance de positionner correctement l'icône et d'ajuster son apparence, y compris la couleur de fond et la taille de la police.

Pour améliorer l'interaction utilisateur, le conférencier ajoute une bordure à l'icône et change le curseur en pointeur, indiquant que l'icône est cliquable. Cet indice visuel améliore l'expérience utilisateur en signalant l'interactivité.

Le conférencier présente l'utilisation du hook useState de React pour gérer la largeur dynamique de la barre latérale. Il explique que la largeur alternera entre 'w72' et 'w20' en fonction de l'état, améliorant ainsi la fonctionnalité de la barre latérale.

Le conférencier discute de la mise en œuvre d'une fonctionnalité de basculement où cliquer sur un bouton changera l'état 'ouvert'. Si 'ouvert' est vrai, il passera à faux, et vice versa. Après avoir enregistré les modifications, la fonctionnalité est confirmée comme fonctionnant, bien que l'aspect visuel nécessite des améliorations.

Pour améliorer l'expérience utilisateur, une durée de 300 millisecondes est ajoutée pour l'animation de basculement, rendant la transition plus fluide et visuellement attrayante. Le conférencier mentionne également la nécessité de rendre l'icône dynamique en utilisant des littéraux de gabarit, en la faisant spécifiquement pivoter de 180 degrés lorsque 'ouvert' est faux, indiquant une flèche vers la droite.

Dans la div de la barre latérale, le conférencier prévoit de créer un logo en utilisant une icône de design spécifique. L'icône est stylisée avec une couleur de fond 'bg amber 300', un rayon de bord de 4 pixels, et est positionnée à gauche. Le texte à côté de l'icône est stylisé avec une couleur blanche, un poids de police moyen et une taille de texte appropriée.

Le locuteur aborde la visibilité du texte du logo lorsque la barre latérale n'est pas ouverte. En utilisant la variable 'open', le texte est réglé pour se réduire à 0 lorsque la barre latérale est fermée, garantissant que seul l'icône est visible. Cette transition est confirmée comme fonctionnant correctement.

Le locuteur vise à ajouter une animation de rotation à 360 degrés à l'icône. Au départ, seule une option de 180 degrés est disponible, mais une valeur personnalisée est fournie pour obtenir l'effet souhaité. Après avoir enregistré les modifications, une durée de 500 millisecondes est définie pour garantir que l'animation soit visible et fluide.

Le locuteur commence à créer une barre de recherche, en appliquant flexbox pour l'alignement et un rayon de bordure de 6 pixels. L'arrière-plan est défini sur une couleur blanche claire, et une icône de recherche de Bootstrap est importée pour être utilisée. L'icône est stylisée avec une couleur blanche et un rembourrage approprié, tandis que le champ de saisie est défini comme de type 'search' avec une taille de police spécifiée.

Le conférencier discute de la conception d'un champ de saisie, spécifiant une taille de base de 16 pixels et un fond transparent. La largeur du champ de saisie est fixée à 100 % de la vue conteneur, avec la couleur du texte définie comme blanche pour garantir la visibilité lors de la saisie. Le contour est défini sur aucun pour supprimer le contour de focus par défaut, améliorant l'esthétique lorsque le curseur clignote.

Pour s'adapter à la largeur variable de la barre latérale, le conférencier souligne la nécessité de noms de classes dynamiques. Il note que lorsque la barre latérale est fermée, le champ de saisie doit être masqué pour éviter l'encombrement, et des ajustements de rembourrage sont nécessaires pour garantir que l'icône reste visible.

Le locuteur commence à créer des éléments de menu, en introduisant un tableau de menu et en utilisant la fonction map pour itérer à travers les éléments. Chaque élément de la liste nécessite une clé unique dérivée de l'index, et le titre du menu est extrait en conséquence. Le locuteur ajoute des classes de style, y compris la couleur du texte, la taille et les propriétés de mise en page, pour améliorer la présentation visuelle des éléments du menu.

Une icône est intégrée dans les éléments du menu, spécifiquement une icône de tableau de bord de la bibliothèque Remix Icon. Le conférencier importe l'icône et applique des classes de style supplémentaires pour s'assurer qu'elle s'aligne bien avec le titre du menu, maintenant un aspect cohérent.

Le conférencier aborde la réactivité de la barre latérale, notant que lorsque la largeur de la barre latérale est réduite, les titres de menu doivent être masqués pour maintenir une interface épurée. Il mentionne également l'ajout d'une durée pour les transitions afin d'améliorer l'expérience utilisateur.

Le conférencier passe à la discussion des éléments de sous-menu, indiquant que si un espacement est présent entre les éléments du menu, la marge supérieure sera ajustée. Par défaut, une marge de 8 pixels est appliquée, mais si l'espacement est vrai, cette valeur augmente à 36 pixels, garantissant une séparation appropriée et une clarté visuelle.

La discussion commence par la mise en œuvre des éléments de sous-menu dans une structure de menu. Si un sous-menu est présent, une icône de flèche vers le bas de Bootstrap sera affichée pour indiquer sa présence. L'état par défaut du sous-menu est défini sur 'faux', et une fonction est créée pour basculer la visibilité du sous-menu lorsqu'il est cliqué.

Pour afficher les éléments du sous-menu, une liste non ordonnée est créée qui parcourt chaque élément du sous-menu. Le style est appliqué pour garantir un espacement approprié, et une fonction est utilisée pour ouvrir le sous-menu. Une condition est ajoutée pour s'assurer que les éléments du sous-menu ne sont visibles que lorsque le sous-menu est ouvert.

L'icône représentant le sous-menu est configurée pour tourner lorsque le sous-menu est ouvert. De plus, des ajustements sont effectués pour garantir que les éléments du sous-menu ne s'affichent que lorsque le sous-menu est ouvert, résolvant ainsi les problèmes de visibilité lorsque le sous-menu est fermé.

Un tableau mis à jour contenant des icônes pour chaque élément de menu est introduit. Les icônes sont importées et appliquées aux éléments de menu respectifs, garantissant que si un élément de menu a une icône spécifique, elle sera affichée ; sinon, une icône de tableau de bord par défaut est utilisée. Cela améliore l'attrait visuel du menu.

Le tutoriel se termine par un résumé des fonctionnalités mises en œuvre, confirmant que tout fonctionne parfaitement. Le présentateur encourage les spectateurs à aimer, s'abonner et partager le tutoriel, invitant des suggestions pour de futurs contenus et souhaitant à tous une excellente journée.