Les barres latérales sont un élément très important lors de la création d'une Webapp, en particulier pour un tableau de bord.
Elles permettent à vos utilisateurs de naviguer facilement et efficacement dans votre application, tout en apportant une touche esthétique (lorsqu'elles sont bien conçues).
Dans cet article, nous allons voir comment créer une barre latérale rétractable dans Bubble en quelques étapes, sans aucun plugin.
Étape 1 : Construire votre barre latérale dans Bubble
La première étape est bien sûr de concevoir votre barre latérale.
Soignez son apparence et, surtout, assurez-vous qu'elle s'adapte au design de votre application.
Pour gagner du temps, je vais utiliser une barre latérale d'une bibliothèque de composants.
De cette façon, je n'ai qu'à la copier et la coller dans mon application.
Ma barre latérale est contenue dans un groupe avec une Disposition en colonne qui contient trois autres groupes (celui avec le logo, celui avec les onglets, et celui avec l'utilisateur en bas de la barre latérale).
Un point important est que ma barre latérale a une largeur fixe. Cela nous permettra de modifier plus facilement la largeur.
Pour la hauteur, j'ai décoché la case "Adapter la hauteur au contenu" afin que ma barre latérale s'étende jusqu'en bas de la page.
Une fois cette partie terminée, nous pouvons passer à l'étape suivante pour rendre cette barre latérale rétractable.
Étape 2 : Créer notre Custom State
Pour faire simple, une barre latérale rétractable est simplement une barre latérale qui change de largeur en fonction d'un état (c'est-à-dire si elle est ouverte ou non).
Si vous connaissez Bubble, vous avez deviné que nous allons utiliser les Custom States pour suivre cet état.
Allons-y et créons un Custom State sur notre barre latérale :
Sélectionnez le groupe qui contient votre barre latérale et ouvrez son panneau de propriétés.
En haut du panneau de propriétés, cliquez sur l'icône "i" pour ouvrir l'inspecteur d'éléments.
De là, vous pouvez créer votre nouveau Custom State.
Faisons cela, nommons-le "Ouvert ?" et définissons son type sur "Oui/non".
N'oubliez pas de définir sa valeur par défaut ! Vous pouvez choisir Oui ou Non en fonction de si vous voulez que la barre latérale soit déployée ou non lors du chargement de la page.
Dans mon cas, je définis la valeur par défaut sur "Oui". Ainsi la barre latérale sera entièrement visible lorsque l'utilisateur chargera la page.
Étape 3 : Ajouter un workflow pour changer l'état de notre barre latérale
Très bien, nous pouvons maintenant suivre l'état actuel de notre barre latérale (c'est-à-dire si elle est rétractée ou non).
Mais maintenant, il nous faut un moyen de changer cet état, n'est-ce pas ?
Cela est assez simple. Si ce n'est pas déjà fait, vous aurez besoin d'une icône ou tout autre élément sur lequel vos utilisateurs pourront cliquer pour Réduire ou Étendre la barre latérale.
Pour ma part, j'ai une icône Double Chevron qui fera l'affaire.
Cliquez dessus et ajoutez un workflow :
Nous voulons que ce workflow modifie l'état "Ouvert ?" de notre barre latérale.
Si la barre latérale est ouverte --> Fermez-la
Si la barre latérale est fermée --> Ouvrez-la
Pour cela, nous allons créer deux workflows (sur la même icône).
Commençons par créer le premier :
Ajoutez une action qui définira le Custom State "Ouvert ?" de notre barre latérale à "Oui"
Ajoutez une condition au workflow pour qu'il ne se déclenche que lorsque l'état "Ouvert ?" de la barre latérale est "Non"
Maintenant que le premier workflow est créé, vous pouvez copier-coller ce workflow pour le dupliquer (clic droit sur le workflow) et inverser la logique dans le second workflow :
Ajoutez une action qui définira le Custom State "Ouvert ?" de notre barre latérale à "Non"
Ajoutez une condition au workflow pour qu'il ne se déclenche que lorsque l'état "Ouvert ?" de la barre latérale est "Oui"
Parfait ! Les utilisateurs peuvent maintenant modifier l'état de notre barre latérale.
Pour l'instant, cela n'impacte pas encore la barre latérale, mais nous allons y remédier dans l'étape suivante !
Étape 4 : Ajouter des Conditionals à notre barre latérale
Maintenant que nous pouvons faire référence à l'état actuel de la barre latérale, nous pouvons modifier les éléments qui la composent en fonction de cet état.
Grâce à cela, il sera possible de changer la largeur de la barre latérale, de montrer ou cacher certains éléments enfants, etc.
C'est la partie la plus "fastidieuse" de ce tutoriel. Nous allons devoir appliquer des Conditionals sur plusieurs éléments de la barre latérale, donc il faut être concentré.
Commençons dès maintenant.
Pour référence, voici le résultat que nous souhaitons obtenir :
Cacher les éléments à masquer lorsque la barre est rétractée
Comme on peut le voir, plusieurs éléments doivent être cachés lorsque la barre latérale est rétractée.
Par exemple, les noms des onglets doivent disparaître et le logo en haut doit aussi changer.
Commençons par cacher les noms de nos onglets
Pour cela, ajoutez la condition suivante : Lorsque la barre latérale est fermée, cet élément n'est pas visible.
En Bubble, cela se traduit par ceci :
Pensez à bien cocher l'option "Réduire lors de la disparition" sur chaque élément à cacher.
Collez cette expression sur tous les éléments que vous souhaitez cacher, lancez le Preview et vous verrez que cela fonctionne ! (Je sais, la barre latérale ne se replie pas encore, mais nous y travaillons).
Modifier la largeur de notre barre latérale quand elle est rétractée
Voici la partie importante : modifier la largeur de la barre latérale.
Pour cela, nous allons utiliser la même méthode qu'avant : appliquer des conditions.
La condition nécessaire est : Lorsque le Custom State "Ouvert ?" de la barre latérale est "Non", changer la largeur à x PX.
Voici comment cela se traduit dans Bubble :
Voyons le résultat :
Adapter la disposition et l'alignement de nos éléments
Comme nous l'avons vu précédemment, nos éléments sont un peu dispersés. Rien n'est correctement centré et les marges sont trop grandes.
Pour corriger cela, nous allons répéter la même condition pour modifier la disposition et les marges de nos éléments.
Adoucir la transition de la largeur de notre barre latérale
Parfait, notre barre latérale rétractable fonctionne.
Cependant, la transition est un peu brutale (car il n'y a pas de transition).
La barre latérale passe instantanément de sa largeur par défaut à sa largeur rétractée, ce qui n'est pas très fluide.
Réglons cela en ajoutant une transition.
Pour cela, sélectionnez simplement votre barre latérale, et trouvez le menu déroulant indiquant "Sélectionnez une propriété pour définir une nouvelle transition".
Choisissez "Width" dans la liste et voilà !
Vous pouvez lancer le Preview et vous constaterez que votre barre latérale est maintenant beaucoup plus fluide !
Bien sûr, vous pouvez ajuster le type de transition et la durée (je préfère régler la durée à 300ms).
Conclusion
Voilà ! Vous savez maintenant comment créer une barre latérale rétractable dans Bubble !
Si cet article vous a plu, n'oubliez pas de le partager, cela nous aide beaucoup.
