@pzeta/vue-components
Navigation

NavigationMenu

Menu di navigazione strutturato per sidebar MFE. Organizza le voci per moduli e gruppi con indicatore active automatico via Vue Router, modalità collapsed e slot per item personalizzati.

Import

import { NavigationMenu } from '@pzeta/vue-components'
import type { MenuStructure, MenuGroup } from '@pzeta/vue-components'
import type { MenuItem } from '@pzeta/vue-components'

Struttura dati

Il NavigationMenu riceve una struttura gerarchica che rappresenta uno o più moduli MFE:

interface MenuStructure {
  manifest: MFEManifest   // { name, version, icon?, routes? }
  menuGroups: MenuGroup[]
}

interface MenuGroup {
  category: string        // nome della categoria/gruppo
  icon?: string
  items: MenuItem[]       // voci del gruppo (usano MenuItem standard)
}

Esempio Base

Props

PropTipoDefaultDescrizione
menuStructureMenuStructure[]— (required)Struttura completa del menu da renderizzare
collapsedbooleanfalseStato collapsed della sidebar: nasconde label e badge, mostra solo icone
navClassstringundefinedClasse CSS aggiuntiva per l'elemento <nav>

Emits

EventoPayloadDescrizione
navigatepath: stringEmesso al click su un elemento; passa il path della route

Slot

SlotScopeDescrizione
menu-item{ item: { path, label, icon?, order?, badge? }; active: boolean }Template personalizzato per ogni voce del menu. active è calcolato automaticamente da Vue Router

Esempi

Modalità collapsed (sidebar compressa)

Con template voce personalizzato

Menu multi-modulo

<script setup lang="ts">
import type { MenuStructure } from '@pzeta/vue-components'

const menuStructure: MenuStructure[] = [
  {
    manifest: { name: 'CRM', version: '1.0.0', icon: 'users' },
    menuGroups: [
      {
        category: 'Clienti',
        items: [
          { label: 'Anagrafiche', icon: 'address-book', to: '/crm/anagrafiche' },
          { label: 'Opportunità', icon: 'chart-line', to: '/crm/opportunita' },
        ],
      },
    ],
  },
  {
    manifest: { name: 'Fatturazione', version: '1.0.0', icon: 'file-invoice' },
    menuGroups: [
      {
        category: 'Documenti',
        items: [
          { label: 'Fatture', icon: 'file-invoice', to: '/fatturazione/fatture' },
          { label: 'Note credito', icon: 'file-minus', to: '/fatturazione/note-credito' },
        ],
      },
    ],
  },
]
</script>

Comportamento

  • L'indicatore active viene calcolato confrontando route.path con il campo to di ogni voce.
  • Una voce è attiva se route.path === path oppure route.path.startsWith(path + '/').
  • In modalità collapsed, l'intestazione del modulo, le categorie e i label delle voci vengono nascosti; rimangono solo le icone. Il title del link viene impostato al label per accessibilità.
  • I badge supportano sia valori statici (stringa) sia funzioni reattive () => string | number.

Accessibilità

  • Usa <nav> come contenitore principale.
  • Le voci sono <RouterLink> con class hs-nav-menu__link--active / hs-nav-menu__link--inactive.
  • In modalità collapsed le icone hanno il title corrispondente al label.

TypeScript

import type {
  NavigationMenuProps,
  NavigationMenuEmits,
  NavigationMenuSlots,
  MenuStructure,
  MenuGroup,
  MFEManifest,
} from '@pzeta/vue-components'

MobileNav

Navigazione mobile con hamburger menu animato e overlay. Supporta v-model per controllo dello stato aperto/chiuso, posizione top o left, overlay scuro e slot per header, footer e item personalizzati.

PanelMenu

Menu accordion multi-livello con pannelli espandibili. Supporta controllo esterno tramite expandedKeys, espansione multipla simultanea, badge e slot per personalizzazione di icone e voci.