Support navigation

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

Every Support 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-support

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

Dependencies

Registry

Source

lib/dashboards/support/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: "/support",
  inbox: "/support/inbox",
  help: "/support/help",
  changelog: "/support/changelog",
} as const

export const HOME = ROUTES.overview

/**
 * The Support 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 Support", initial: "N", href: HOME },
  groups: [
    {
      label: "Support",
      items: [
        { title: "Overview", href: ROUTES.overview, icon: "layout-dashboard" },
        { title: "Inbox", href: ROUTES.inbox, icon: "inbox" },
        { title: "Help centre", href: ROUTES.help, icon: "life-buoy" },
        { title: "Changelog", href: ROUTES.changelog, icon: "file-text" },
      ],
    },
  ],
  // Settings alone: `/support` is this dashboard's own overview, and a footer
  // link to it would tie with the tab — findNavItem resolves a tie to the
  // later item, so the footer would read as current and the tab never would.
  footer: [{ title: "Settings", href: "/settings", icon: "settings" }],
}