`gds-sidenav` — Sidenav

Documentație online (fără download) — citește aici pe Wiki.
Pachete npm: Package Registry · contracte în @gstack/gds-core.

BlockKind: —
Secțiune paletă: STRUCTURE · Class: GdsSidenavComponent · Pachet: @gstack/gds-angular
Data contract: SidenavData din @gstack/gds-core

Ce reprezintă

Navigare laterală a aplicației: brand (product name/abbr), grupuri de itemi, utilizator. Pe ecrane înguste devine hamburger/drawer.

Inputs

Nume	Tip	Default	Descriere
data	SidenavData	required	product, groups[], user

Outputs

Nume	Tip	Default	Descriere
itemActivate	{ item: SidenavItem; target?: NavTarget }	—	Click pe un item (opțional cu link)

Cum se folosește

import { GdsSidenavComponent } from '@gstack/gds-angular';

@Component({
  standalone: true,
  imports: [GdsSidenavComponent],
  template: `<gds-sidenav [data]="nav" (itemActivate)="onNav($event)" />`,
})
export class AppShell {
  nav = {
    product: { name: 'GPay', abbr: 'GP' },
    groups: [{ label: 'Meniu', items: [
      { label: 'Plăți', active: true },
      { label: 'Rapoarte', target: { pageId: 'reports' } },
    ]}],
    user: { name: 'Ana Pop', role: 'Operator' },
  };
  onNav(e: unknown) { console.log(e); }
}

Note pentru agenți (Cursor)

• Nu e BlockKind — structură globală pe proiect.
• NavTarget: pageId (pagină internă) sau url (extern).
• Nu inventa props în afara tipului SidenavData.
• Stiluri: doar tokens GDS / --gds-accent; fără hex hardcodat.

Sursă

• projects/gds-angular/src/lib/components/gds-sidenav.component.ts
• projects/gds-core/src/lib/blocks.ts