mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-05-04 02:34:52 +00:00
Richard Ward
771 lines
19 KiB
JSON
771 lines
19 KiB
JSON
[
|
|
{
|
|
"id": "sidebar",
|
|
"type": "Box",
|
|
"props": {
|
|
"component": "nav",
|
|
"className": "sidebar",
|
|
"sx": {
|
|
"display": "flex",
|
|
"flexDirection": "column",
|
|
"height": "100vh",
|
|
"width": 280,
|
|
"borderRight": 1,
|
|
"borderColor": "divider",
|
|
"backgroundColor": "background.paper",
|
|
"overflow": "hidden",
|
|
"transition": "width 0.2s ease-in-out"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "sidebar_header",
|
|
"type": "Box",
|
|
"props": {
|
|
"className": "sidebar-header",
|
|
"sx": {
|
|
"p": 2,
|
|
"borderBottom": 1,
|
|
"borderColor": "divider",
|
|
"display": "flex",
|
|
"alignItems": "center",
|
|
"gap": 2,
|
|
"minHeight": 64
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "sidebar_logo",
|
|
"type": "Box",
|
|
"props": {
|
|
"component": "img",
|
|
"className": "sidebar-logo",
|
|
"sx": {
|
|
"width": 40,
|
|
"height": 40,
|
|
"objectFit": "contain"
|
|
}
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "sidebar_title_group",
|
|
"type": "Stack",
|
|
"props": {
|
|
"spacing": 0,
|
|
"className": "sidebar-title-group",
|
|
"sx": {
|
|
"overflow": "hidden"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "sidebar_title",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "h6",
|
|
"fontWeight": "bold",
|
|
"noWrap": true,
|
|
"className": "sidebar-title"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "sidebar_subtitle",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "caption",
|
|
"color": "text.secondary",
|
|
"noWrap": true,
|
|
"className": "sidebar-subtitle"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "sidebar_content",
|
|
"type": "Box",
|
|
"props": {
|
|
"className": "sidebar-content",
|
|
"sx": {
|
|
"flex": 1,
|
|
"overflowY": "auto",
|
|
"overflowX": "hidden",
|
|
"py": 1
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "sidebar_nav_list",
|
|
"type": "List",
|
|
"props": {
|
|
"component": "nav",
|
|
"className": "sidebar-nav-list",
|
|
"sx": {
|
|
"px": 1
|
|
}
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "sidebar_footer",
|
|
"type": "Box",
|
|
"props": {
|
|
"className": "sidebar-footer",
|
|
"sx": {
|
|
"p": 2,
|
|
"borderTop": 1,
|
|
"borderColor": "divider",
|
|
"mt": "auto"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "sidebar_user_info",
|
|
"type": "Box",
|
|
"props": {
|
|
"className": "sidebar-user-info",
|
|
"sx": {
|
|
"display": "flex",
|
|
"alignItems": "center",
|
|
"gap": 1.5
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "sidebar_user_avatar",
|
|
"type": "Avatar",
|
|
"props": {
|
|
"className": "sidebar-user-avatar",
|
|
"sx": {
|
|
"width": 36,
|
|
"height": 36
|
|
}
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "sidebar_user_details",
|
|
"type": "Stack",
|
|
"props": {
|
|
"spacing": 0,
|
|
"className": "sidebar-user-details",
|
|
"sx": {
|
|
"overflow": "hidden",
|
|
"flex": 1
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "sidebar_user_name",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "body2",
|
|
"fontWeight": "medium",
|
|
"noWrap": true,
|
|
"className": "sidebar-user-name"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "sidebar_user_role",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "caption",
|
|
"color": "text.secondary",
|
|
"noWrap": true,
|
|
"className": "sidebar-user-role"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "sidebar_version",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "caption",
|
|
"color": "text.disabled",
|
|
"className": "sidebar-version",
|
|
"sx": {
|
|
"mt": 1,
|
|
"display": "block",
|
|
"textAlign": "center"
|
|
}
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "nav_item_link",
|
|
"type": "ListItem",
|
|
"props": {
|
|
"disablePadding": true,
|
|
"className": "nav-item-link"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_item_link_button",
|
|
"type": "ListItemButton",
|
|
"props": {
|
|
"className": "nav-item-link-button",
|
|
"sx": {
|
|
"borderRadius": 1,
|
|
"mb": 0.5,
|
|
"mx": 0.5
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_item_link_icon",
|
|
"type": "ListItemIcon",
|
|
"props": {
|
|
"className": "nav-item-link-icon",
|
|
"sx": {
|
|
"minWidth": 40
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_item_icon",
|
|
"type": "Icon",
|
|
"props": {
|
|
"className": "nav-item-icon",
|
|
"sx": {
|
|
"fontSize": 20
|
|
}
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "nav_item_link_text",
|
|
"type": "ListItemText",
|
|
"props": {
|
|
"className": "nav-item-link-text"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "nav_item_badge",
|
|
"type": "Badge",
|
|
"props": {
|
|
"className": "nav-item-badge",
|
|
"sx": {
|
|
"ml": "auto"
|
|
}
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "nav_item_group",
|
|
"type": "Box",
|
|
"props": {
|
|
"className": "nav-item-group"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_group_header",
|
|
"type": "ListItem",
|
|
"props": {
|
|
"disablePadding": true,
|
|
"className": "nav-group-header"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_group_button",
|
|
"type": "ListItemButton",
|
|
"props": {
|
|
"className": "nav-group-button",
|
|
"sx": {
|
|
"borderRadius": 1,
|
|
"mb": 0.5,
|
|
"mx": 0.5
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_group_icon",
|
|
"type": "ListItemIcon",
|
|
"props": {
|
|
"className": "nav-group-icon",
|
|
"sx": {
|
|
"minWidth": 40
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_group_icon_element",
|
|
"type": "Icon",
|
|
"props": {
|
|
"className": "nav-group-icon-element",
|
|
"sx": {
|
|
"fontSize": 20
|
|
}
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "nav_group_text",
|
|
"type": "ListItemText",
|
|
"props": {
|
|
"className": "nav-group-text"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "nav_group_expand_icon",
|
|
"type": "Icon",
|
|
"props": {
|
|
"name": "ExpandMore",
|
|
"className": "nav-group-expand-icon",
|
|
"sx": {
|
|
"transition": "transform 0.2s",
|
|
"fontSize": 20
|
|
}
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "nav_group_collapse",
|
|
"type": "Collapse",
|
|
"props": {
|
|
"className": "nav-group-collapse",
|
|
"timeout": "auto",
|
|
"unmountOnExit": true
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_group_children",
|
|
"type": "List",
|
|
"props": {
|
|
"component": "div",
|
|
"disablePadding": true,
|
|
"className": "nav-group-children",
|
|
"sx": {
|
|
"pl": 2
|
|
}
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "nav_item_divider",
|
|
"type": "Box",
|
|
"props": {
|
|
"className": "nav-item-divider",
|
|
"sx": {
|
|
"my": 1,
|
|
"mx": 2
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_divider_line",
|
|
"type": "Divider",
|
|
"props": {
|
|
"className": "nav-divider-line"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "nav_divider_label",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "overline",
|
|
"color": "text.secondary",
|
|
"className": "nav-divider-label",
|
|
"sx": {
|
|
"px": 1,
|
|
"display": "none"
|
|
}
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "nav_item_header",
|
|
"type": "Box",
|
|
"props": {
|
|
"className": "nav-item-header",
|
|
"sx": {
|
|
"px": 2,
|
|
"py": 1.5,
|
|
"mt": 1
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_header_content",
|
|
"type": "Box",
|
|
"props": {
|
|
"className": "nav-header-content",
|
|
"sx": {
|
|
"display": "flex",
|
|
"alignItems": "center",
|
|
"gap": 1
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_header_icon",
|
|
"type": "Icon",
|
|
"props": {
|
|
"className": "nav-header-icon",
|
|
"sx": {
|
|
"fontSize": 16,
|
|
"color": "text.secondary"
|
|
}
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "nav_header_text",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "overline",
|
|
"color": "text.secondary",
|
|
"fontWeight": "bold",
|
|
"className": "nav-header-text"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "navigation_menu",
|
|
"type": "Box",
|
|
"props": {
|
|
"component": "nav",
|
|
"className": "navigation-menu",
|
|
"sx": {
|
|
"display": "flex",
|
|
"alignItems": "center",
|
|
"height": 64,
|
|
"px": 2,
|
|
"backgroundColor": "background.paper",
|
|
"borderBottom": 1,
|
|
"borderColor": "divider"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_menu_brand",
|
|
"type": "Box",
|
|
"props": {
|
|
"className": "nav-menu-brand",
|
|
"sx": {
|
|
"display": "flex",
|
|
"alignItems": "center",
|
|
"gap": 1.5,
|
|
"mr": 4
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_menu_logo",
|
|
"type": "Box",
|
|
"props": {
|
|
"component": "img",
|
|
"className": "nav-menu-logo",
|
|
"sx": {
|
|
"width": 32,
|
|
"height": 32,
|
|
"objectFit": "contain"
|
|
}
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "nav_menu_title",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "h6",
|
|
"fontWeight": "bold",
|
|
"noWrap": true,
|
|
"className": "nav-menu-title"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "nav_menu_items",
|
|
"type": "Stack",
|
|
"props": {
|
|
"direction": "row",
|
|
"spacing": 0.5,
|
|
"className": "nav-menu-items",
|
|
"sx": {
|
|
"flex": 1,
|
|
"alignItems": "center"
|
|
}
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "nav_menu_actions",
|
|
"type": "Stack",
|
|
"props": {
|
|
"direction": "row",
|
|
"spacing": 1,
|
|
"className": "nav-menu-actions",
|
|
"sx": {
|
|
"alignItems": "center",
|
|
"ml": "auto"
|
|
}
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "nav_menu_item",
|
|
"type": "Box",
|
|
"props": {
|
|
"className": "nav-menu-item"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_menu_item_button",
|
|
"type": "Button",
|
|
"props": {
|
|
"variant": "text",
|
|
"className": "nav-menu-item-button",
|
|
"sx": {
|
|
"textTransform": "none",
|
|
"px": 2,
|
|
"py": 1,
|
|
"borderRadius": 1,
|
|
"fontWeight": "medium"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_menu_item_icon",
|
|
"type": "Icon",
|
|
"props": {
|
|
"className": "nav-menu-item-icon",
|
|
"sx": {
|
|
"mr": 1,
|
|
"fontSize": 20
|
|
}
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "nav_menu_item_label",
|
|
"type": "Text",
|
|
"props": {
|
|
"className": "nav-menu-item-label"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "nav_menu_dropdown",
|
|
"type": "Box",
|
|
"props": {
|
|
"className": "nav-menu-dropdown"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_menu_dropdown_trigger",
|
|
"type": "Button",
|
|
"props": {
|
|
"variant": "text",
|
|
"endIcon": "ExpandMore",
|
|
"className": "nav-menu-dropdown-trigger",
|
|
"sx": {
|
|
"textTransform": "none",
|
|
"px": 2,
|
|
"py": 1,
|
|
"borderRadius": 1,
|
|
"fontWeight": "medium"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "nav_menu_dropdown_icon",
|
|
"type": "Icon",
|
|
"props": {
|
|
"className": "nav-menu-dropdown-icon",
|
|
"sx": {
|
|
"mr": 1,
|
|
"fontSize": 20
|
|
}
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "nav_menu_dropdown_label",
|
|
"type": "Text",
|
|
"props": {
|
|
"className": "nav-menu-dropdown-label"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "nav_menu_dropdown_content",
|
|
"type": "Menu",
|
|
"props": {
|
|
"className": "nav-menu-dropdown-content",
|
|
"anchorOrigin": {
|
|
"vertical": "bottom",
|
|
"horizontal": "left"
|
|
},
|
|
"transformOrigin": {
|
|
"vertical": "top",
|
|
"horizontal": "left"
|
|
}
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "breadcrumbs",
|
|
"type": "Box",
|
|
"props": {
|
|
"component": "nav",
|
|
"className": "breadcrumbs-container",
|
|
"sx": {
|
|
"py": 1,
|
|
"px": 2
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "breadcrumbs_list",
|
|
"type": "Breadcrumbs",
|
|
"props": {
|
|
"separator": "/",
|
|
"className": "breadcrumbs-list",
|
|
"sx": {
|
|
"fontSize": "0.875rem"
|
|
}
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "breadcrumb_item",
|
|
"type": "Link",
|
|
"props": {
|
|
"underline": "hover",
|
|
"color": "inherit",
|
|
"className": "breadcrumb-item",
|
|
"sx": {
|
|
"display": "flex",
|
|
"alignItems": "center",
|
|
"gap": 0.5,
|
|
"cursor": "pointer"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "breadcrumb_item_icon",
|
|
"type": "Icon",
|
|
"props": {
|
|
"className": "breadcrumb-item-icon",
|
|
"sx": {
|
|
"fontSize": 18
|
|
}
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "breadcrumb_item_label",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "body2",
|
|
"className": "breadcrumb-item-label"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "breadcrumb_current",
|
|
"type": "Box",
|
|
"props": {
|
|
"className": "breadcrumb-current",
|
|
"sx": {
|
|
"display": "flex",
|
|
"alignItems": "center",
|
|
"gap": 0.5
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "breadcrumb_current_icon",
|
|
"type": "Icon",
|
|
"props": {
|
|
"className": "breadcrumb-current-icon",
|
|
"sx": {
|
|
"fontSize": 18,
|
|
"color": "text.secondary"
|
|
}
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "breadcrumb_current_label",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "body2",
|
|
"color": "text.primary",
|
|
"fontWeight": "medium",
|
|
"className": "breadcrumb-current-label"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "breadcrumb_separator",
|
|
"type": "Icon",
|
|
"props": {
|
|
"name": "ChevronRight",
|
|
"className": "breadcrumb-separator",
|
|
"sx": {
|
|
"fontSize": 16,
|
|
"color": "text.disabled"
|
|
}
|
|
},
|
|
"children": []
|
|
}
|
|
] |