Navigation et thème

Les quatre écrans existent, mais ceux qui entrent dans l'app n'ont aucun moyen d'y arriver : il manque la Navigation. Cette étape est courte et change tout — à la fin, l'app a un menu, un logo, ses propres couleurs, et elle est prête à parler plus d'une langue.

Trois choses différentes, trois endroits différents :

Quoi	Où cela se fait
La navigation — le menu par lequel on circule dans l'app	Panneau UI ▸ Navigation
Le thème — couleurs, coins et typographie	Paramètres de l'app ▸ Thème
Les langues — les langues et les phrases	Paramètres de l'app ▸ Traductions

#L'éditeur de navigation

1. Dans le panneau UI, cliquez sur Navigation, juste au-dessus de la section Écrans. Un onglet s'ouvre avec l'éditeur.
2. L'éditeur est une maquette de la barre de l'app : vous faites glisser des menus entre les zones (gauche, centre, droite) et vous voyez le résultat sur le moment.
3. Les trois boutons d'appareil en haut — Web (1280px), Tablette (768px), Mobile (390px) — changent de design. Commencez par le Web.

#Créer les trois menus

1. Cliquez sur le + de la zone de gauche. Un nouvel élément apparaît, ainsi que le panneau Élément sélectionné à droite.
2. Choisissez Menu — le type qui mène à un écran.
3. Remplissez Nom du menu, choisissez l'Icône et, dans Écran, l'écran de destination.
4. Répétez pour les trois.

Nom du menu	Icône	Écran
Início	layout-dashboard	Início
Contas	building-2	Contas
Oportunidades	target	Oportunidades

Remarquez ce qui n'est pas dans la liste : la Ficha de Conta. C'est exprès — on y arrive en cliquant sur une ligne de la table des comptes, pas par un menu. Un écran sans menu reste accessible par la route et par le code ; la navigation n'est que la porte d'entrée.

5. Dans le coin supérieur droit, choisissez le Menu initial : Início. C'est l'écran qui s'ouvre quand quelqu'un entre dans l'app sans indiquer de route.
6. Cliquez sur Enregistrer — « Navigation enregistrée. »

#Le menu de l'utilisateur

Du côté droit de la barre, il y a un élément spécial : le Menu de l'utilisateur. C'est là que celui qui utilise l'app voit son nom et se déconnecte. Sélectionnez-le et réglez :

• Afficher le nom et Afficher l'utilisateur (login) — ce qui apparaît à côté de l'avatar. Sans icône, l'avatar montre les initiales du nom.
• Option « Déconnexion » — laissez Celui du système (traduit), sauf si vous voulez un autre texte.

#Le logo de l'app

Le logo vit dans la barre, tout à gauche. Avant de le choisir, il faut le téléverser dans l'app :

1. Dans le panneau UI, dans la section Assets, cliquez sur Téléverser des fichiers et choisissez votre logo. Un SVG est le meilleur choix : il reste net à n'importe quelle taille et c'est le seul format qui permet le cadrage.
2. Revenez à l'onglet Navigation et cliquez sur le logo de la maquette (Modifier le logo de l'app).
3. Dans Icône ou image, choisissez le fichier que vous avez téléversé.
4. Activez Afficher le nom de l'app si vous voulez le nom écrit à côté du symbole.
5. Dans Cadrage dans la barre, faites glisser l'image pour la positionner et utilisez l'Échelle et la Largeur du cadre pour la dimensionner — « Le fichier SVG reste intact — le recadrage n'est que visuel et réversible. » Ajuster au cadre fait le travail pour vous ; Sans cadrage revient au début.
6. Fermez avec Terminé et Enregistrer.

#Chaque appareil a sa navigation

Revenez en haut de l'éditeur et cliquez sur Mobile (390px). Remarquez que le design est différent — et qu'un nouveau sélecteur apparaît, Mode :

Mode	Ce que cela donne
Barre supérieure	La même barre que sur le web, rétrécie.
Menu hamburger	Un bouton qui ouvre le menu dans un panneau latéral. C'est le plus courant sur téléphone.
Barre d'actions	Une barre au bas de l'écran, avec jusqu'à 5 éléments — le standard des apps mobiles.

Montez en Mobile les mêmes trois menus (Início, Contas, Oportunidades), choisissez le Mode que vous préférez et enregistrez. Le Menu initial est lui aussi par appareil — vous pouvez ouvrir le tableau de bord sur l'ordinateur et la liste des comptes sur le téléphone.

#Le thème — peindre l'app

Le Thème peint l'app construite, sans toucher à aucun écran.

1. En haut de la barre de l'app, cliquez sur l'icône d'engrenage (Paramètres de l'app).
2. Dans le groupe Apparence, choisissez Thème.
3. À gauche se trouvent les groupes de couleurs ; à droite, le panneau Aperçu — « Exemple avec les tokens actuels — mise à jour en direct. » Chaque couleur que vous changez y apparaît à l'instant.

Groupe	Ce qu'il peint
Base	Fond et texte de l'app, contours, champs et l'anneau de focus.
Surfaces	Cartes et popovers (menus, dropdowns, tooltips).
Couleurs	Les couleurs sémantiques — Primaire, Secondaire, Destructive, Accent, Atténuée — et le texte sur chacune.
Navigation	Les barres de navigation de l'app. Par défaut elles suivent les surfaces ; c'est ici que s'applique le branding.

Pour la Gestion de Clients, il suffit de toucher à deux choses :

1. Dans Couleurs, mettez la Primaire à la couleur de votre marque. C'est la couleur des boutons d'action, des liens et de l'état actif.
2. Dans Navigation, décidez si la barre reste claire (en suivant les surfaces, ce qui est l'origine) ou si elle prend la couleur de la marque. Si vous la peignez, ajustez aussi le Texte des barres — une barre sombre avec du texte sombre ne se lit pas.

Chaque couleur a un sélecteur visuel et un champ hexadécimal (#rrggbb) — écrire ou choisir revient au même. En bas de la liste, Forme et typographie :

• Rayon des coins — de Sans arrondi (0) à Maximum (1rem), en cinq paliers.
• Position des avertissements — dans quel coin apparaissent les avertissements (ceux que le keplin.ui.toast() de l'étape précédente affiche).
• Police (sans) — la stack de polices de l'app.

Enregistrez avec Enregistrer. Pour revenir aux couleurs d'origine, Réinitialiser — cela remet l'éditeur en état, et ce n'est définitif que lorsque vous enregistrez.

#Les langues

La dernière pièce de cette étape est la section Traductions, dans le groupe Localisation des paramètres. C'est une matrice : une ligne par phrase, une colonne par langue.

Dans une app tout juste construite, elle est vide, et c'est normal : les textes que vous avez écrits dans les widgets vivent dans les écrans. Les traductions servent aux textes que le code écrit — et à donner à l'app une seconde langue.

Ajouter une langue :

1. Cliquez sur le + dans l'en-tête de la matrice.
2. Choisissez la langue dans choisir une langue… et confirmez avec Ajouter une langue. La nouvelle colonne naît vide.

Créer une phrase :

1. Écrivez dans la dernière ligne, qui attend toujours (« écrire pour créer… »).
2. La Clé de la phrase « (vient de la phrase) » — c'est le texte lui-même, dans la langue de base, qui l'identifie.
3. Remplissez les autres colonnes avec la traduction.

Dans les événements des écrans, la phrase s'utilise par son texte :

keplin.ui.toast(keplin.i18n.t("Compte enregistré"));

Pour placer une valeur au milieu d'une phrase, écrivez-la entre accolades : {n} contas donne 3 contas, et la valeur vient du code — keplin.i18n.t("{n} contas", { n: 3 }). Une cellule en jaune vous prévient que cette traduction a perdu une accolade que l'original contient : dans cette langue, la valeur n'apparaîtrait pas.

À la fin, Enregistrer — « Traductions enregistrées et compilées. »

#Pourquoi pas… ?

• Pourquoi mon écran n'apparaît-il pas dans la liste d'écrans du menu ? Le sélecteur Écran liste les écrans normaux de l'app. Les écrans système (login, récupération, inscription) n'entrent pas dans les menus — la plateforme les sert toute seule.
• Pourquoi l'app continue-t-elle de s'ouvrir sur le mauvais écran ? Le Menu initial est par appareil. Vérifiez-le sur l'appareil sur lequel vous testez.
• Pourquoi mon logo apparaît-il coupé ? Utilisez Ajuster au cadre ou augmentez la Largeur du cadre. Et souvenez-vous : le cadrage n'est disponible que pour les fichiers SVG.
• Pourquoi le thème n'a-t-il pas changé dans l'app ? Il a manqué Enregistrer — l'Aperçu se met à jour en direct, mais l'app construite ne reçoit le thème que lorsque vous enregistrez.
• Pourquoi un widget a-t-il ignoré la nouvelle couleur ? Il a une couleur écrite à la main dans la catégorie Apparence. Remplacez-la par un token du thème.

L'app est montée et peinte. Prochaine étape : logique et automatisation.