NODEDC_LAUNCHER/dc-ui-guideline/components/admin-side-nav.json

46 lines
1.5 KiB
JSON

{
"id": "admin-side-nav",
"name": "AdminSideNav",
"kind": "component",
"status": "draft-stable",
"summary": "Left admin panel navigation with full-width rounded rows, circular icons, client selector, close button, and role footer.",
"sourceRefs": [
{
"project": "nodedc_launcher",
"file": "src/widgets/admin-overlay/AdminOverlay.tsx",
"classes": ["admin-panel-nav", "admin-panel-client-select", "admin-panel-nav-item", "admin-panel-role"]
},
{
"project": "nodedc_launcher",
"file": "src/styles/globals.css",
"classes": ["admin-panel-nav", "admin-panel-nav-item", "admin-panel-nav-item__icon", "admin-panel-close"]
}
],
"anatomy": [
"panel shell",
"head: eyebrow, title, close action",
"client selector row",
"nav list",
"role footer"
],
"geometry": {
"width": "clamp(20.75rem, 19.5vw, 22rem)",
"panelPadding": "1.1rem",
"rowHeight": "controlRing + 2 * controlInset",
"iconSize": "controlRing",
"edgeInset": "5px"
},
"states": {
"inactive": "muted text, darker icon circle, partial opacity",
"active": "white icon circle and brighter row surface",
"hover": "slightly brighter row surface"
},
"rules": [
"Rows stretch to panel edges by counteracting panel padding.",
"Active nav icon is white, not green.",
"Close button is anchored at panel radius with 5px inset.",
"Client selector uses the same row/circle geometry as nav rows."
]
}