AppSidebar

When to use

AppSidebar is the Platform's own sidebar component: a persistent, collapsible nav rail with a brand header, nav groups, a user card pinned to the bottom, and a collapse button that toggles to icon-only mode. It uses the --sidebar-* token group and integrates with react-i18next for labels.

Use it when you need the Platform app shell. For simpler navigation surfaces (command menus, menubars, or temporary sheets), use the corresponding shadcn/ui component instead.

Install

pnpm add @plainconceptsplatform/ui-components

Usage

import {
  AppSidebarProvider,
  AppSidebar,
  AppSidebarHeader,
  AppSidebarBrand,
  AppSidebarContent,
  AppSidebarNav,
  AppSidebarNavGroup,
  AppSidebarNavItem,
  AppSidebarSeparator,
  AppSidebarFooter,
  AppSidebarUserCard,
  AppSidebarCollapseButton,
} from "@plainconceptsplatform/ui-components/app-sidebar";

Components

• AppSidebarProvider - Context provider that manages collapsed state and persists it to localStorage. Renders no element of its own, so it takes no className: wrap it in your own layout element. Must wrap the sidebar.
• AppSidebar - The <aside> container. Handles width transition and collapse.
• AppSidebarHeader - Top section for brand/logo.
• AppSidebarBrand - Brand text + logo combo.
• AppSidebarActions - Right side of the header, for icon buttons.
• AppSidebarIconButton - A single icon button. Takes icon and a label used as the accessible name.
• AppSidebarContent - Middle scrollable section for nav.
• AppSidebarNav / AppSidebarNavGroup / AppSidebarNavItem - Nav list with groups and items (NavLink-compatible).
• AppSidebarSeparator - Horizontal divider between sections.
• AppSidebarSpacer - Pushes everything after it to the bottom.
• AppSidebarFooter - Bottom section, pinned.
• AppSidebarUserCard - Avatar + name + dropdown menu. Takes name, avatar and optional subtitle and dropdown.
• AppSidebarThemeToggle / AppSidebarUserMenuItem / AppSidebarUserMenuDivider - Pieces for the user card's dropdown.
• AppSidebarCollapseButton - Toggle button that collapses to icon-only (64px) mode. expandIcon and collapseIcon are required, so the icon set stays the consuming app's choice.

Marking the active item

AppSidebarNavItem takes isActive, not active. The wrong name is not a type error in every setup and produces a sidebar where nothing is ever highlighted.

By default the icon follows the item's state, muted when inactive and the accent colour when active. Pass iconClassName when the icon carries its own meaning (a colour shared by every AI feature, say) and it keeps that colour in both states.

<AppSidebarNavItem
  to="/ai/team-usage"
  label="Team AI Usage"
  icon={Sparkles}
  iconClassName="text-violet-500"
  isActive={pathname === "/ai/team-usage"}
/>