From 56a7baedbb8c0d0163692cb3fc478e1451edde5d Mon Sep 17 00:00:00 2001 From: Richard Ward Date: Tue, 30 Dec 2025 19:26:29 +0000 Subject: [PATCH] config: packages,nav,menu (1 files) --- packages/nav_menu/seed/components.json | 1540 ++++++++++++------------ 1 file changed, 770 insertions(+), 770 deletions(-) diff --git a/packages/nav_menu/seed/components.json b/packages/nav_menu/seed/components.json index 3339d6203..366b185b8 100644 --- a/packages/nav_menu/seed/components.json +++ b/packages/nav_menu/seed/components.json @@ -1,771 +1,771 @@ -[ - { - "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": [] - } +[ + { + "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": [] + } ] \ No newline at end of file