oa-componentbook 1.0.1-stage.393 → 1.0.1-stage.394
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -29,7 +29,7 @@ const {
|
|
|
29
29
|
SubMenu
|
|
30
30
|
} = _antd.Menu;
|
|
31
31
|
function SidebarWidget(_ref) {
|
|
32
|
-
var _mobileMenuItems$item, _footer$item, _menuItems$items, _footer$item2, _footer$item3
|
|
32
|
+
var _mobileMenuItems$item, _footer$item, _menuItems$items, _footer$item2, _footer$item3, _footer$icons$;
|
|
33
33
|
let {
|
|
34
34
|
heading,
|
|
35
35
|
menuItems = [],
|
|
@@ -53,19 +53,23 @@ function SidebarWidget(_ref) {
|
|
|
53
53
|
|
|
54
54
|
// Find if current path is in any submenu
|
|
55
55
|
for (const item of items) {
|
|
56
|
-
if (item.children && item.children.length > 0) {
|
|
57
|
-
|
|
56
|
+
if (item !== null && item !== void 0 && item.children && (item === null || item === void 0 ? void 0 : item.children.length) > 0) {
|
|
57
|
+
var _item$children;
|
|
58
|
+
const hasCurrentPath = item === null || item === void 0 || (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.some(child => (child === null || child === void 0 ? void 0 : child.path) === currentPath);
|
|
58
59
|
if (hasCurrentPath) {
|
|
59
|
-
setOpenKeys([item.key]);
|
|
60
|
+
setOpenKeys([item === null || item === void 0 ? void 0 : item.key]);
|
|
60
61
|
return;
|
|
61
62
|
}
|
|
62
63
|
}
|
|
63
64
|
}
|
|
64
65
|
|
|
65
66
|
// If no match found, open the first submenu by default
|
|
66
|
-
const firstSubmenu = items.find(item =>
|
|
67
|
+
const firstSubmenu = items === null || items === void 0 ? void 0 : items.find(item => {
|
|
68
|
+
var _item$children2;
|
|
69
|
+
return (item === null || item === void 0 ? void 0 : item.children) && (item === null || item === void 0 || (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) > 0;
|
|
70
|
+
});
|
|
67
71
|
if (firstSubmenu) {
|
|
68
|
-
setOpenKeys([firstSubmenu.key]);
|
|
72
|
+
setOpenKeys([firstSubmenu === null || firstSubmenu === void 0 ? void 0 : firstSubmenu.key]);
|
|
69
73
|
}
|
|
70
74
|
}, [location.pathname, menuItems]);
|
|
71
75
|
|
|
@@ -84,17 +88,19 @@ function SidebarWidget(_ref) {
|
|
|
84
88
|
|
|
85
89
|
// Simple render function for menu items
|
|
86
90
|
const renderMenuItem = item => {
|
|
87
|
-
|
|
91
|
+
var _item$children3;
|
|
92
|
+
if (item !== null && item !== void 0 && item.children && (item === null || item === void 0 || (_item$children3 = item.children) === null || _item$children3 === void 0 ? void 0 : _item$children3.length) > 0) {
|
|
93
|
+
var _item$children4;
|
|
88
94
|
return /*#__PURE__*/_react.default.createElement(SubMenu, {
|
|
89
95
|
key: item.key,
|
|
90
|
-
title: /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, item === null || item === void 0 ? void 0 : item.iconConfig), item.label)
|
|
91
|
-
}, item.children.map(child => /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
|
|
92
|
-
key: child.path
|
|
93
|
-
}, child.label)));
|
|
96
|
+
title: /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, item === null || item === void 0 ? void 0 : item.iconConfig), item === null || item === void 0 ? void 0 : item.label)
|
|
97
|
+
}, item === null || item === void 0 || (_item$children4 = item.children) === null || _item$children4 === void 0 ? void 0 : _item$children4.map(child => /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
|
|
98
|
+
key: child === null || child === void 0 ? void 0 : child.path
|
|
99
|
+
}, child === null || child === void 0 ? void 0 : child.label)));
|
|
94
100
|
} else {
|
|
95
101
|
return /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
|
|
96
102
|
key: item.path
|
|
97
|
-
}, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, item === null || item === void 0 ? void 0 : item.iconConfig), item.label);
|
|
103
|
+
}, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, item === null || item === void 0 ? void 0 : item.iconConfig), item === null || item === void 0 ? void 0 : item.label);
|
|
98
104
|
}
|
|
99
105
|
};
|
|
100
106
|
return /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -151,6 +157,17 @@ function SidebarWidget(_ref) {
|
|
|
151
157
|
}, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, footer === null || footer === void 0 || (_footer$item2 = footer.item) === null || _footer$item2 === void 0 ? void 0 : _footer$item2.iconConfig), /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
152
158
|
color: "negative",
|
|
153
159
|
typography: "type-button-500"
|
|
154
|
-
}, footer === null || footer === void 0 || (_footer$item3 = footer.item) === null || _footer$item3 === void 0 ? void 0 : _footer$item3.label)))
|
|
160
|
+
}, footer === null || footer === void 0 || (_footer$item3 = footer.item) === null || _footer$item3 === void 0 ? void 0 : _footer$item3.label)), (footer === null || footer === void 0 ? void 0 : footer.icons) && footer.icons.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
|
|
161
|
+
className: "footerLogoSection"
|
|
162
|
+
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
163
|
+
color: "secondary-content",
|
|
164
|
+
typography: "type-b2-400"
|
|
165
|
+
}, "Powered by"), /*#__PURE__*/_react.default.createElement("div", {
|
|
166
|
+
className: "footerLogoContainer"
|
|
167
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Image, {
|
|
168
|
+
src: (_footer$icons$ = footer.icons[0]) === null || _footer$icons$ === void 0 ? void 0 : _footer$icons$.icon,
|
|
169
|
+
preview: false,
|
|
170
|
+
className: "footerLogo"
|
|
171
|
+
})))))));
|
|
155
172
|
}
|
|
156
173
|
var _default = exports.default = (0, _reactRouterDom.withRouter)(SidebarWidget);
|
|
@@ -8,6 +8,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
8
8
|
var _templateObject, _templateObject2; // styles.js
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
|
-
const OalayoutStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .oaLeftLayouts {\n padding: 24px 8px;\n background: #f6f6f6;\n }\n\n .logoContainer {\n padding: 0 12px 68px;\n display: flex;\n justify-content: space-between;\n }\n\n .logoutDiv {\n display: flex; flex-direction: row; margin:
|
|
11
|
+
const OalayoutStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .oaLeftLayouts {\n padding: 24px 8px;\n background: #f6f6f6;\n }\n\n .logoContainer {\n padding: 0 12px 68px;\n display: flex;\n justify-content: space-between;\n }\n\n .logoutDiv {\n display: flex; flex-direction: row; margin: 48px 0 0 16px; gap: 8px; cursor: pointer;\n }\n\n .leftLogoSec {\n display: flex;\n flex-direction: row;\n gap: 8px;\n }\n\n .logoContainer em {\n width: 1px;\n background: #e0e0e0;\n }\n .logoContainer img {\n height: 32px;\n }\n .ant-layout-sider-light,\n .ant-menu-light {\n background: transparent;\n }\n\n /* Regular menu items */\n .ant-menu-item {\n padding: 16px;\n border-radius: 50px;\n margin: 0 0 8px;\n height: auto;\n line-height: normal;\n border-radius: 999px;\n border: 1px solid #e0e0e0;\n background: #fff;\n }\n\n /* SubMenu title styling - this is the parent item - same size as regular items */\n .ant-menu-submenu-title {\n padding: 16px;\n border-radius: 50px;\n margin: 0 0 8px;\n height: auto;\n line-height: normal;\n border-radius: 999px;\n border: 1px solid #e0e0e0;\n background: #fff;\n display: flex;\n align-items: center;\n }\n\n /* SubMenu items - these are the children - should be plain text */\n .ant-menu-submenu .ant-menu-item {\n margin: 8px 0;\n padding: 8px 24px;\n border-radius: 0;\n background: transparent;\n border: none;\n margin-left: 16px;\n color: #666;\n font-size: 14px;\n height: auto;\n line-height: 1.4;\n }\n\n /* Add extra spacing for first nested item */\n .ant-menu-submenu .ant-menu-item:first-child {\n margin-top: 12px;\n }\n\n /* Add extra spacing for last nested item */\n .ant-menu-submenu .ant-menu-item:last-child {\n margin-bottom: 12px;\n }\n\n /* REMOVED: Open SubMenu styling - this was making ALL open submenus blue */\n /* .ant-menu-submenu-open > .ant-menu-submenu-title {\n background: #014fc5;\n color: #fff;\n padding: 24px; \n } */\n\n /* NEW: Only make parent blue when it contains a selected child */\n .ant-menu-submenu-open:has(.ant-menu-item-selected) > .ant-menu-submenu-title {\n background: #014fc5;\n color: #fff;\n padding: 24px;\n }\n\n /* Fallback for browsers that don't support :has() */\n .ant-menu-submenu-open > .ant-menu-submenu-title {\n background: #fff;\n color: #000;\n padding: 24px;\n }\n\n /* SubMenu title content */\n .ant-menu-item .ant-menu-title-content {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n }\n \n .ant-menu-submenu-title .ant-menu-title-content {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n }\n\n /* Add styling to span elements inside SubMenu title content */\n .ant-menu-submenu-title .ant-menu-title-content span {\n display: flex;\n gap: 8px;\n align-items: center;\n }\n\n /* Selected states */\n .ant-menu-item-active {\n background: #014fc5;\n color: #fff;\n }\n .ant-menu-item-selected {\n background: #014fc5;\n color: #fff;\n }\n\n /* SubMenu selected item - should be bold black when selected */\n .ant-menu-submenu .ant-menu-item-selected {\n background: transparent;\n color: #000;\n font-weight: bold;\n border-radius: 0;\n }\n\n /* Hover effects */\n .ant-menu-light:not(.ant-menu-horizontal)\n .ant-menu-item:not(.ant-menu-item-selected):hover,\n :where(.css-dev-only-do-not-override-zcfrx9).ant-menu-light\n > .ant-menu:not(.ant-menu-horizontal)\n .ant-menu-item:not(.ant-menu-item-selected):hover {\n background: #014fc5;\n color: #fff;\n }\n\n /* SubMenu title hover - should be blue on hover */\n .ant-menu-submenu-title:hover {\n background: #014fc5 !important;\n color: #fff !important;\n padding: 24px !important;\n }\n\n /* Nested items hover - should be bold black when hovered */\n .ant-menu-submenu .ant-menu-item:hover {\n background: transparent !important;\n color: #000 !important;\n font-weight: bold !important;\n border-radius: 0;\n }\n\n /* Make Orders parent blue when hovering over submenu items */\n .ant-menu-submenu:hover .ant-menu-submenu-title {\n background: #014fc5 !important;\n color: #fff !important;\n padding: 24px !important;\n }\n\n .ant-menu-light.ant-menu-root.ant-menu-inline {\n border: none;\n }\n\n /* SubMenu arrow styling */\n .ant-menu-submenu-arrow {\n color: inherit;\n }\n\n /* SubMenu content area */\n .ant-menu-sub {\n background: transparent !important;\n padding: 8px 0;\n }\n\n /* Remove default SubMenu styling */\n .ant-menu-submenu .ant-menu-sub {\n background: transparent !important;\n box-shadow: none !important;\n }\n\n .notShowInDesktop {\n display: none;\n }\n\n .footerLogoSection {\n margin-top: 64px;\n padding: 0 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .footerLogoContainer {\n display: flex;\n align-items: center;\n }\n\n .footerLogo {\n height: 32px; /* Adjust size as needed */\n }\n\n @media only screen and (max-width: 600px) {\n .oaLeftLayouts {\n background: #fff;\n padding: 16px;\n }\n .logoContainer {\n padding: 0;\n align-items: center;\n }\n\n .notShowInMobile {\n display: none;\n }\n .notShowInDesktop {\n display: flex;\n }\n\n .oaLeftLayouts .ant-layout-sider {\n max-width: none !important;\n width: 100% !important;\n }\n p.ant-dropdown-trigger {\n margin-bottom: 0;\n }\n }\n"])));
|
|
12
12
|
const ProfileIcon = exports.ProfileIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-primary);\n\n &:hover {\n transform: scale(1.05);\n }\n"])));
|
|
13
13
|
var _default = exports.default = OalayoutStyle;
|