{
  "name": "WorkspaceNav",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WorkspaceNav.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "workspace-nav",
  "elName": "WorkspaceNav",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#workspace-nav",
  "hasLiveDemo": false,
  "description": "The grouped navigation column of a `<WorkspaceShell>` rail — a `<nav>` that\nstacks `<WorkspaceNavSection>` labels and `<WorkspaceNavIcon>` items. Section\nlabels hide in the collapsed rail (pure CSS off `.app-shell[data-sidebar-mode]`),\nso the nav reads as a clean icon band when collapsed and a labelled,\nsectioned list when expanded.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "WorkspaceNav",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WorkspaceNavProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "WorkspaceNavSection",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "WorkspaceNavSectionProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { WorkspaceNav } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "children",
      "optional": false,
      "type": "HTMLAttributes<HTMLElement>[\"children\"]",
      "doc": "`<WorkspaceNavSection>` labels + `<WorkspaceNavIcon>` items."
    }
  ],
  "classesUsed": [
    "ws-nav",
    "ws-nav-section"
  ],
  "examples": {
    "react": "<WorkspaceNav>\n  <WorkspaceNavSection label=\"Live\" />\n  <WorkspaceNavIcon icon={<DashboardIcon />} label=\"Dashboard\" active />\n  <WorkspaceNavIcon icon={<SessionsIcon />} label=\"Sessions\" count={412} />\n</WorkspaceNav>",
    "html": "<nav class=\"ws-nav\" aria-label=\"Workspace\"><p class=\"ws-nav-section\">Live</p><button type=\"button\" class=\"ws-nav-icon is-active\" data-tooltip=\"Dashboard\" aria-label=\"Dashboard\" aria-current=\"page\"><svg viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"><rect x=\"2.5\" y=\"2.5\" width=\"5.5\" height=\"5.5\" rx=\"1\"/><rect x=\"10\" y=\"2.5\" width=\"5.5\" height=\"5.5\" rx=\"1\"/><rect x=\"2.5\" y=\"10\" width=\"5.5\" height=\"5.5\" rx=\"1\"/><rect x=\"10\" y=\"10\" width=\"5.5\" height=\"5.5\" rx=\"1\"/></svg><span class=\"ws-nav-icon-label\">Dashboard</span></button><button type=\"button\" class=\"ws-nav-icon\" data-tooltip=\"Sessions\" aria-label=\"Sessions\"><svg viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\"><path d=\"M3 4.5 H15 V12 H8 L5 14.5 V12 H3 Z\"/><line x1=\"6\" y1=\"8\" x2=\"12\" y2=\"8\"/><line x1=\"6\" y1=\"10\" x2=\"10\" y2=\"10\"/></svg><span class=\"ws-nav-icon-label\">Sessions</span><span class=\"ws-nav-icon-count\">412</span></button></nav>",
    "css": ".ws-nav {\n  display: flex; flex-direction: column; gap: 2px;\n  width: 100%; margin-top: var(--s-3);\n}\n\n.ws-nav-section {\n  display: none;\n  font: 600 10px/1 var(--f-mono); text-transform: uppercase;\n  letter-spacing: 0.08em; color: var(--fg-faint);\n  padding: 0 var(--s-2); margin: var(--s-3) 0 var(--s-2);\n}"
  }
}