# Sidebar

Layout primitives for the catalog-style left rail every Rahhal mini-app uses: a glassy floating column with a sticky filter / brand area, a scrolling body, and collapsible sections. Layout-only — apps supply data, routing, and filtering.

[View examples](https://marsam.rahhal.app/components/sidebar) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui (AppSidebar, AppSidebarHeader, AppSidebarBody, AppSidebarSection, AppSidebarItem, AppSidebarFooter)`

**Category:** `nav`

## Anatomy

| part | role |
| --- | --- |
| AppSidebar | outer pinned `<aside>` with the glassy capsule chrome; pass `pinned={false}` when rendering inside a `<Sheet>` |
| AppSidebarHeader | sticky top section — typical content: a `<SearchBar>` plus a meta / actions row |
| AppSidebarBody | scrolling content area; wraps a Radix `<ScrollArea>` so the scrollbar matches the platform |
| AppSidebarSection | collapsible group of items — title + optional icon + count pill + chevron |
| AppSidebarItem | one row, supports `asChild` so a router `<NavLink>` can drive `active` |
| AppSidebarItemButton | same visuals as `AppSidebarItem` but with button semantics (e.g. for filters / toggles) |
| AppSidebarFooter | optional footer below the scrolling body |

## Mobile

Drop the same children inside a `<Sheet>` and add a hamburger `<Button>` to `<AppHeader>`. The chrome adapts because positioning is left to the parent (sticky on desktop via `pinned`, full-height inside the sheet on mobile).

## Notes

- The primitives are layout-only by design. Apps supply the data, the router (`react-router`'s `<NavLink>`, `next/link`, …), and the filtering / collapse state.
- All RTL-aware: chevrons rotate by writing direction, padding uses logical `ps-*` / `pe-*` utilities.
- Persist collapse state per app in `localStorage` if you want it to survive reloads (the catalog does).