infinity-forge 1.1.8 → 1.1.9
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.
- package/dist/system/presentation/components/layout/sidebar-menu/index.js +2 -6
- package/dist/system/presentation/components/layout/sidebar-menu/index.js.map +1 -1
- package/dist/system/presentation/components/layout/sidebar-menu/styles.js +1 -1
- package/dist/system/presentation/components/layout/sidebar-menu/styles.js.map +1 -1
- package/package.json +1 -1
- package/dist/system/presentation/components/layout/sidebar-menu/expanded-menu/index.d.ts +0 -1
- package/dist/system/presentation/components/layout/sidebar-menu/expanded-menu/index.js +0 -44
- package/dist/system/presentation/components/layout/sidebar-menu/expanded-menu/index.js.map +0 -1
|
@@ -32,7 +32,6 @@ var link_1 = __importDefault(require("next/link"));
|
|
|
32
32
|
var ui_1 = require("../../../../../ui/index.js");
|
|
33
33
|
var system_1 = require("../../../../../system/index.js");
|
|
34
34
|
var S = __importStar(require("./styles.js"));
|
|
35
|
-
var expanded_menu_1 = require("./expanded-menu/index.js");
|
|
36
35
|
function MenuItem(_a) {
|
|
37
36
|
var _b;
|
|
38
37
|
var item = _a.item, index = _a.index;
|
|
@@ -57,12 +56,9 @@ function SidebarMenu() {
|
|
|
57
56
|
var expandedMenu = settings.mode === 'expandedMenu';
|
|
58
57
|
var isPositionInternal = settings.position === 'internal';
|
|
59
58
|
var isAutoInternal = !expandedMenu && isPositionInternal;
|
|
60
|
-
|
|
61
|
-
return (0, jsx_runtime_1.jsx)(expanded_menu_1.ExpandedMenu, {});
|
|
62
|
-
}
|
|
63
|
-
return ((0, jsx_runtime_1.jsxs)(ui_1.Error, { name: 'Menu', children: [!isAutoInternal && (0, jsx_runtime_1.jsx)("div", { id: 'ghost_menu_expanded', style: { width: '65px' } }), openMenu && isAutoInternal && (0, jsx_runtime_1.jsx)(S.Overlay, { onClick: function () { return setOpenMenu(false); } }), (0, jsx_runtime_1.jsx)(S.Menu, { id: 'sidebar', className: (openMenu ? 'menu expanded' : 'menu') +
|
|
59
|
+
return ((0, jsx_runtime_1.jsxs)(ui_1.Error, { name: 'Menu', children: [!isPositionInternal && (0, jsx_runtime_1.jsx)("div", { id: 'ghost_menu_expanded', style: { width: '65px' } }), openMenu && isPositionInternal && (0, jsx_runtime_1.jsx)(S.Overlay, { onClick: function () { return setOpenMenu(false); } }), (0, jsx_runtime_1.jsxs)(S.Menu, { id: 'sidebar', className: (openMenu ? 'menu expanded' : 'menu') +
|
|
64
60
|
(expandedMenu ? ' expanded_menu' : '') +
|
|
65
|
-
(
|
|
61
|
+
(isPositionInternal ? ' internal' : ''), children: [!isPositionInternal && expandedMenu && ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: 'expand', onClick: function () { return setOpenMenu(function (s) { return !s; }); }, children: (0, jsx_runtime_1.jsx)(ui_1.Icon, { name: 'IconArrowRight' }) })), (_a = data === null || data === void 0 ? void 0 : data.items) === null || _a === void 0 ? void 0 : _a.map(function (item, index) { return ((0, jsx_runtime_1.jsx)("ul", { children: (0, jsx_runtime_1.jsx)(MenuItem, { item: item, index: index }, 'menu-item' + index + item.title) })); })] })] }));
|
|
66
62
|
}
|
|
67
63
|
exports.SidebarMenu = SidebarMenu;
|
|
68
64
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/system/presentation/components/layout/sidebar-menu/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,mDAA4B;AAE5B,2BAAkC;AAClC,mCAA+C;AAE/C,0CAA6B;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/system/presentation/components/layout/sidebar-menu/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.Overlay = exports.SubMenu = exports.Menu = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.Menu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: absolute;\n padding-right: clamp(5px, 0.78vw, 15px);\n min-width: 285px;\n width: 28px;\n padding: 0 0 15px 0;\n border-right: 1px solid #e1e1e1;\n display: flex;\n flex-direction: column;\n left: 0;\n top: 0;\n height: 100%;\n min-height: 100vh;\n z-index: 999999999;\n background: #fff;\n padding-top: 25px;\n transition: 0.7s;\n\n &.auto_internal {\n transform: translateX(-120%);\n position: fixed;\n }\n\n &.expanded {\n transform: translateX(0);\n }\n\n &.regular_menu {\n transform: translateX(0);\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n border-radius: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background: #ccc;\n border-radius: 10px;\n }\n\n a {\n text-decoration: none;\n }\n\n ul {\n list-style-type: none;\n padding: 0;\n margin-top: 0;\n margin-bottom: clamp(10px, 0.75vw, 15px);\n\n li + li {\n margin-top: 4px;\n }\n\n ul {\n display: none;\n padding: 4px;\n\n * {\n color: ", " !important;\n }\n\n li {\n padding: 0;\n\n &.active {\n background: none;\n }\n\n ul {\n display: none;\n }\n\n .item-title {\n &:hover,\n &.active {\n background: #e1e1e1 !important;\n }\n }\n }\n }\n\n li {\n position: relative !important;\n z-index: 9999;\n width: 100%;\n\n ul {\n display: none;\n }\n\n &.active {\n background: ", ";\n border-radius: 5px;\n\n a,\n span {\n color: #fff;\n }\n\n svg {\n fill: #fff !important;\n }\n }\n\n &:hover {\n > ul {\n display: block;\n }\n }\n }\n }\n\n .title {\n color: #828282;\n margin-bottom: clamp(3px, 0.5vw, 10px);\n padding-left: clamp(5px, 0.78vw, 15px);\n\n .dark & {\n color: #4b5563;\n }\n }\n\n .item-title {\n border-radius: 5px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: transform 0.1s ease-in-out;\n font-weight: 400;\n padding: 0 clamp(5px, 0.78vw, 15px);\n height: clamp(34px, 2.08vw, 40px);\n display: flex;\n position: relative;\n z-index: 2222;\n\n > span {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n color: ", ";\n\n .icon {\n width: 20px;\n height: 20px;\n display: flex;\n transition: 0.1s linear;\n margin-left: 0;\n\n > svg {\n width: 100%;\n height: auto;\n fill: #828282;\n }\n }\n }\n\n &:hover {\n background-color: ", ";\n\n > span {\n color: #fff;\n margin-right: 0;\n transition: 0.3s linear;\n\n .icon {\n margin-left: 10px;\n\n > svg {\n fill: #fff !important;\n }\n }\n }\n }\n }\n\n .arrow {\n width: 7px;\n margin: 0 0 0 auto;\n display: flex;\n\n svg {\n width: 100%;\n height: auto;\n fill: currentColor;\n }\n }\n\n &.expanded_menu {\n width: 65px !important;\n min-width: 65px !important;\n padding-top: 41px;\n transition: 0.3s;\n position: absolute;\n transform: none;\n\n .expand {\n position: absolute;\n top: 10px;\n right: -12px;\n width: 24px;\n height: 24px;\n border-radius: 100%;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n border: 0;\n\n svg {\n width: 5px;\n fill: #fff;\n height: auto;\n }\n }\n\n > ul {\n > li {\n > .item-title {\n .content-title {\n display: none;\n }\n\n .arrow {\n display: none;\n }\n }\n }\n }\n\n ul {\n .submenu {\n min-width: 265px;\n }\n }\n\n .item-title {\n padding-left: 22px;\n\n &:hover {\n > span {\n .icon {\n margin-left: 0;\n\n > svg {\n fill: #fff !important;\n }\n }\n }\n }\n }\n\n &.expanded {\n width: 240px !important;\n transition: 0.3s;\n\n .expand {\n svg {\n transform: rotate(180deg);\n }\n }\n\n > ul {\n > li {\n > .item-title {\n .content-title {\n display: block;\n }\n\n .arrow {\n display: block;\n }\n }\n }\n }\n }\n }\n\n @media only screen and (max-width: 1400px) {\n .icon {\n width: 14px !important;\n height: 14px !important;\n }\n\n span {\n font-size: 13.5px;\n }\n }\n\n @media only screen and (max-width: 1200px) {\n .icon {\n width: 17px !important;\n height: 17px !important;\n }\n\n span {\n font-size: 13px;\n }\n }\n\n @media only screen and (max-width: 768px) {\n .icon {\n width: 16px !important;\n height: 16px !important;\n }\n\n span {\n font-size: 12px;\n }\n }\n"], ["\n width: 100%;\n position: absolute;\n padding-right: clamp(5px, 0.78vw, 15px);\n min-width: 285px;\n width: 28px;\n padding: 0 0 15px 0;\n border-right: 1px solid #e1e1e1;\n display: flex;\n flex-direction: column;\n left: 0;\n top: 0;\n height: 100%;\n min-height: 100vh;\n z-index: 999999999;\n background: #fff;\n padding-top: 25px;\n transition: 0.7s;\n\n &.auto_internal {\n transform: translateX(-120%);\n position: fixed;\n }\n\n &.expanded {\n transform: translateX(0);\n }\n\n &.regular_menu {\n transform: translateX(0);\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n border-radius: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background: #ccc;\n border-radius: 10px;\n }\n\n a {\n text-decoration: none;\n }\n\n ul {\n list-style-type: none;\n padding: 0;\n margin-top: 0;\n margin-bottom: clamp(10px, 0.75vw, 15px);\n\n li + li {\n margin-top: 4px;\n }\n\n ul {\n display: none;\n padding: 4px;\n\n * {\n color: ", " !important;\n }\n\n li {\n padding: 0;\n\n &.active {\n background: none;\n }\n\n ul {\n display: none;\n }\n\n .item-title {\n &:hover,\n &.active {\n background: #e1e1e1 !important;\n }\n }\n }\n }\n\n li {\n position: relative !important;\n z-index: 9999;\n width: 100%;\n\n ul {\n display: none;\n }\n\n &.active {\n background: ", ";\n border-radius: 5px;\n\n a,\n span {\n color: #fff;\n }\n\n svg {\n fill: #fff !important;\n }\n }\n\n &:hover {\n > ul {\n display: block;\n }\n }\n }\n }\n\n .title {\n color: #828282;\n margin-bottom: clamp(3px, 0.5vw, 10px);\n padding-left: clamp(5px, 0.78vw, 15px);\n\n .dark & {\n color: #4b5563;\n }\n }\n\n .item-title {\n border-radius: 5px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: transform 0.1s ease-in-out;\n font-weight: 400;\n padding: 0 clamp(5px, 0.78vw, 15px);\n height: clamp(34px, 2.08vw, 40px);\n display: flex;\n position: relative;\n z-index: 2222;\n\n > span {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n color: ", ";\n\n .icon {\n width: 20px;\n height: 20px;\n display: flex;\n transition: 0.1s linear;\n margin-left: 0;\n\n > svg {\n width: 100%;\n height: auto;\n fill: #828282;\n }\n }\n }\n\n &:hover {\n background-color: ", ";\n\n > span {\n color: #fff;\n margin-right: 0;\n transition: 0.3s linear;\n\n .icon {\n margin-left: 10px;\n\n > svg {\n fill: #fff !important;\n }\n }\n }\n }\n }\n\n .arrow {\n width: 7px;\n margin: 0 0 0 auto;\n display: flex;\n\n svg {\n width: 100%;\n height: auto;\n fill: currentColor;\n }\n }\n\n &.expanded_menu {\n width: 65px !important;\n min-width: 65px !important;\n padding-top: 41px;\n transition: 0.3s;\n position: absolute;\n transform: none;\n\n .expand {\n position: absolute;\n top: 10px;\n right: -12px;\n width: 24px;\n height: 24px;\n border-radius: 100%;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n border: 0;\n\n svg {\n width: 5px;\n fill: #fff;\n height: auto;\n }\n }\n\n > ul {\n > li {\n > .item-title {\n .content-title {\n display: none;\n }\n\n .arrow {\n display: none;\n }\n }\n }\n }\n\n ul {\n .submenu {\n min-width: 265px;\n }\n }\n\n .item-title {\n padding-left: 22px;\n\n &:hover {\n > span {\n .icon {\n margin-left: 0;\n\n > svg {\n fill: #fff !important;\n }\n }\n }\n }\n }\n\n &.expanded {\n width: 240px !important;\n transition: 0.3s;\n\n .expand {\n svg {\n transform: rotate(180deg);\n }\n }\n\n > ul {\n > li {\n > .item-title {\n .content-title {\n display: block;\n }\n\n .arrow {\n display: block;\n }\n }\n }\n }\n }\n }\n\n @media only screen and (max-width: 1400px) {\n .icon {\n width: 14px !important;\n height: 14px !important;\n }\n\n span {\n font-size: 13.5px;\n }\n }\n\n @media only screen and (max-width: 1200px) {\n .icon {\n width: 17px !important;\n height: 17px !important;\n }\n\n span {\n font-size: 13px;\n }\n }\n\n @media only screen and (max-width: 768px) {\n .icon {\n width: 16px !important;\n height: 16px !important;\n }\n\n span {\n font-size: 12px;\n }\n }\n"])), function (props) { return props.theme.darkColor; }, function (props) { return props.theme.darkColor; }, function (props) { return props.theme.darkColor; }, function (props) { return props.theme.darkColor; }, function (props) { return props.theme.primaryColor; });
|
|
12
|
+
exports.Menu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: absolute;\n padding-right: clamp(5px, 0.78vw, 15px);\n min-width: 285px;\n width: 28px;\n padding: 0 0 15px 0;\n border-right: 1px solid #e1e1e1;\n display: flex;\n flex-direction: column;\n left: 0;\n top: 0;\n height: 100%;\n min-height: 100vh;\n z-index: 999999999;\n background: #fff;\n padding-top: 25px;\n transition: 0.7s;\n\n &.internal {\n position: fixed !important;\n top: 0;\n left: 0;\n transform: translateX(-120%);\n }\n\n &.expanded {\n transform: translateX(0);\n }\n\n &.regular_menu {\n transform: translateX(0);\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n border-radius: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background: #ccc;\n border-radius: 10px;\n }\n\n a {\n text-decoration: none;\n }\n\n ul {\n list-style-type: none;\n padding: 0;\n margin-top: 0;\n margin-bottom: clamp(10px, 0.75vw, 15px);\n\n li + li {\n margin-top: 4px;\n }\n\n ul {\n display: none;\n padding: 4px;\n\n * {\n color: ", " !important;\n }\n\n li {\n padding: 0;\n\n &.active {\n background: none;\n }\n\n ul {\n display: none;\n }\n\n .item-title {\n &:hover,\n &.active {\n background: #e1e1e1 !important;\n }\n }\n }\n }\n\n li {\n position: relative !important;\n z-index: 9999;\n width: 100%;\n\n ul {\n display: none;\n }\n\n &.active {\n background: ", ";\n border-radius: 5px;\n\n a,\n span {\n color: #fff;\n }\n\n svg {\n fill: #fff !important;\n }\n }\n\n &:hover {\n > ul {\n display: block;\n }\n }\n }\n }\n\n .title {\n color: #828282;\n margin-bottom: clamp(3px, 0.5vw, 10px);\n padding-left: clamp(5px, 0.78vw, 15px);\n\n .dark & {\n color: #4b5563;\n }\n }\n\n .item-title {\n border-radius: 5px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: transform 0.1s ease-in-out;\n font-weight: 400;\n padding: 0 clamp(5px, 0.78vw, 15px);\n height: clamp(34px, 2.08vw, 40px);\n display: flex;\n position: relative;\n z-index: 2222;\n\n > span {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n color: ", ";\n\n .icon {\n width: 20px;\n height: 20px;\n display: flex;\n transition: 0.1s linear;\n margin-left: 0;\n\n > svg {\n width: 100%;\n height: auto;\n fill: #828282;\n }\n }\n }\n\n &:hover {\n background-color: ", ";\n\n > span {\n color: #fff;\n margin-right: 0;\n transition: 0.3s linear;\n\n .icon {\n margin-left: 10px;\n\n > svg {\n fill: #fff !important;\n }\n }\n }\n }\n }\n\n .arrow {\n width: 7px;\n margin: 0 0 0 auto;\n display: flex;\n\n svg {\n width: 100%;\n height: auto;\n fill: currentColor;\n }\n }\n\n &.expanded_menu {\n width: 65px !important;\n min-width: 65px !important;\n padding-top: 41px;\n transition: 0.3s;\n position: absolute;\n\n .expand {\n position: absolute;\n top: 10px;\n right: -12px;\n width: 24px;\n height: 24px;\n border-radius: 100%;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n border: 0;\n\n svg {\n width: 5px;\n fill: #fff;\n height: auto;\n }\n }\n\n > ul {\n > li {\n > .item-title {\n .content-title {\n display: none;\n }\n\n .arrow {\n display: none;\n }\n }\n }\n }\n\n ul {\n .submenu {\n min-width: 265px;\n }\n }\n\n .item-title {\n padding-left: 22px;\n\n &:hover {\n > span {\n .icon {\n margin-left: 0;\n\n > svg {\n fill: #fff !important;\n }\n }\n }\n }\n }\n\n &.expanded {\n width: 240px !important;\n transition: 0.3s;\n\n .expand {\n svg {\n transform: rotate(180deg);\n }\n }\n\n > ul {\n > li {\n > .item-title {\n .content-title {\n display: block;\n }\n\n .arrow {\n display: block;\n }\n }\n }\n }\n }\n }\n\n @media only screen and (max-width: 1400px) {\n .icon {\n width: 14px !important;\n height: 14px !important;\n }\n\n span {\n font-size: 13.5px;\n }\n }\n\n @media only screen and (max-width: 1200px) {\n .icon {\n width: 17px !important;\n height: 17px !important;\n }\n\n span {\n font-size: 13px;\n }\n }\n\n @media only screen and (max-width: 768px) {\n .icon {\n width: 16px !important;\n height: 16px !important;\n }\n\n span {\n font-size: 12px;\n }\n }\n"], ["\n width: 100%;\n position: absolute;\n padding-right: clamp(5px, 0.78vw, 15px);\n min-width: 285px;\n width: 28px;\n padding: 0 0 15px 0;\n border-right: 1px solid #e1e1e1;\n display: flex;\n flex-direction: column;\n left: 0;\n top: 0;\n height: 100%;\n min-height: 100vh;\n z-index: 999999999;\n background: #fff;\n padding-top: 25px;\n transition: 0.7s;\n\n &.internal {\n position: fixed !important;\n top: 0;\n left: 0;\n transform: translateX(-120%);\n }\n\n &.expanded {\n transform: translateX(0);\n }\n\n &.regular_menu {\n transform: translateX(0);\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n border-radius: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background: #ccc;\n border-radius: 10px;\n }\n\n a {\n text-decoration: none;\n }\n\n ul {\n list-style-type: none;\n padding: 0;\n margin-top: 0;\n margin-bottom: clamp(10px, 0.75vw, 15px);\n\n li + li {\n margin-top: 4px;\n }\n\n ul {\n display: none;\n padding: 4px;\n\n * {\n color: ", " !important;\n }\n\n li {\n padding: 0;\n\n &.active {\n background: none;\n }\n\n ul {\n display: none;\n }\n\n .item-title {\n &:hover,\n &.active {\n background: #e1e1e1 !important;\n }\n }\n }\n }\n\n li {\n position: relative !important;\n z-index: 9999;\n width: 100%;\n\n ul {\n display: none;\n }\n\n &.active {\n background: ", ";\n border-radius: 5px;\n\n a,\n span {\n color: #fff;\n }\n\n svg {\n fill: #fff !important;\n }\n }\n\n &:hover {\n > ul {\n display: block;\n }\n }\n }\n }\n\n .title {\n color: #828282;\n margin-bottom: clamp(3px, 0.5vw, 10px);\n padding-left: clamp(5px, 0.78vw, 15px);\n\n .dark & {\n color: #4b5563;\n }\n }\n\n .item-title {\n border-radius: 5px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: transform 0.1s ease-in-out;\n font-weight: 400;\n padding: 0 clamp(5px, 0.78vw, 15px);\n height: clamp(34px, 2.08vw, 40px);\n display: flex;\n position: relative;\n z-index: 2222;\n\n > span {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n color: ", ";\n\n .icon {\n width: 20px;\n height: 20px;\n display: flex;\n transition: 0.1s linear;\n margin-left: 0;\n\n > svg {\n width: 100%;\n height: auto;\n fill: #828282;\n }\n }\n }\n\n &:hover {\n background-color: ", ";\n\n > span {\n color: #fff;\n margin-right: 0;\n transition: 0.3s linear;\n\n .icon {\n margin-left: 10px;\n\n > svg {\n fill: #fff !important;\n }\n }\n }\n }\n }\n\n .arrow {\n width: 7px;\n margin: 0 0 0 auto;\n display: flex;\n\n svg {\n width: 100%;\n height: auto;\n fill: currentColor;\n }\n }\n\n &.expanded_menu {\n width: 65px !important;\n min-width: 65px !important;\n padding-top: 41px;\n transition: 0.3s;\n position: absolute;\n\n .expand {\n position: absolute;\n top: 10px;\n right: -12px;\n width: 24px;\n height: 24px;\n border-radius: 100%;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n border: 0;\n\n svg {\n width: 5px;\n fill: #fff;\n height: auto;\n }\n }\n\n > ul {\n > li {\n > .item-title {\n .content-title {\n display: none;\n }\n\n .arrow {\n display: none;\n }\n }\n }\n }\n\n ul {\n .submenu {\n min-width: 265px;\n }\n }\n\n .item-title {\n padding-left: 22px;\n\n &:hover {\n > span {\n .icon {\n margin-left: 0;\n\n > svg {\n fill: #fff !important;\n }\n }\n }\n }\n }\n\n &.expanded {\n width: 240px !important;\n transition: 0.3s;\n\n .expand {\n svg {\n transform: rotate(180deg);\n }\n }\n\n > ul {\n > li {\n > .item-title {\n .content-title {\n display: block;\n }\n\n .arrow {\n display: block;\n }\n }\n }\n }\n }\n }\n\n @media only screen and (max-width: 1400px) {\n .icon {\n width: 14px !important;\n height: 14px !important;\n }\n\n span {\n font-size: 13.5px;\n }\n }\n\n @media only screen and (max-width: 1200px) {\n .icon {\n width: 17px !important;\n height: 17px !important;\n }\n\n span {\n font-size: 13px;\n }\n }\n\n @media only screen and (max-width: 768px) {\n .icon {\n width: 16px !important;\n height: 16px !important;\n }\n\n span {\n font-size: 12px;\n }\n }\n"])), function (props) { return props.theme.darkColor; }, function (props) { return props.theme.darkColor; }, function (props) { return props.theme.darkColor; }, function (props) { return props.theme.darkColor; }, function (props) { return props.theme.primaryColor; });
|
|
13
13
|
exports.SubMenu = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 5px;\n padding: 12px 8px;\n z-index: 24;\n position: absolute;\n top: ", ";\n bottom: ", ";\n left: 100%;\n z-index: 9999;\n background-color: #ffffff;\n border: 1px solid #d1d5db;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n transition: background-color 0.3s, border-color 0.3s;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n margin-bottom: 0 !important;\n"], ["\n border-radius: 5px;\n padding: 12px 8px;\n z-index: 24;\n position: absolute;\n top: ", ";\n bottom: ", ";\n left: 100%;\n z-index: 9999;\n background-color: #ffffff;\n border: 1px solid #d1d5db;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n transition: background-color 0.3s, border-color 0.3s;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n margin-bottom: 0 !important;\n"])), function (props) { return (props.$index <= 6 ? 0 : undefined); }, function (props) { return (props.$index > 6 ? 0 : undefined); });
|
|
14
14
|
exports.Overlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n height: 100dvh;\n position: fixed;\n z-index: 99999999;\n top: 0;\n left: 0;\n background: rgba(0, 0, 0, 0.5);\n"], ["\n width: 100%;\n height: 100dvh;\n position: fixed;\n z-index: 99999999;\n top: 0;\n left: 0;\n background: rgba(0, 0, 0, 0.5);\n"])));
|
|
15
15
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/system/presentation/components/layout/sidebar-menu/styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAsC;AAEzB,QAAA,IAAI,GAAG,2BAAM,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/system/presentation/components/layout/sidebar-menu/styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAsC;AAEzB,QAAA,IAAI,GAAG,2BAAM,CAAC,GAAG,kuKAAA,2iCA+Db,EAAgC,0fAiC3B,EAAgC,05BAkDvC,EAAgC,wTAkBrB,EAAgC,svBA4ChC,EAAmC,wqDA2G5D,KA5PgB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,SAAS,EAArB,CAAqB,EAiC3B,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,SAAS,EAArB,CAAqB,EAkDvC,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,SAAS,EAArB,CAAqB,EAkBrB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,SAAS,EAArB,CAAqB,EA4ChC,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,YAAY,EAAxB,CAAwB,EA2G5D;AAEY,QAAA,OAAO,GAAG,2BAAM,CAAC,EAAE,8hBAAoB,+FAK3C,EAA8C,eAC3C,EAA6C,yWAYxD,KAbQ,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAAnC,CAAmC,EAC3C,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAAlC,CAAkC,EAYxD;AACY,QAAA,OAAO,GAAG,2BAAM,CAAC,GAAG,8MAAA,2IAQhC,KAAA"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function ExpandedMenu(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.ExpandedMenu = void 0;
|
|
27
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
28
|
-
var context_1 = require("../../../../../../system/presentation/context/index.js");
|
|
29
|
-
var hooks_1 = require("../../../../../../system/presentation/hooks/index.js");
|
|
30
|
-
var ui_1 = require("../../../../../../ui/index.js");
|
|
31
|
-
var S = __importStar(require("../styles.js"));
|
|
32
|
-
var __1 = require("../index.js");
|
|
33
|
-
function ExpandedMenu() {
|
|
34
|
-
var _a;
|
|
35
|
-
var data = (0, hooks_1.useLoadMenu)().data;
|
|
36
|
-
var _b = (0, context_1.useMenu)(), settings = _b.settings, openMenu = _b.openMenu, setOpenMenu = _b.setOpenMenu;
|
|
37
|
-
var expandedMenu = settings.mode === 'expandedMenu';
|
|
38
|
-
var isPositionInternal = settings.position === 'internal';
|
|
39
|
-
return ((0, jsx_runtime_1.jsxs)(ui_1.Error, { name: 'Menu', children: [(0, jsx_runtime_1.jsx)("div", { id: 'ghost_menu_expanded', style: { width: '65px' } }), openMenu && isPositionInternal && (0, jsx_runtime_1.jsx)(S.Overlay, { onClick: function () { return setOpenMenu(false); } }), (0, jsx_runtime_1.jsxs)(S.Menu, { style: {
|
|
40
|
-
position: isPositionInternal ? 'fixed' : 'absolute',
|
|
41
|
-
}, id: 'sidebar', className: (openMenu ? 'menu expanded' : 'menu') + (expandedMenu ? ' expanded_menu' : ''), children: [!isPositionInternal && ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: 'expand', onClick: function () { return setOpenMenu(function (s) { return !s; }); }, children: (0, jsx_runtime_1.jsx)(ui_1.Icon, { name: 'IconArrowRight' }) })), (_a = data === null || data === void 0 ? void 0 : data.items) === null || _a === void 0 ? void 0 : _a.map(function (item, index) { return ((0, jsx_runtime_1.jsx)("ul", { children: (0, jsx_runtime_1.jsx)(__1.MenuItem, { item: item, index: index }, 'menu-item' + index + item.title) })); })] })] }));
|
|
42
|
-
}
|
|
43
|
-
exports.ExpandedMenu = ExpandedMenu;
|
|
44
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/system/presentation/components/layout/sidebar-menu/expanded-menu/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yDAAuD;AACvD,qDAAyD;AACzD,2BAAkC;AAElC,2CAA8B;AAC9B,wBAA6B;AAE7B,SAAgB,YAAY;;IAClB,IAAA,IAAI,GAAK,IAAA,mBAAW,GAAE,KAAlB,CAAkB;IACxB,IAAA,KAAsC,IAAA,iBAAO,GAAE,EAA7C,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAc,CAAA;IAErD,IAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,KAAK,cAAc,CAAA;IACrD,IAAM,kBAAkB,GAAG,QAAQ,CAAC,QAAQ,KAAK,UAAU,CAAA;IAE3D,OAAO,CACL,wBAAC,UAAK,IAAC,IAAI,EAAC,MAAM,aAChB,gCAAK,EAAE,EAAC,qBAAqB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAQ,EAE7D,QAAQ,IAAI,kBAAkB,IAAI,uBAAC,CAAC,CAAC,OAAO,IAAC,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,KAAK,CAAC,EAAlB,CAAkB,GAAI,EAEnF,wBAAC,CAAC,CAAC,IAAI,IACL,KAAK,EAAE;oBACL,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU;iBACpD,EACD,EAAE,EAAC,SAAS,EACZ,SAAS,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,aAExF,CAAC,kBAAkB,IAAI,CACtB,mCAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,EAAF,CAAE,CAAC,EAAtB,CAAsB,YAC5E,uBAAC,SAAI,IAAC,IAAI,EAAC,gBAAgB,GAAG,GACvB,CACV,EAEA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,0CAAE,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,IAAK,OAAA,CACjC,yCACE,uBAAC,YAAQ,IAAwC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAA1D,WAAW,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,CAA8B,GAC1E,CACN,EAJkC,CAIlC,CAAC,IACK,IACH,CACT,CAAA;AACH,CAAC;AAlCD,oCAkCC"}
|