Sidebar e Menu

Documentazione storica, non aggiornata.

La sidebar contiene il menu di navigazione principale dell’applicazione.

ShaSidebar

Contenitore principale della sidebar.
Proprietà:

Proprietà	Tipo	Descrizione
variant	enum	Stile: classic, floating, inset
side	enum	Posizione: left, right
visible	boolean	Mostra/nascondi sidebar
iconCollapseMode	boolean	Modalità icone quando collassata

ShaSidebarHeader

Sezione header della sidebar (logo, titolo).

ShaSidebarContent

Sezione centrale con i menu di navigazione.

ShaSidebarFooter

Sezione footer (impostazioni, profilo).

ShaSidebarGroup

Raggruppa voci di menu correlate.
Proprietà:

Proprietà	Tipo	Descrizione
label	string	Etichetta del gruppo
variant	enum	Tipo: group, collapsible, subgroup, subcollapsible
state	enum	Stato collassabile: open, closed
action	string	Icona pulsante azione (es. per aggiungere)
icon	string	Icona del gruppo

Eventi:

onClick(event): Click sul gruppo collassabile
onAction(event): Click sul pulsante azione
onToggleState(event): Cambio stato aperto/chiuso

Varianti gruppo

1. Group (standard)

ShaSidebarGroup
  label: "Navigazione"
  variant: "group"
  ├── ShaSidebarItem (Dashboard)
  ├── ShaSidebarItem (Progetti)
  └── ShaSidebarItem (Impostazioni)

2. Collapsible (espandibile/collassabile)

ShaSidebarGroup
  label: "Admin"
  variant: "collapsible"
  state: "closed"
  ├── ShaSidebarItem (Utenti)
  ├── ShaSidebarItem (Ruoli)
  └── ShaSidebarItem (Log)

3. Subgroup (sottogruppo senza border)

ShaSidebarGroup
  label: "Sottosezione"
  variant: "subgroup"
  ├── ShaSidebarItem (...)
  └── ShaSidebarItem (...)

4. Subcollapsible (sottogruppo collassabile)

ShaSidebarGroup
  label: "Avanzate"
  variant: "subcollapsible"
  state: "closed"
  ├── ShaSidebarItem (...)
  └── ShaSidebarItem (...)

ShaSidebarItem

Singola voce di menu cliccabile.
Proprietà:

Proprietà	Tipo	Descrizione
label	string	Testo della voce
icon	string	Icona (es. “shaicons shaicons-home”)
iconPosition	enum	Posizione: left, right
disabled	boolean	Disabilita la voce
className	string	Classi CSS personalizzate

Eventi:

onClick(event): Click sulla voce

ShaSidebarContent
  ├── ShaSidebarGroup
  │     label: "Navigazione"
  │     variant: "group"
  │     ├── dashboardItem (ShaSidebarItem)
  │     │     label: "Dashboard"
  │     │     icon: "shaicons shaicons-layout-dashboard"
  │     │
  │     ├── projectsItem (ShaSidebarItem)
  │     │     label: "Progetti"
  │     │     icon: "shaicons shaicons-folder"
  │     │
  │     └── tasksItem (ShaSidebarItem)
  │           label: "Task"
  │           icon: "shaicons shaicons-check-square"
  │
  └── ShaSidebarGroup
        label: "Admin"
        variant: "collapsible"
        state: "closed"
        ├── usersItem (ShaSidebarItem)
        │     label: "Utenti"
        │     icon: "shaicons shaicons-users"
        │
        └── settingsItem (ShaSidebarItem)
              label: "Impostazioni"
              icon: "shaicons shaicons-settings"

Handler navigazione:

function* dashboardItem_onClick() {
  yield view.push(App.DashboardView, {
    root: true,
    title: "Dashboard"
  });

  if (app.device.isMobile) {
    yield view.toggleMenu(false);
  }
}

function* projectsItem_onClick() {
  yield view.push(App.ProjectsView, {
    root: true,
    title: "Progetti"
  });

  if (app.device.isMobile) {
    yield view.toggleMenu(false);
  }
}

ShaSidebarGroup
  label: "Sprint"
  variant: "collapsible"
  state: "open"
  action: "shaicons shaicons-plus"  // Pulsante "Nuovo sprint"
  └── sprintItem (ShaSidebarItem)
        template: sprintDM
        label: "§name"
        icon: "shaicons shaicons-git-branch"

// MainPage - onLoad
function* onLoad() {
  yield this.view.sprintDM.load();
}

// sprintDM - onRowComposition
function* sprintDM_onRowComposition(row) {
  // Aggiungi badge con conteggio task
  let item = this.sender;
  item.badge = row.taskCount;
}

// sprintItem - onClick
function* sprintItem_onClick() {
  let sprint = this.sender.row;

  yield view.push(App.SprintDetailView, {
    title: sprint.name,
    sprintId: sprint.id
  });

  if (app.device.isMobile) {
    yield view.toggleMenu(false);
  }
}

// sprintGroup - onAction (click su pulsante +)
function* sprintGroup_onAction() {
  yield view.push(App.NewSprintView, {
    popup: true,
    title: "Nuovo Sprint"
  });
}

Pattern comuni

1. Evidenziazione voce attiva

function* dashboardItem_onClick() {
  // Rimuovi classe attiva da tutte le voci
  this.view.dashboardItem.className = "";
  this.view.projectsItem.className = "";
  this.view.tasksItem.className = "";

  // Aggiungi classe attiva alla voce corrente
  this.view.dashboardItem.className = "bg-accent";

  yield view.push(App.DashboardView, {
    root: true,
    title: "Dashboard"
  });
}

2. Badge con contatori

ShaSidebarItem
  label: "Notifiche"
  icon: "shaicons shaicons-bell"
  badge: "5"  // Badge con numero

function* onLoad() {
  // Aggiorna contatore notifiche
  let count = yield app.api.getUnreadNotifications();
  this.view.notificationsItem.badge = count > 0 ? count.toString() : null;
}

function* onLoad() {
  // Mostra voci solo se utente ha permessi
  let isAdmin = yield app.user.hasRole("admin");

  this.view.adminGroup.visible = isAdmin;
  this.view.usersItem.visible = isAdmin;
  this.view.settingsItem.visible = isAdmin;
}

4. Sottomenu nidificati

ShaSidebarGroup (Projects)
  variant: "collapsible"
  ├── ShaSidebarItem (All Projects)
  │
  └── ShaSidebarGroup (Active)
        variant: "subcollapsible"
        ├── ShaSidebarItem (Project A)
        ├── ShaSidebarItem (Project B)
        └── ShaSidebarItem (Project C)

5. Separatori tra gruppi

ShaSidebarContent
  ├── ShaSidebarGroup (Navigation)
  ├── ShaSeparator
  ├── ShaSidebarGroup (Projects)
  ├── ShaSeparator
  └── ShaSidebarGroup (Admin)

ShaSidebarFooter
  └── ShaRow
        ├── ShaAvatar
        │     src: "§app.user.avatar"
        │     fallback: "§app.user.initials"
        │
        └── ShaCol
              ├── ShaLabel (§app.user.name)
              └── ShaLabel (§app.user.email - muted)

Navigazione:

shaicons shaicons-layout-dashboard – Dashboard
shaicons shaicons-folder – Progetti/Cartelle
shaicons shaicons-file-text – Documenti
shaicons shaicons-check-square – Task/Todo
shaicons shaicons-calendar – Calendario/Eventi

Gestione:

shaicons shaicons-users – Utenti/Team
shaicons shaicons-settings – Impostazioni
shaicons shaicons-database – Dati/Database
shaicons shaicons-package – Moduli/Pacchetti

Azioni:

shaicons shaicons-plus – Aggiungi/Nuovo
shaicons shaicons-search – Cerca
shaicons shaicons-filter – Filtri
shaicons shaicons-download – Download/Esporta
shaicons shaicons-upload – Upload/Importa

Tempo:

shaicons shaicons-clock – Storico/Timeline
shaicons shaicons-git-branch – Sprint/Versioni
shaicons shaicons-trending-up – Statistiche/Report

Documenti:

shaicons shaicons-file – File generico
shaicons shaicons-file-text – Documento testo
shaicons shaicons-image – Immagini
shaicons shaicons-archive – Archivio