Overlays

Sidebar

Barra laterale fissa e collassabile per la navigazione principale dell'applicazione. Progettata per il Portal Shell dei microfrontend, supporta auto-collapse responsive, brand, e slot per header/content/footer.

Nota: Sidebar vs Drawer

Sidebar e Drawer sono componenti distinti con scopi diversi:

	Sidebar	Drawer
Comportamento	Fissa nel layout, collassabile	Overlay con animazione slide
v-model	`v-model:collapsed` (stato collapse)	`v-model` (visibile/nascosto)
Uso tipico	Navigazione principale fissa	Menu temporanei, pannelli laterali
Portal Shell	Si — componente dedicato MFE	No

Import

import { Sidebar } from '@pzeta/vue-components'
// oppure con plugin selettivo:
import { OverlaysPlugin } from '@pzeta/vue-components'
app.use(OverlaysPlugin)

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`collapsed`	`boolean`	`false`	Stato collapsed della sidebar (v-model:collapsed)
`width`	`string`	`'w-64'`	Larghezza in modalità espansa (classe Tailwind)
`collapsedWidth`	`string`	`'w-16'`	Larghezza in modalità collapsed (classe Tailwind)
`brandName`	`string`	`'Application'`	Nome/brand mostrato nell'header espanso
`brandIcon`	`string`	`'building'`	Icona del brand (PrimeIcons senza prefisso `pi-`)
`rounded`	`boolean`	`false`	Arrotonda i bordi e aggiunge margine
`autoCollapse`	`'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| false`	`false`	Breakpoint per auto-expand: sopra questo breakpoint la sidebar si espande automaticamente
`containerClass`	`string`	—	Classe CSS aggiuntiva per il contenitore principale
`headerClass`	`string`	—	Classe CSS aggiuntiva per l'header
`contentClass`	`string`	—	Classe CSS aggiuntiva per l'area contenuto
`beforeContentClass`	`string`	—	Classe CSS aggiuntiva per l'area before-content
`footerClass`	`string`	—	Classe CSS aggiuntiva per il footer

Emits

Evento	Payload	Descrizione
`update:collapsed`	`boolean`	Aggiornamento stato collapsed per v-model:collapsed

Slot

Slot	Scope	Descrizione
`default`	—	Contenuto principale (navigazione, menu)
`header`	—	Sostituzione completa dell'area brand/logo
`before-content`	—	Area prima del contenuto (es. barra di ricerca, filtri)
`footer`	—	Area footer della sidebar (es. profilo utente, logout)

Esempi

Auto-collapse responsive

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

const collapsed = ref(false)
</script>

<template>
  <!-- Si espande automaticamente sopra lg (1024px), si collassa sotto -->
  <Sidebar
    v-model:collapsed="collapsed"
    auto-collapse="lg"
    brand-name="Portal"
  >
    <slot />
  </Sidebar>
</template>

Con slot before-content (search) e footer (utente)

Pulsante toggle esterno

Accessibilità

Renderizzato come elemento <aside> (landmark semantico per screen reader)
Classi Tailwind gestite dinamicamente per la transizione larghezza
In modalità collapsed il testo viene nascosto mentre le icone rimangono visibili
Il breakpoint autoCollapse usa window.matchMedia per gestire la transizione responsive senza FOUC

TypeScript

import type { SidebarProps, SidebarSlots } from '@pzeta/vue-components'

Popover

Overlay flottante ancorato a un elemento trigger. Supporta trigger click/hover/focus/manual, posizionamento automatico con correzione viewport, freccia, e varianti visive.

Overlays

Componenti overlay — Dialog, ConfirmDialog, ConfirmPopup, Drawer, Sidebar, Popover.