Copy page

Components

SidebarOrgSwitcher

src/lib/components/sidebar/SidebarOrgSwitcher.svelte

Purpose

A large sidebar menu button in the sidebar header that shows the currently selected organization (avatar or ImageOff fallback + display name + subtitle) and opens a DropdownMenu of all active organizations. On mount it fetches active orgs from /api/v1/system/organizations/active and defaults to the first one. Selecting an item sets selectedOrgId to the org's idp_code. The org shape is { uuid, idp_code, idp_name, display_name, avatar } (snake_case, per the data-model convention). When collapsed, only the avatar tile shows.

Origin

Custom — Primebrick-written. Uses shadcn-svelte™ Sidebar, DropdownMenu, and Avatar, apiFetch, and @lucide/svelte ImageOff / ChevronsUpDown.

Usage

Default (mounted in AppSidebar header)

Code
<SidebarOrgSwitcher {collapsed} />

Collapsed (avatar-only tile)

When collapsed is true, only the 8x8 avatar tile renders; the label, subtitle, and chevron hide.

Code
<SidebarOrgSwitcher collapsed={true} />

Org data shape

The component consumes the raw API response shape directly (no DTO renaming).

Code
type ActiveOrg = {
  uuid: string;
  idp_code: string;
  idp_name: string;
  display_name: string;
  avatar: string | null;
};

Props

Full prop table: see API reference — sidebarorgswitcher.

Key props: collapsed: boolean (whether the sidebar is in icon-only mode).

Next steps

• Component catalog
• UI stack
• API reference