Sidebar

<SidebarProvider>
  <ParticipantSidebar
    projectName={project.name}
    projectSubtitle={project.subtitle}
    projectMenu={projectMenuItems}
    wishProfileLabel="Wunschprofil 1"
    onWishProfileSelect={openWishProfile}
    participants={participants}
    selectedParticipantId={selectedId}
    onParticipantSelect={setSelectedId}
    mode={mode}
    onModeChange={setMode}
    comparisonIds={comparisonIds}
    onComparisonChange={setComparisonIds}
    footer={<ParticipantSidebarFooter {...footerActions} />}
  />
</SidebarProvider>

projectName / projectSubtitle / projectMenu

Project title, subtitle, and caller-provided dropdown items. The header opens the dropdown; the app supplies item callbacks and navigation.

wishProfileLabel / onWishProfileSelect / wishProfileActive / onWishProfileEdit

Wish-profile text, selection callback, controlled active state, and optional edit action revealed on hover or keyboard focus.

participants

Read-only list of unique { id, name } records.

selectedParticipantId / onParticipantSelect

Controlled single-profile selection.

mode / onModeChange (ProfileModeTabs)

single or compare; controlled tab state passed to the shared ProfileModeTabs.

comparisonIds / onComparisonChange / comparisonLimit

Controlled comparison selection. Limit defaults to 6, matching the Figma counter.

footer / className

Footer composition and additional container styles.

import { SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarTrigger } from '@wafm/ui/components/sidebar'
import { useSidebar } from '@wafm/ui/hooks/use-sidebar'

SidebarProvider: defaultOpen / open / onOpenChange / mobile

Initial or controlled desktop state. Optional mobile override supports a container-sized preview. Native div props including children, className, style, ref are forwarded. Width variables: --sidebar-width (16rem), --sidebar-width-icon (3rem).

Sidebar: collapsible

offcanvas (default), icon, none (desktop). Native div props. All layouts use a Sheet below 768px; desktop sidebar stays in document flow.

SidebarMenuButton: render / nativeButton / isActive / tooltip

Compose an element with the Base UI render prop, mark selection, or label a collapsed icon. Set nativeButton=false for non-button elements. Button props include disabled, onClick, children, className, ref.

SidebarTrigger

Button props, including onClick and aria-label. Toggles desktop or mobile state.

SidebarHeader / SidebarContent / SidebarFooter

Native div props. Content scrolls while header and footer stay in place.

SidebarMenu / SidebarMenuItem

Native ul / li props.

useSidebar()

state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar.

ParticipantSidebarFooter

Required callbacks: onWishProfilesSelect, onServicesSelect, onKnowledgeSelect. Optional activeItem: wish | services | knowledge.

<ProjectSidebar projects={projects} onProjectSelect={setProjectId} footer={footer} />

projects

Records with id, name, and subtitle. The expanded project view uses a clipboard tile and subtitle.

selectedProjectId / onProjectSelect

Selection is controlled; the callback receives a project ID. The sidebar collapses to an icon rail through SidebarProvider.

footer

Shared footer actions anchored to the bottom in both expanded and collapsed states.

import { KnowledgeBaseSidebar } from '@wafm/ui/components/knowledge-base-sidebar'

<SidebarProvider>
  <SidebarProvider open={false} mobile={false} className="w-auto shrink-0 border-r">
    <ProjectSidebar projects={projects} onProjectSelect={selectProject} footer={footer} />
  </SidebarProvider>
  <KnowledgeBaseSidebar
    title="Diagnostik-Wissen"
    groups={groups}
    query={query}
    onQueryChange={setQuery}
    selectedItemId={articleId}
    onItemSelect={selectArticle}
  />
  <main>{articlePreview}</main>
</SidebarProvider>

title

Static header with a knowledge-base icon. No back action or version picker.

groups

Groups with a label and items containing id and label.

query / onQueryChange

Controlled search; matches item and group labels, with an empty-result message.

selectedItemId / onItemSelect

Controlled article selection. The component does not fetch article content.

Composition

Secondary navigation, 256px wide, composed beside the 48px collapsed main sidebar. The app supplies the main sidebar separately. The knowledge sidebar uses its own provider for the mobile Sheet and does not own routing.