{
  "name": "WorkspaceNavIcon",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WorkspaceNavIcon.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": "A single item in an `<AppShell>` / `<WorkspaceShell>` sidebar — the 36×36 nav\nbutton that collapses to an icon-only band and expands to icon + label + count.\nCollapsed vs expanded is driven entirely by the `<AppShell sidebarMode>`\nancestor; this leaf is purely declarative.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "WorkspaceNavIcon",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WorkspaceNavIconProps",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { WorkspaceNavIcon } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "badge",
    "page",
    "ws-nav-icon",
    "ws-nav-icon-badge",
    "ws-nav-icon-count",
    "ws-nav-icon-label"
  ],
  "examples": {
    "react": "<WorkspaceNavIcon icon={<DashboardIcon />} label=\"Dashboard\" href=\"/app\" active />\n<WorkspaceNavIcon icon={<BellIcon />} label=\"Notifications\" onClick={open} badge={3} />",
    "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": ".badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  white-space: nowrap;\n  padding: 3px 8px;\n  border-radius: var(--r-pill);\n  font: 500 11.5px/1.2 var(--f-body);\n  background: var(--hair-soft);\n  color: var(--fg);\n  border: 1px solid transparent;\n}\n\n.page {\n  max-width: 1160px;\n  margin: 0 auto;\n  padding: 0 var(--s-7);\n}\n\n.ws-nav-icon {\n  position: relative;\n  width: 36px; height: 36px; border-radius: 8px;\n  display: inline-flex; align-items: center; justify-content: center;\n  gap: var(--s-3);\n  background: transparent; border: 0; cursor: pointer;\n  color: var(--fg-soft); text-align: left; text-decoration: none;\n  flex-shrink: 0;\n  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), width var(--dur-3) var(--ease);\n}\n\n.ws-nav-icon-badge {\n  position: absolute;\n  top: 5px;\n  left: 22px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 8px;\n  height: 8px;\n  padding: 0 3px;\n  font: 700 9px/1 var(--f-mono);\n  color: var(--on-accent);\n  background: var(--accent);\n  border-radius: var(--r-pill);\n  box-shadow: 0 0 0 2px var(--bg-paper);\n}\n\n.ws-nav-icon-count {\n  display: none;\n  font: 600 10px/1 var(--f-mono); color: var(--fg-faint);\n  background: var(--bg); padding: 3px 6px; border-radius: 4px;\n}\n\n.ws-nav-icon-label { display: none; font: 500 13px/1 var(--f-body); white-space: nowrap; flex: 1; }"
  }
}