Sidebar e Menu

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

Componenti Sidebar #

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

Menu statico #

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);
  }
}

Menu dinamico con DataMap #

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;
}

3. Menu con permessi #

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)

6. Footer con profilo utente #

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

Icone menu comuni #

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