Navigazione e tema

Le quattro schermate esistono, ma chi entra nell'app non ha modo di arrivarci: manca la navigazione. Questa tappa è breve e cambia tutto — alla fine, l'app ha un menu, un logo, colori propri ed è pronta a parlare più di una lingua.

Tre cose diverse, tre posti diversi:

Che cosa	Dove si fa
La navigazione — il menu con cui ci si muove nell'app	Pannello UI ▸ Navigazione
Il tema — colori, angoli e tipografia	Impostazioni dell'app ▸ Tema
Le lingue — le lingue e le frasi	Impostazioni dell'app ▸ Traduzioni

#L'editor di navigazione

1. Nel pannello UI, clicca su Navigazione, proprio sopra la sezione Schermate. Si apre una scheda con l'editor.
2. L'editor è un plastico della barra dell'app: trascini i menu fra le zone (sinistra, centro, destra) e vedi il risultato sul momento.
3. I tre pulsanti di dispositivo in alto — Web (1280px), Tablet (768px), Mobile (390px) — cambiano progetto. Comincia dal Web.

#Creare i tre menu

1. Clicca sul + della zona di sinistra. Appare un elemento nuovo e il pannello Elemento selezionato a destra.
2. Scegli Menu — il tipo che porta a una schermata.
3. Compila Nome del menu, scegli l'Icona e, in Schermata, la schermata di destinazione.
4. Ripeti per tutti e tre.

Nome del menu	Icona	Schermata
Início	layout-dashboard	Início
Contas	building-2	Contas
Oportunidades	target	Oportunidades

Nota che cosa non c'è nell'elenco: la Ficha de Conta. È di proposito — ci si arriva cliccando su una riga della tabella degli account, non da menu. Una schermata senza menu resta accessibile dal percorso e dal codice; la navigazione è solo la porta d'ingresso.

5. Nell'angolo in alto a destra, scegli il Menu iniziale: Início. È la schermata che si apre quando qualcuno entra nell'app senza indicare nessun percorso.
6. Clicca su Salva — "Navigazione salvata."

#Il menu utente

Sul lato destro della barra c'è un elemento speciale: il Menu utente. È dove chi usa l'app vede il proprio nome ed esce. Selezionalo e mettilo a punto:

• Mostra il nome e Mostra l'utente (accesso) — quello che appare accanto all'avatar. Senza icona, l'avatar mostra le iniziali del nome.
• Opzione «Esci» — lascia Quello di sistema (tradotto), a meno che tu non voglia un altro testo.

#Il logo dell'app

Il logo vive nella barra, a sinistra di tutto. Prima di sceglierlo, bisogna caricarlo nell'app:

1. Nel pannello UI, nella sezione Assets, clicca su Carica file e scegli il tuo logo. Un SVG è la scelta migliore: resta nitido a qualsiasi dimensione ed è l'unico formato che permette di inquadrare.
2. Torna alla scheda Navigazione e clicca sul logo del plastico (Modifica il logo dell'app).
3. In Icona o immagine, scegli il file che hai caricato.
4. Attiva Mostra il nome dell'app se vuoi il nome scritto accanto al simbolo.
5. In Inquadratura nella barra, trascina l'immagine per posizionarla e usa la Scala e la Larghezza del riquadro per dimensionarla — "Il file SVG resta intatto — il ritaglio è solo visivo e reversibile." Adatta al riquadro fa il lavoro al posto tuo; Nessuna inquadratura torna al punto di partenza.
6. Chiudi con Fatto e Salva.

#Ogni dispositivo ha la sua navigazione

Torna in cima all'editor e clicca su Mobile (390px). Nota che il progetto è un altro — e che appare un nuovo selettore, Modalità:

Modalità	Che cosa dà
Barra superiore	La stessa barra del web, ristretta.
Menu hamburger	Un pulsante che apre il menu in un pannello laterale. È il più comune sul telefono.
Barra delle azioni	Una barra in fondo alla schermata, con fino a 5 elementi — lo standard delle app mobili.

Monta in Mobile gli stessi tre menu (Início, Contas, Oportunidades), scegli la Modalità che preferisci e salva. Anche il Menu iniziale è per dispositivo — puoi aprire la dashboard sul computer e l'elenco degli account sul telefono.

#Il tema — dipingere l'app

Il Tema dipinge l'app costruita, senza toccare nessuna schermata.

1. In cima alla barra dell'app, clicca sull'icona a ingranaggio (Impostazioni dell'app).
2. Nel gruppo Aspetto, scegli Tema.
3. A sinistra ci sono i gruppi di colori; a destra, il pannello Anteprima — "Esempio con i token attuali — si aggiorna in tempo reale". Ogni colore che cambi appare lì all'istante.

Gruppo	Che cosa dipinge
Base	Sfondo e testo dell'app, contorni, campi e l'anello di focus.
Superfici	Card e popover (menu, dropdown, tooltip).
Colori	I colori semantici — Primaria, Secondaria, Distruttiva, Accento, Attenuata — e il testo sopra ciascuno.
Navigazione	Le barre di navigazione dell'app. Per impostazione predefinita seguono le superfici; è qui che si applica il branding.

Per la Gestione Clienti basta toccare due cose:

1. In Colori, metti la Primaria sul colore del tuo marchio. È il colore dei pulsanti d'azione, dei link e dello stato attivo.
2. In Navigazione, decidi se la barra resta chiara (a seguire le superfici, che è l'impostazione di partenza) o se prende il colore del marchio. Se la dipingi, regola anche il Testo delle barre — una barra scura con testo scuro non si legge.

Ogni colore ha un selettore visivo e un campo esadecimale (#rrggbb) — scrivere o scegliere è lo stesso. In fondo all'elenco, Forma e tipografia:

• Raggio degli angoli — da Senza arrotondamento (0) a Massimo (1rem), in cinque passi.
• Posizione degli avvisi — in quale angolo appaiono gli avvisi (quelli che mostra il keplin.ui.toast() della tappa precedente).
• Font (sans) — lo stack di font dell'app.

Salva con Salva. Per tornare ai colori di partenza, Ripristina i predefiniti — ripristina nell'editor, e diventa definitivo solo quando salvi.

#Le lingue

L'ultimo pezzo di questa tappa è la sezione Traduzioni, nel gruppo Localizzazione delle impostazioni. È una matrice: una riga per frase, una colonna per lingua.

In un'app appena costruita è vuota, ed è normale: i testi che hai scritto nei widget vivono nelle schermate. Le traduzioni servono per i testi che scrive il codice — e per dare all'app una seconda lingua.

Aggiungere una lingua:

1. Clicca sul + nell'intestazione della matrice.
2. Scegli la lingua in scegli una lingua… e conferma con Aggiungi lingua. La colonna nuova nasce vuota.

Creare una frase:

1. Scrivi nell'ultima riga, che è sempre in attesa ("scrivi per creare…").
2. La Chiave della frase "(deriva dalla frase)" — è il testo stesso nella lingua base a identificarla.
3. Compila le altre colonne con la traduzione.

Negli eventi delle schermate, la frase si usa attraverso il testo:

keplin.ui.toast(keplin.i18n.t("Account salvato"));

Per inserire un valore in mezzo a una frase, scrivilo fra parentesi graffe: {n} account dà 3 account, e il valore entra dal codice — keplin.i18n.t("{n} account", { n: 3 }). Una cella in giallo ti avvisa che quella traduzione ha perso una parentesi graffa che l'originale ha: in quella lingua il valore non apparirebbe.

Alla fine, Salva — "Traduzioni salvate e compilate."

#Perché non…?

• Perché non appare la mia schermata nell'elenco delle schermate del menu? Il selettore Schermata elenca le schermate normali dell'app. Le schermate di sistema (login, recupero, registrazione) non entrano nei menu — la piattaforma le serve da sola.
• Perché l'app continua ad aprirsi sulla schermata sbagliata? Il Menu iniziale è per dispositivo. Verificalo sul dispositivo su cui stai provando.
• Perché il mio logo appare tagliato? Usa Adatta al riquadro o aumenta la Larghezza del riquadro. E ricorda: l'inquadratura è disponibile solo per i file SVG.
• Perché il tema non è cambiato nell'app? È mancato il Salva — l'Anteprima si aggiorna in tempo reale, ma l'app costruita riceve il tema solo quando salvi.
• Perché un widget ha ignorato il colore nuovo? Ha un colore scritto a mano nella categoria Aspetto. Sostituiscilo con un token del tema.

L'app è montata e dipinta. Prossima tappa: logica e automazione.