oa-componentbook 1.0.1-stage.394 → 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.
|
@@ -131,8 +131,8 @@ function SidebarWidget(_ref) {
|
|
|
131
131
|
}
|
|
132
132
|
}, shouldShowProfileIcon && profileData !== null && profileData !== void 0 && profileData.visible ? /*#__PURE__*/_react.default.createElement(_styles.ProfileIcon, {
|
|
133
133
|
style: {
|
|
134
|
-
backgroundColor: "var(--color-".concat((profileData === null || profileData === void 0 ? void 0 : profileData.iconBgColor) ||
|
|
135
|
-
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", ")")
|
|
136
136
|
}
|
|
137
137
|
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
138
138
|
color: "white",
|
|
@@ -143,6 +143,8 @@ function SidebarWidget(_ref) {
|
|
|
143
143
|
size: 20
|
|
144
144
|
})))), /*#__PURE__*/_react.default.createElement("div", {
|
|
145
145
|
className: "notShowInMobile"
|
|
146
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
147
|
+
className: "sidebarContent"
|
|
146
148
|
}, (menuItems === null || menuItems === void 0 ? void 0 : menuItems.visible) && /*#__PURE__*/_react.default.createElement(_antd.Menu, {
|
|
147
149
|
theme: "light",
|
|
148
150
|
mode: "inline",
|
|
@@ -157,8 +159,8 @@ function SidebarWidget(_ref) {
|
|
|
157
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, {
|
|
158
160
|
color: "negative",
|
|
159
161
|
typography: "type-button-500"
|
|
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
|
+
}, 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"
|
|
162
164
|
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
163
165
|
color: "secondary-content",
|
|
164
166
|
typography: "type-b2-400"
|
|
@@ -168,6 +170,6 @@ function SidebarWidget(_ref) {
|
|
|
168
170
|
src: (_footer$icons$ = footer.icons[0]) === null || _footer$icons$ === void 0 ? void 0 : _footer$icons$.icon,
|
|
169
171
|
preview: false,
|
|
170
172
|
className: "footerLogo"
|
|
171
|
-
}))))
|
|
173
|
+
}))));
|
|
172
174
|
}
|
|
173
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;
|