Projects navigation

The Projects dashboard's sidebar as plain data: its brand, its 12 routes and the shared footer.

Every Projects page imports NAV and ROUTES from here and passes activeHref={ROUTES.<page>}; install it alone to put the dashboard's sidebar on a page of your own. ROUTES is the one place the dashboard's routes are spelled, HOME is the overview's.

Install

npx shadcn@latest add @vibra/nav-projects

Needs the @vibra registry in your components.json — set it up once.

Dependencies

Registry

Source

lib/dashboards/projects/nav.ts

import { type NavConfig } from "@/lib/nav-config"

/** Every route of this dashboard, by page — what a page passes as activeHref. */
export const ROUTES = {
  overview: "/projects",
  tasks: "/projects/tasks",
  timeline: "/projects/timeline",
  todo: "/projects/todo",
  notes: "/projects/notes",
  calendar: "/projects/calendar",
  workflows: "/projects/workflows",
  chat: "/projects/chat",
  mail: "/projects/mail",
  social: "/projects/social",
  files: "/projects/files",
  filesBrowser: "/projects/files/browse",
} as const

export const HOME = ROUTES.overview

/**
 * The Projects dashboard's navigation, as plain data. AppShell resolves the
 * icon names and works out which item is current from the pathname; every
 * page of the dashboard passes this NAV and its own ROUTES entry. The same
 * pages are listed in ./manifest.ts, which the registry reads and this file
 * must not import — the manifest does not ship, and this file does.
 */
export const NAV: NavConfig = {
  brand: { name: "Northwind Work", initial: "N", href: HOME },
  groups: [
    {
      label: "Work",
      items: [
        { title: "Overview", href: ROUTES.overview, icon: "layout-dashboard" },
        { title: "Tasks", href: ROUTES.tasks, icon: "list" },
        { title: "Timeline", href: ROUTES.timeline, icon: "chart-line" },
        { title: "To-do", href: ROUTES.todo, icon: "list-todo" },
        { title: "Notes", href: ROUTES.notes, icon: "sticky-note" },
        { title: "Calendar", href: ROUTES.calendar, icon: "calendar" },
        { title: "Workflows", href: ROUTES.workflows, icon: "workflow" },
      ],
    },
    {
      label: "Team",
      items: [
        { title: "Chat", href: ROUTES.chat, icon: "message-circle" },
        { title: "Mail", href: ROUTES.mail, icon: "mail" },
        { title: "Social", href: ROUTES.social, icon: "message-square-heart" },
        {
          title: "Files",
          href: ROUTES.files,
          icon: "folder",
          items: [
            { title: "Overview", href: ROUTES.files },
            { title: "Browse", href: ROUTES.filesBrowser },
          ],
        },
      ],
    },
  ],
  footer: [
    { title: "Settings", href: "/settings", icon: "settings" },
    { title: "Support", href: "/support", icon: "life-buoy" },
  ],
}