# 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)

```svelte
<SidebarModuleSwitcher {collapsed} />
```

### Collapsed (icon-only tile)

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

```svelte
<SidebarModuleSwitcher collapsed={true} />
```

### Selection wiring

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

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

## Props

Full prop table: see [API reference — sidebarmoduleswitcher](/docs/user-guide/api-reference#sidebarmoduleswitcher).

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

## Next steps

- [Component catalog](/docs/user-guide/components)
- [UI stack](/docs/user-guide/ui-stack)
- [API reference](/docs/user-guide/api-reference#sidebarmoduleswitcher)