Navigazione dell'app

Le schermate sono le pagine; la navigazione è ciò che porta le persone fino a loro. In Keplin non vive dentro nessuna schermata: è un documento proprio dell'app, disegnato in un editor visuale e servito attorno a qualsiasi schermata sia aperta.

Ed è disegnata per dispositivo: la barra superiore del computer, il cassetto del cellulare e la barra delle azioni del tablet sono tre design indipendenti, ognuno con i suoi menu.

#Aprire l'editor

Nella barra laterale dell'app, scheda UI, il primo elemento si chiama Navigazione. Clicca e si apre in una scheda dello spazio di lavoro.

Quello che si vede al centro non è un modulo: è la pagina dell'app, disegnata come resterà. La barra in alto, il contenuto della schermata in basso (Contenuto della schermata), il marchio a sinistra. Modifichi mettendoci mano.

Sotto il titolo ci sono i controlli che comandano ciò che stai vedendo:

Controllo	Che cosa fa
Web (1280px) / Tablet (768px) / Mobile (390px)	Sceglie il dispositivo che stai disegnando.
Modalità (solo tablet e cellulare)	La forma della navigazione in quel dispositivo.
Menu iniziale	Quale dei menu si apre quando qualcuno entra nell'app.

#I gesti

Gesto	Che cosa succede
Clic su un menu	Lo seleziona (e, in un contesto, ne mostra la barra laterale).
Doppio clic su un menu	Apre il modale Elemento selezionato, dove si modifica tutto.
Trascinare un menu	Lo sposta di zona o lo riordina. Si lascia solo dove è valido.
+	Aggiunge un menu in quel punto.
× nell'angolo di un menu	Lo rimuove.
Clic sul marchio	Apre il modale Logo dell'app.

#I tipi di menu

Il pulsante + di ogni zona mostra i tipi che quel punto accetta:

Tipo	Che cos'è
Menu	Porta a una schermata dell'app. È l'elemento normale.
Sottomenu	Raggruppa altri menu — nel cassetto e nelle barre laterali.
Contesto (sidebar)	Un menu che, quando viene scelto, attiva una barra laterale propria con i suoi figli. È come se dividesse l'app in aree.
Separatore	Una linea divisoria.
Menu utente	L'avatar di chi sta usando l'app, con le sue voci e l'Esci.
Notifiche	La campanella, con il conteggio automatico delle non lette.

Non tutti i tipi vanno bene in tutti i punti, e l'editor offre solo quelli validi: un contesto non può contenere un altro contesto, un sottomenu porta solo elementi, il menu utente porta solo elementi e separatori, e il cassetto del cellulare non ha contesti (usa i sottomenu).

#Le zone della barra

Nella barra superiore, i menu si sistemano in tre zone, e il suggerimento nell'editor dice l' essenziale: Trascina i menu tra le zone della barra (sinistra / centro / destra) per creare gruppi.

Zona	Uso abituale
Gruppo a sinistra	La navigazione principale, subito dopo il marchio.
Gruppo al centro	Un gruppo in evidenza. Se resta vuota, non occupa spazio.
Gruppo a destra	Il menu utente, la campanella, le scorciatoie.

Dentro la barra laterale di un contesto — e nel cassetto — le zone sono due: Gruppo in alto e In basso (quest'ultima si incolla in fondo, perché "Impostazioni" e "Aiuto" restino dove ci si aspetta).

#Creare un menu

1. Scegli il dispositivo nella barra di contesto.
2. Clicca sul + della zona in cui lo vuoi.
3. Scegli il tipo.
4. Il menu nasce con un nome generico e resta selezionato — facci doppio clic per aprire il modale Elemento selezionato.
5. Compila:

Campo	Che cos'è
Icona	Un'icona della libreria o un SVG dagli asset dell'app.
Nome del menu	Il testo che appare. È una frase dell'app — entra nelle traduzioni.
Schermata…	La schermata di destinazione (solo in Menu).
(parametri)	Se la schermata di destinazione ha parametri di percorso, appare un campo per ogni parametro per dargli un valore fisso.
Solo icona (il nome appare nel tooltip)	Lascia nella barra soltanto l'icona.

6. Chiudi con Fatto e salva con Salva.

Il pulsante Elimina elemento, nello stesso modale, elimina il menu.

#Contesti e barre laterali

Un Contesto (sidebar) è il modo di dare a un'area dell'app un menu proprio: scegli "Vendite" nella barra superiore e appare a sinistra la barra laterale con le schermate di vendita. I figli del contesto sono gli elementi di quella barra.

Nel modale del contesto, la sezione Sidebar di questo contesto la rifinisce:

Campo	Opzioni
Comportamento	Fissa (sempre aperta) · Comprimibile (il pulsante comprime a icone) · Mini (icone; si espande al passaggio del mouse) · Mini con pannello (l'hover apre l'albero del menu)
Larghezza	Fra 180 e 400 pixel.
All'espansione (solo nella modalità mini)	Si sovrappone al contenuto o Spinge il contenuto.
Inizia compressa (solo nella modalità comprimibile)	Come si apre la prima volta.

#Il menu utente

Il Menu utente è un elemento come gli altri — può stare nella barra superiore, dentro un contesto, nel cassetto o nella barra compatta. Selezionarlo apre il suo popup, ed è lì che si aggiungono voci con il + (Menu o Separatore).

Nel modale restano le opzioni che non sono visive:

Opzione	Che cosa fa
Mostra il nome	Il nome di chi sta usando l'app appare nell'intestazione del menu.
Mostra l'utente (accesso)	Anche il nome utente.
Opzione «Esci»	Include l'uscita in fondo al menu.
Testo di «Esci»	Un testo proprio; vuoto usa Quello di sistema (tradotto).

Senza icona, l'avatar mostra le iniziali del nome — ed è ciò che il selettore di icona chiama Nessuna icona (iniziali).

#Notifiche

L'elemento Notifiche è la campanella: solo icona, con la pill delle non lette che si aggiorna da sola. Il clic apre le ultime notifiche e il Vedi altre apre il pannello con tutte. Nel modale, Notifiche nel dropdown decide quante ne appaiono per volta (fra 1 e 20).

#Pill di valore

Qualsiasi menu (tranne i separatori e la campanella) può mostrare una pill con un numero vivo — gli ordini da processare accanto a "Ordini", le richieste in sospeso accanto ad "Approvazioni".

1. Nel modale dell'elemento, attiva Mostra pill con valore.
2. Scegli l'API che porta i dati (Scegli API…).
3. In Valore, scegli Conteggio (n. di record) o Campo del 1° record — in questo caso, indica anche il Campo.
4. Nascondi con valore vuoto o zero evita la pill che dice "0".

La pill si aggiorna in tempo reale: quando i dati cambiano, il numero cambia — senza che nessuno ricarichi la pagina.

#Il logo dell'app

Clicca sul marchio, a sinistra della barra, per aprire il modale Logo dell'app:

Campo	Che cosa fa
Icona o immagine	Sceglie un'icona della libreria o un file dagli Asset dell'app.
Mostra il nome dell'app	Il nome accanto al marchio.
Inquadratura nella barra	Solo per SVG: Scala, Larghezza del riquadro, e il posizionamento trascinando l'immagine.
Adatta al riquadro	Ripristina scala e posizione.
Nessuna inquadratura	Disattiva l'inquadratura.

L'inquadratura è la risposta al logo che "non ci sta": trascini e scali finché non sta bene nella barra, e il modale stesso garantisce che il file SVG resta intatto — il ritaglio è solo visivo e reversibile. Per gli altri formati, la nota spiega che l'inquadratura è disponibile solo per SVG.

#Menu iniziale

Menu iniziale, nell'angolo in alto a destra, decide da dove l'app si apre. Si sceglie uno dei menu (non una schermata sciolta), e viene scelto per dispositivo — il cellulare può aprirsi su un pannello diverso da quello del computer.

Se un dispositivo non ha una scelta propria, eredita quella del successivo (cellulare → tablet → web); e se non ce n'è nessuna, l'app si apre sul primo menu che porta a una schermata.

#Un design per dispositivo

Il Web è sempre una Barra superiore. Il tablet e il cellulare hanno un selettore Modalità:

Modalità	Come resta
Barra superiore (solo tablet)	Uguale al computer: marchio, menu e contesti in una barra.
Menu hamburger	Una barra compatta con il pulsante ☰, che apre il cassetto con l'albero dei menu.
Barra delle azioni	Una barra in fondo, in stile applicazione mobile, con fino a 5 voci — e senza cassetto.

Nelle modalità compatte ci sono ancora due file proprie:

• L'Header — fino a 4 azioni accanto al marchio (il menu utente e la campanella stanno bene qui).
• La Barra delle azioni — fino a 5 voci in fondo, ognuna un Pulsante o un Menu azioni.

Quando il limite è raggiunto, la piattaforma dice perché: La barra delle azioni ha già 5 elementi (massimo). / L'header accetta al massimo 4 azioni.

#Chi vede che cosa

L'editor disegna; chi decide chi vede ogni menu è Impostazioni dell'app ▸ Autorizzazioni, nella scheda Menu — per ruolo e per dispositivo.

La regola vale la pena saperla: al contrario delle schermate, un menu è visibile per impostazione predefinita. La porta è la schermata, e quella è già chiusa; nascondere il menu serve a togliere un gruppo intero dalla vista, o a togliere la campanella a chi non riceve nulla. Nascondere un gruppo si porta via i figli, e un elemento che punta a una schermata inaccessibile sparisce da solo.

#Perché no…?

• Perché le mie modifiche sono sparite? Non sono state salvate. La navigazione ha il pulsante Salva — e avvisa prima che tu chiuda una scheda con modifiche da salvare.
• Perché non riesco a lasciare il menu dove voglio? Quel punto non accetta quel tipo. I bersagli non validi non si accendono nemmeno: un contesto dentro un contesto, un sottomenu dentro un menu utente, un separatore nella barra superiore.
• Perché non vedo i menu sul cellulare? Il cellulare ha un albero proprio e può essere vuoto. Scegli Mobile (390px) e disegnalo.
• Perché è sparito un menu nell'app pubblicata? O è stato nascosto in Impostazioni ▸ Autorizzazioni ▸ Menu per quel ruolo, oppure punta a una schermata a cui quella persona non ha accesso.
• Perché il logo appare tagliato? È inquadrato. Apri il modale e usa Adatta al riquadro, oppure Nessuna inquadratura.
• Perché non riesco a cambiare il tipo di un menu? Non si cambia. Elimina e crea con il tipo giusto — è l'unica operazione che la piattaforma non ti lascia fare a metà.
• Perché la pill mostra sempre 0? Attiva Nascondi con valore vuoto o zero, oppure verifica che l'API scelta restituisca davvero dei record.