oa-componentbook 1.0.1-stage.393 → 1.0.1-stage.395
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", {
|
|
@@ -125,8 +131,8 @@ function SidebarWidget(_ref) {
|
|
|
125
131
|
}
|
|
126
132
|
}, shouldShowProfileIcon && profileData !== null && profileData !== void 0 && profileData.visible ? /*#__PURE__*/_react.default.createElement(_styles.ProfileIcon, {
|
|
127
133
|
style: {
|
|
128
|
-
backgroundColor: "var(--color-".concat((profileData === null || profileData === void 0 ? void 0 : profileData.iconBgColor) ||
|
|
129
|
-
color: "var(--color-".concat((profileData === null || profileData === void 0 ? void 0 : profileData.iconColor) ||
|
|
134
|
+
backgroundColor: "var(--color-".concat((profileData === null || profileData === void 0 ? void 0 : profileData.iconBgColor) || "primary", ")"),
|
|
135
|
+
color: "var(--color-".concat((profileData === null || profileData === void 0 ? void 0 : profileData.iconColor) || "primary-content", ")")
|
|
130
136
|
}
|
|
131
137
|
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
132
138
|
color: "white",
|
|
@@ -137,6 +143,8 @@ function SidebarWidget(_ref) {
|
|
|
137
143
|
size: 20
|
|
138
144
|
})))), /*#__PURE__*/_react.default.createElement("div", {
|
|
139
145
|
className: "notShowInMobile"
|
|
146
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
147
|
+
className: "sidebarContent"
|
|
140
148
|
}, (menuItems === null || menuItems === void 0 ? void 0 : menuItems.visible) && /*#__PURE__*/_react.default.createElement(_antd.Menu, {
|
|
141
149
|
theme: "light",
|
|
142
150
|
mode: "inline",
|
|
@@ -151,6 +159,17 @@ function SidebarWidget(_ref) {
|
|
|
151
159
|
}, /*#__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
160
|
color: "negative",
|
|
153
161
|
typography: "type-button-500"
|
|
154
|
-
}, footer === null || footer === void 0 || (_footer$item3 = footer.item) === null || _footer$item3 === void 0 ? void 0 : _footer$item3.label))))))
|
|
162
|
+
}, 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", {
|
|
163
|
+
className: "footerLogoSection notShowInMobile"
|
|
164
|
+
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
165
|
+
color: "secondary-content",
|
|
166
|
+
typography: "type-b2-400"
|
|
167
|
+
}, "Powered by"), /*#__PURE__*/_react.default.createElement("div", {
|
|
168
|
+
className: "footerLogoContainer"
|
|
169
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Image, {
|
|
170
|
+
src: (_footer$icons$ = footer.icons[0]) === null || _footer$icons$ === void 0 ? void 0 : _footer$icons$.icon,
|
|
171
|
+
preview: false,
|
|
172
|
+
className: "footerLogo"
|
|
173
|
+
}))));
|
|
155
174
|
}
|
|
156
175
|
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:
|
|
11
|
+
const OalayoutStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .oaLeftLayouts {\n padding: 24px 8px;\n background: #f6f6f6;\n height: 80vh; /* full viewport height */\n display: flex;\n flex-direction: column;\n }\n\n .logoContainer {\n padding: 12px;\n display: flex;\n justify-content: space-between;\n height: 110px;\n align-items: center;\n margin: 0 0 16px 0;\n }\n\n .logoutDiv {\n display: flex;\n flex-direction: row;\n margin: 48px 0 0 16px;\n gap: 8px;\n 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 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)\n > .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: auto;\n margin-bottom: 40px;\n padding: 0 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n width: 172px;\n height: 75px;\n }\n\n .footerLogoContainer {\n display: flex;\n align-items: center;\n }\n\n .footerLogo {\n width: 172px;\n height: 43px;\n }\n\n @media only screen and (max-width: 600px) {\n .oaLeftLayouts {\n background: #fff;\n padding: 16px;\n height: auto;\n display: block;\n }\n .logoContainer {\n padding: 0;\n align-items: center;\n width: 100%;\n height: 80px;\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;
|