Workspace sidebar

A workspace switcher, search, inbox, and Favorites and Projects that fold away; each project opens to its views.

$ pnpm dlx shadcn@latest add @dashral/workspace-sidebar

When to use

A project tool's sidebar: a workspace switcher, search, inbox, favorites, and projects that open to their views.
Issue trackers, docs and planning tools organised by workspace and project.

When not to use

Single-team dashboards without projects: Dashboard sidebar.
Settings pages: Settings sidebar.

Usage

Workspace sidebar with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { WorkspaceSidebar } from "@/components/dashral/blocks/workspace-sidebar"
2
3<WorkspaceSidebar
4  workspaces={workspaces}
5  workspace={workspaceId}
6  onWorkspaceChange={setWorkspaceId}
7  projects={projects}
8  favorites={favorites}
9  inbox={unreadCount}
10  current={page}
11  onNavigate={(page) => router.push(`/${page}`)}
12  onAddProject={(project) => api.projects.create(project)}
13/>

API reference

WorkspaceSidebar

A project tool's sidebar, like Linear's or Notion's: the workspace switcher and new-item button, search, your inbox and issues, then Favorites and Projects that fold away. Each project opens to its views, and + adds one. Replace your workspaces, projects, views and favorites through props. Pages are ids: "inbox", "mine" and "<project>/<view>"; the one you're on is controllable, with onNavigate. + calls onAddProject, which may return the stored project.

Prop	Type	Default
`workspaces`	`Workspace[]`	`sample`
`workspace`	`string` The workspace you're in, by id (the sidebar keeps it without it).	—
`onWorkspaceChange`	`(id: string) => void`	—
`projects`	`WorkspaceProject[]`	`sample`
`views`	`WorkspaceView[]` The views every project opens to.	`sample`
`favorites`	`WorkspaceFavorite[]`	`sample`
`inbox`	`number` The count beside Inbox; 0 hides it.	`4`
`current`	`string`	—
`onNavigate`	`(page: string) => void`	—
`onAddProject`	`(project: WorkspaceProject) => WorkspaceProject \| void \| Promise<WorkspaceProject \| void>` Called with the new project; return the one you stored (its real id) or throw to take it back.	—
`onAction`	`(action: WorkspaceAction) => void`	—

type Workspace

A workspace in the switcher; tile is the classes of its letter tile.

Prop	Type	Default
`id`	`string`	—
`name`	`string`	—
`initials`	`string`	—
`tile`	`string`	—

type WorkspaceProject

A project; color is the class of its square.

Prop	Type	Default
`id`	`string`	—
`name`	`string`	—
`color`	`string`	—

type WorkspaceView

Prop	Type	Default
`id`	`string`	—
`label`	`string`	—
`icon`	`React.ReactNode`	—

type WorkspaceFavorite

A starred page: to is where it goes, a page id like the sidebar's own ("q4/board").

Prop	Type	Default
`to`	`string`	—
`label`	`string`	—

type WorkspaceAction

The buttons that don't navigate.

= "new-issue" | "create-workspace" | "invite" | "help"