Copy page

Components

SidebarModuleSwitcher

src/lib/components/sidebar/SidebarModuleSwitcher.svelte

Purpose

A large sidebar menu button that shows the currently selected Primebrick module (icon via DynamicIcon + name) and opens a DropdownMenu of all available modules from shellNav.modules. Selecting an item calls shellNav.selectModule(id), which swaps the module navigation rendered below. When the sidebar is collapsed, only the module icon tile is shown and the label hides. The dropdown anchors to the trigger width and opens to the right.

Origin

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

Usage

Default (mounted in AppSidebar content)

Code
<SidebarModuleSwitcher {collapsed} />

Collapsed (icon-only tile)

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

Code
<SidebarModuleSwitcher collapsed={true} />

Selection wiring

Selecting a module calls shellNav.selectModule, which updates selectedModuleId and reloads that module's nav links.

Code
<DropdownMenu.Item onSelect={() => void shellNav.selectModule(m.id)}>
  {m.name}
</DropdownMenu.Item>

Props

Full prop table: see API reference — sidebarmoduleswitcher.

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

Next steps

• Component catalog
• UI stack
• API reference