hb-sidebar-cards-navigator — sidebar cards navigator

Category: layout
Tags: layout, navigation

What it does

Stacked sidebar navigator: picks an active panel from JSON panels (main or first without parent), shows hb-navbar with back when parentPanelId exists, then cards of rows rendered as hb-sidenav-button. Emits itemClick with panel, card and row context; rows can switch panels via switchToPanelId.

Custom element

hb-sidebar-cards-navigator

Attributes (snake_case; use string values in HTML)

• id, style (optional): strings.
• panels (optional): JSON string — Panel[] (id, optional title, parentPanelId, cards with rows of CardRow: key, text, optional bootstrapIcon, switchToPanelId, type, badge, etc.).

Events

• itemClick: detail matches selected row context (panel, card, row, id) as built in component.wc.svelte — see types CardRowSelected in webcomponent.type.d.ts.

Usage notes

• Slots: skelcontent.
• CSS parts: testpart.
• Type file lists a nested event.itemClick shape; the element dispatches the event name itemClick at the top level.

Minimal HTML example

<hb-sidebar-cards-navigator
  panels='[{"id":"1","title":"Home","cards":[{"id":"c1","rows":[{"key":"a","text":"Item","bootstrapIcon":"house-door"}]}]}]'
></hb-sidebar-cards-navigator>