Build Your WorkspaceViews
Sidebar
Configure the admin sidebar — sections, collection items, global items, and external links.
The sidebar controls admin navigation. Configure it with sidebar.ts — define sections and items.
Basic Setup
sidebar.ts
import { sidebar } from "#questpie/factories";
export default sidebar({
sections: [
{ id: "overview", title: { en: "Overview" } },
{ id: "content", title: { en: "Content" } },
],
items: [
{
sectionId: "overview",
type: "link",
label: { en: "Dashboard" },
href: "/admin",
icon: { type: "icon", props: { name: "ph:house" } },
},
{
sectionId: "content",
type: "collection",
collection: "posts",
},
],
});Sections
Sections group sidebar items:
sections: [
{ id: "overview", title: { en: "Overview", sk: "Prehľad" } },
{ id: "operations", title: { en: "Operations", sk: "Prevádzka" } },
{ id: "content", title: { en: "Content", sk: "Obsah" } },
{ id: "team", title: { en: "Team", sk: "Tím" } },
];Item Types
Collection
Links to a collection list view. Label and icon are read from the collection's .admin() config:
{ sectionId: "content", type: "collection", collection: "posts" }Global
Links to a global edit form:
{ sectionId: "overview", type: "global", global: "siteSettings" }Link
Custom link with icon:
{
sectionId: "external",
type: "link",
label: { en: "Open Website" },
href: "/",
external: true,
icon: { type: "icon", props: { name: "ph:arrow-square-out" } },
}Real-World Example
From the barbershop:
sidebar.ts
import { sidebar } from "#questpie/factories";
export default sidebar({
sections: [
{ id: "overview", title: { en: "Overview" } },
{ id: "operations", title: { en: "Operations" } },
{ id: "content", title: { en: "Content" } },
{ id: "team", title: { en: "Team" } },
{ id: "external", title: { en: "External" } },
{ id: "administration", title: { en: "Administration" } },
],
items: [
// Overview
{
sectionId: "overview",
type: "link",
label: { en: "Dashboard" },
href: "/admin",
icon: { type: "icon", props: { name: "ph:house" } },
},
{ sectionId: "overview", type: "global", global: "siteSettings" },
// Operations
{ sectionId: "operations", type: "collection", collection: "appointments" },
{ sectionId: "operations", type: "collection", collection: "reviews" },
// Content
{ sectionId: "content", type: "collection", collection: "pages" },
{ sectionId: "content", type: "collection", collection: "services" },
// Team
{ sectionId: "team", type: "collection", collection: "barbers" },
// External
{
sectionId: "external",
type: "link",
label: { en: "Open Website" },
href: "/",
external: true,
icon: { type: "icon", props: { name: "ph:arrow-square-out" } },
},
],
});Module Contributions
Modules can contribute sidebar items. The adminModule adds an "Administration" section with user management. The auditModule adds an audit log item to that section. Your project-level sidebar merges with these contributions.