Side bar

La sidebar (barre latérale) permet de naviguer au niveau de l’application et d’accéder rapidement aux contenus de premier niveau de votre application. La sélection d’un élément dans la barre latérale permet aux utilisateurs de naviguer vers un élément de contenu spécifique.

Créer une sidebar

Comme pour tout élément de navigation, il est préférable d’utiliser l’avant-plan pour créer la sidebar. Ainsi cette barre est persistante tout au long de l’application.

Rendez-vous sur l’avant-plan.

Préparer la sidebar

Dans le premier état, préparez votre sidebar lorsqu’elle est cachée. En créant un nouvel état, nous préparerons l’effet d’ouverture de cette sidebar grâce aux transitions.

Importez les éléments graphiques de votre sidebar : la barre de fond et les icônes (menu, fermer). Pour la barre de fond, vous pouvez utiliser une Forme. Insérez des blocs de texte.

Placez ces éléments hors champ, seul le menu qui permet d’ouvrir la sidebar doit apparaître à l’écran.

Créer le lien vers chaque section

Au-dessus de chaque texte, ajoutez un composant Zone interactive, ce qui vous permet d’élargir la zone de tap. Associez l’action Aller à l’écran vers le bon écran.

Créer l’effet d’ouverture de la sidebar

Créez un nouvel état lié au précédent pour conserver les liens et les transitions. Déplacez les éléments de votre sidebar pour qu’ils se situent à gauche de l’écran.

Revenez sur l’état précédent et sélectionnez l’icône du menu. Créez l’action Aller à l’avant-plan > Afficher la sidebar.

Associer l’avant-plan aux écrans

Au niveau des écrans, rendez-vous dans la fenêtre Propriétés et sélectionnez l’avant-plan dans lequel la sidebar est cachée. Seul le clic sur le menu permet d’ouvrir la sidebar.