{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar",
  "type": "registry:ui",
  "title": "Sidebar (MIAN)",
  "description": "Vertical application navigation with groups, icons and badges.",
  "categories": [
    "navigation",
    "sidebar",
    "side nav",
    "menu",
    "navigation"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/sidebar.css",
      "type": "registry:file",
      "target": "mian/components/sidebar.css",
      "content": ".mn-sidebar { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; font-size: var(--mn-text-sm); }\n.mn-sidebar-group { display: flex; flex-direction: column; gap: 1px; }\n.mn-sidebar-heading { padding: 0 .65rem .35rem; font-size: .75rem; font-weight: 600; color: var(--mn-muted); letter-spacing: .01em; }\n.mn-sidebar-link {\n  display: flex; align-items: center; gap: .6rem;\n  min-height: 2.1rem; padding: .35rem .65rem;\n  border-radius: var(--mn-radius-field);\n  color: var(--mn-muted); text-decoration: none; font-weight: 450;\n}\n.mn-sidebar-link:hover { color: var(--mn-fg); background: var(--mn-hover); }\n.mn-sidebar-link[aria-current=\"page\"] { color: var(--mn-fg); background: var(--mn-active); font-weight: 550; }\n.mn-sidebar-link:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); }\n.mn-sidebar-link svg { width: 1rem; height: 1rem; flex: none; }\n.mn-sidebar-link .mn-badge { margin-inline-start: auto; }"
    },
    {
      "path": "mian/examples/sidebar.html",
      "type": "registry:file",
      "target": "mian/examples/sidebar.html",
      "content": "<!-- App sidebar -->\n<nav class=\"mn-sidebar\" aria-label=\"App\" style=\"max-width:15rem\">\n  <div class=\"mn-sidebar-group\">\n    <a class=\"mn-sidebar-link\" href=\"#sidebar\" aria-current=\"page\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 11 12 3l9 8\"/><path d=\"M5 10v10h14V10\"/></svg> Dashboard</a>\n    <a class=\"mn-sidebar-link\" href=\"#sidebar\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 13h5l1.5 2h5L16 13h5\"/><path d=\"M5 5h14l2 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Z\"/></svg> Inbox <span class=\"mn-badge mn-badge-sm\">4</span></a>\n    <a class=\"mn-sidebar-link\" href=\"#sidebar\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 20V10M10 20V4M16 20v-7M22 20H2\"/></svg> Reports</a>\n  </div>\n  <div class=\"mn-sidebar-group\">\n    <div class=\"mn-sidebar-heading\">Workspace</div>\n    <a class=\"mn-sidebar-link\" href=\"#sidebar\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"8\" r=\"3.5\"/><path d=\"M2.5 20a6.5 6.5 0 0 1 13 0\"/><path d=\"M16 4.5a3.5 3.5 0 0 1 0 7M18 13.5a6.5 6.5 0 0 1 3.5 6.5\"/></svg> Team</a>\n    <a class=\"mn-sidebar-link\" href=\"#sidebar\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z\"/></svg> Settings</a>\n  </div>\n</nav>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/sidebar",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-sidebar",
        "mn-sidebar-group · mn-sidebar-heading · mn-sidebar-link"
      ],
      "accessibility": [
        "Give the <nav> an aria-label. Group headings are text; if they collapse, use <details>."
      ],
      "intents": [
        "app sidebar",
        "side navigation",
        "admin menu",
        "docs navigation"
      ]
    }
  }
}
