La HeaderBar e il Breadcrumb

L’header bar è il componente fisso in alto che contiene la navigazione e i controlli principali dell’applicazione.

ShaHeaderBar #

La ShaHeaderBar è il contenitore dell’intestazione dell’applicazione. In ShaMainViewSticky, questo elemento rimane fisso in alto durante lo scroll della pagina.
Proprietà principali:

Proprietà	Tipo	Descrizione
sidebarButton	boolean	Mostra il pulsante per aprire la sidebar (default: true)
className	string	Classi CSS personalizzate
style	object	Stili inline personalizzati

Contenuto standard: 

• Pulsante menu sidebar (su mobile)
• ShaBreadcrumb: Navigazione breadcrumb
• ShaDropdownMenu: Menu utente

ShaBreadcrumb #

Il breadcrumb mostra il percorso di navigazione corrente e permette di tornare alle pagine precedenti.
Proprietà principali:

Proprietà	Tipo	Descrizione
items	array	Array di oggetti { id, title } da visualizzare
maxNames	number	Numero massimo di elementi da mostrare (default: 4)
disabled	boolean	Disabilita l’interazione
visible	boolean	Mostra/nascondi il breadcrumb

Struttura items:

[
  { id: 0, title: "Dashboard" },
  { id: 1, title: "Progetti" },
  { id: 2, title: "Progetto Alpha" }
]

Eventi:

onSelect(event):

•  Scatenato quando si clicca su un elemento del breadcrumb
• event.id: id dell’elemento cliccato

Aggiornamento automatico:
Il breadcrumb viene aggiornato automaticamente quando si usano i metodi di navigazione (push, pop, setTitle). Non è necessario gestirlo manualmente.

Comportamento al click:
Quando l’utente clicca su un elemento del breadcrumb, il page controller chiama automaticamente pop() per tornare a quella pagina:

// Gestito automaticamente dal framework
shadcnBreadcrumb.onSelect = function(event) {
  let id = event.id;

  if (id >= (view.navStack.length - 1)) return;

  let nrPageToRemove = view.navStack.length - id - 1;
  view.pop(nrPageToRemove);
};

Esempio personalizzazione:

// Imposta breadcrumb manualmente (raramente necessario)
function* updateBreadcrumb() {
  this.view.shadcnBreadcrumb.items = [
    { id: 0, title: "Home" },
    { id: 1, title: "Progetti" },
    { id: 2, title: this.currentProject.name }
  ];
}

ShaDropdownMenu #

Il dropdown menu nell’header contiene tipicamente le azioni utente: profilo, impostazioni, logout.
Struttura:

ShaDropdownMenu
├── ShaDropdownMenuItem (Profilo)
├── ShaDropdownMenuItem (Impostazioni)
├── ShaDropdownMenuSeparator
└── ShaDropdownMenuItem (Logout)

Di seguito analizziamo i componenti del dropdown.

ShaDropdownMenu #

Contenitore principale del menu a tendina.
Proprietà:

• label: Testo del trigger button
• icon: Icona del trigger
• align: Allineamento menu (start, center, end)

ShaDropdownMenuItem #

Voce di menu cliccabile.
Proprietà:

• label: Testo della voce
• icon: Icona (opzionale)
• disabled: Disabilita la voce

Eventi: – onSelect(event): Scatenato al click.
Esempio:

// Dropdown menu utente
function* profileMenuItem_onSelect() {
  yield view.push(App.ProfileView, {
    title: "Profilo Utente"
  });
}

function* logoutMenuItem_onSelect() {
  let confirm = yield app.popup(
    "Conferma Logout",
    "Sei sicuro di voler uscire?",
    ["Annulla", "Esci"]
  );

  if (confirm === 1) {
    yield app.logout();
    yield view.push(App.LoginView, {
      root: true,
      remove: true
    });
  }
}

ShaDropdownMenuCheckboxItem #

Voce con checkbox per opzioni on/off.

Proprietà:

• label: Testo
• checked: Stato checkbox (boolean)

Eventi:

• onCheckedChange(event): Scatenato al cambio stato

Esempio:

// Toggle notifiche
function* notificationsCheckbox_onCheckedChange() {
  let enabled = this.sender.checked;

  yield app.settings.setNotifications(enabled);

  yield app.toast(
    enabled ? "Notifiche attivate" : "Notifiche disattivate",
    { variant: "success" }
  );
}

ShaDropdownMenuRadioGroup e RadioItem #

Per selezione esclusiva tra opzioni.

Esempio selezione tema:

ShaDropdownMenuRadioGroup
├── ShaDropdownMenuRadioItem (Light)
├── ShaDropdownMenuRadioItem (Dark)
└── ShaDropdownMenuRadioItem (Auto)

function* themeRadioItem_onSelect() {
  let theme = this.sender.value; // "light", "dark", "auto"

  yield app.theme.set(theme);

  // Notifica tutte le view aperte
  yield view.postMessage({
    bc: true,
    type: "theme-changed",
    theme: theme
  });
}

ShaDropdownMenuSeparator #

Linea separatrice tra gruppi di voci.

ShaDropdownMenuLabel #

Etichetta non cliccabile per raggruppare voci.
Esempio struttura completa:

ShaDropdownMenu
├── ShaDropdownMenuLabel ("Account")
├── ShaDropdownMenuItem ("Profilo")
├── ShaDropdownMenuItem ("Impostazioni")
├── ShaDropdownMenuSeparator
├── ShaDropdownMenuLabel ("Preferenze")
├── ShaDropdownMenuCheckboxItem ("Notifiche")
├── ShaDropdownMenuSeparator
└── ShaDropdownMenuItem ("Logout")

Pattern comuni HeaderBar #

Menu utente con avatar #

ShaDropdownMenu
  label: app.user.name
  icon: app.user.avatar
  ├── MenuItem (Profilo)
  ├── MenuItem (Impostazioni)
  ├── Separator
  └── MenuItem (Logout)

Breadcrumb con limite elementi #

ShaBreadcrumb
  maxNames: 3  // Mostra max 3 elementi

// Se ci sono più elementi: "Home > ... > Dettaglio"

Aggiornamento dinamico breadcrumb #

// Nel metodo onLoad della view
function* onLoad() {
  yield this.view.dataDM.load();

  let data = this.view.dataDM.getData();

  // Aggiorna titolo breadcrumb
  view.setTitle(`${data.type}: ${data.name}`);
}

Header con azioni contestuali #

// Aggiungi pulsanti nell'header per azioni della pagina corrente
ShaHeaderBar
  └── actionsContainer
        ├── ShaButton (Salva)
        ├── ShaButton (Annulla)
        └── ShaButton (Elimina)