@omniumretail/component-library 1.0.65 → 1.0.67

package/dist/bundle.js

@@ -4933,7 +4933,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\"sidebar\":\"x_X2axa502qG690LM5DM\",\"sidebarClosed\":\"iEepDtDljm_PdBbkR3JA\",\"sidebarItem\":\"dcC_pqHYFgU16huYkWP5\",\"sidebarHasIcon\":\"spPPzIkYjj024FZcGckd\",\"sidebarItemActive\":\"MVw3JKiEvATmRxAAyFA8\",\"toggle\":\"ULIAFOHHnjA6viVps4dE\"});//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvY29tcG9uZW50cy9TaWRlYmFyL3N0eWxlcy5tb2R1bGUuc2Nzcy5qcyIsIm1hcHBpbmdzIjoiO0FBQUE7QUFDQSIsInNvdXJjZXMiOlsid2VicGFjazovL2xpYi8uL3NyYy9jb21wb25lbnRzL1NpZGViYXIvc3R5bGVzLm1vZHVsZS5zY3NzPzQ4NjYiXSwic291cmNlc0NvbnRlbnQiOlsiLy8gZXh0cmFjdGVkIGJ5IG1pbmktY3NzLWV4dHJhY3QtcGx1Z2luXG5leHBvcnQgZGVmYXVsdCB7XCJzaWRlYmFyXCI6XCJ4X1gyYXhhNTAycUc2OTBMTTVETVwiLFwic2lkZWJhckNsb3NlZFwiOlwiaUVlcER0RGxqbV9QZEJia1IzSkFcIixcInNpZGViYXJJdGVtXCI6XCJkY0NfcHFIWUZnVTE2aHVZa1dQNVwiLFwic2lkZWJhckhhc0ljb25cIjpcInNwUFB6SWtZamowMjRGWmNHY2tkXCIsXCJzaWRlYmFySXRlbUFjdGl2ZVwiOlwiTVZ3M0pLaUV2QVRtUnhBQXlGQThcIixcInRvZ2dsZVwiOlwiVUxJQUZPSEhuakE2dmlWcHM0ZEVcIn07Il0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./src/components/Sidebar/styles.module.scss\n");
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\"sidebar\":\"x_X2axa502qG690LM5DM\",\"sidebarClosed\":\"iEepDtDljm_PdBbkR3JA\",\"sidebarItem\":\"dcC_pqHYFgU16huYkWP5\",\"sidebarHasIcon\":\"spPPzIkYjj024FZcGckd\",\"sidebarItemActive\":\"MVw3JKiEvATmRxAAyFA8\",\"toggle\":\"ULIAFOHHnjA6viVps4dE\",\"subMenu\":\"PxCQRuiQJ_ybUIGB2l5f\",\"subMenuItem\":\"N7GunVO7DCC1e16M_hkm\"});//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvY29tcG9uZW50cy9TaWRlYmFyL3N0eWxlcy5tb2R1bGUuc2Nzcy5qcyIsIm1hcHBpbmdzIjoiO0FBQUE7QUFDQSIsInNvdXJjZXMiOlsid2VicGFjazovL2xpYi8uL3NyYy9jb21wb25lbnRzL1NpZGViYXIvc3R5bGVzLm1vZHVsZS5zY3NzPzQ4NjYiXSwic291cmNlc0NvbnRlbnQiOlsiLy8gZXh0cmFjdGVkIGJ5IG1pbmktY3NzLWV4dHJhY3QtcGx1Z2luXG5leHBvcnQgZGVmYXVsdCB7XCJzaWRlYmFyXCI6XCJ4X1gyYXhhNTAycUc2OTBMTTVETVwiLFwic2lkZWJhckNsb3NlZFwiOlwiaUVlcER0RGxqbV9QZEJia1IzSkFcIixcInNpZGViYXJJdGVtXCI6XCJkY0NfcHFIWUZnVTE2aHVZa1dQNVwiLFwic2lkZWJhckhhc0ljb25cIjpcInNwUFB6SWtZamowMjRGWmNHY2tkXCIsXCJzaWRlYmFySXRlbUFjdGl2ZVwiOlwiTVZ3M0pLaUV2QVRtUnhBQXlGQThcIixcInRvZ2dsZVwiOlwiVUxJQUZPSEhuakE2dmlWcHM0ZEVcIixcInN1Yk1lbnVcIjpcIlB4Q1FSdWlRSl95YlVJR0IybDVmXCIsXCJzdWJNZW51SXRlbVwiOlwiTjdHdW5WTzdEQ0MxZTE2TV9oa21cIn07Il0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./src/components/Sidebar/styles.module.scss\n");
 
 /***/ }),
 
@@ -11014,7 +11014,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Sidebar\": function() { return /* binding */ Sidebar; }\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* harmony import */ var _styles_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./styles.module.scss */ \"./src/components/Sidebar/styles.module.scss\");\n/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\");\n/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _ant_design_icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @ant-design/icons */ \"./node_modules/@ant-design/icons/es/icons/DoubleRightOutlined.js\");\n/* harmony import */ var _ant_design_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @ant-design/icons */ \"./node_modules/@ant-design/icons/es/icons/DoubleLeftOutlined.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);\nvar __assign = (undefined && undefined.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\n\n\n\n\n\nvar Sidebar = function (props) {\n    var _a;\n    var _b = props.isOpen, isOpen = _b === void 0 ? false : _b, links = props.links, navigateFunction = props.navigateFunction;\n    var _c = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(isOpen), sidebarOpen = _c[0], setSidebarOpen = _c[1];\n    var sidebarClasses = classnames__WEBPACK_IMPORTED_MODULE_2___default()((_a = {},\n        _a[_styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].sidebarClosed] = !sidebarOpen,\n        _a), _styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].sidebar);\n    var doSomething = function () {\n        setSidebarOpen(!sidebarOpen);\n    };\n    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: sidebarClasses }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toggle, onClick: doSomething }, { children: sidebarOpen ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ant_design_icons__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {}) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ant_design_icons__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {}) })), links &&\n                links.map(function (link, index) {\n                    var _a;\n                    var label = link.label, targetRoute = link.targetRoute, active = link.active, icon = link.icon;\n                    var sidebarItemClasses = classnames__WEBPACK_IMPORTED_MODULE_2___default()((_a = {},\n                        _a[_styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].sidebarItemActive] = active,\n                        _a[_styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].sidebarHasIcon] = icon,\n                        _a), _styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].sidebarItem);\n                    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: sidebarItemClasses, onClick: function () { return navigateFunction(targetRoute); } }, { children: icon ? (sidebarOpen ? label : icon) : label }), index));\n                })] })));\n};\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvY29tcG9uZW50cy9TaWRlYmFyL2luZGV4LnRzeC5qcyIsIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSIsInNvdXJjZXMiOlsid2VicGFjazovL2xpYi8uL3NyYy9jb21wb25lbnRzL1NpZGViYXIvaW5kZXgudHN4PzQyOWQiXSwic291cmNlc0NvbnRlbnQiOlsidmFyIF9fYXNzaWduID0gKHRoaXMgJiYgdGhpcy5fX2Fzc2lnbikgfHwgZnVuY3Rpb24gKCkge1xuICAgIF9fYXNzaWduID0gT2JqZWN0LmFzc2lnbiB8fCBmdW5jdGlvbih0KSB7XG4gICAgICAgIGZvciAodmFyIHMsIGkgPSAxLCBuID0gYXJndW1lbnRzLmxlbmd0aDsgaSA8IG47IGkrKykge1xuICAgICAgICAgICAgcyA9IGFyZ3VtZW50c1tpXTtcbiAgICAgICAgICAgIGZvciAodmFyIHAgaW4gcykgaWYgKE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHkuY2FsbChzLCBwKSlcbiAgICAgICAgICAgICAgICB0W3BdID0gc1twXTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gdDtcbiAgICB9O1xuICAgIHJldHVybiBfX2Fzc2lnbi5hcHBseSh0aGlzLCBhcmd1bWVudHMpO1xufTtcbmltcG9ydCB7IGpzeCBhcyBfanN4LCBqc3hzIGFzIF9qc3hzIH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XG5pbXBvcnQgc3R5bGVzIGZyb20gJy4vc3R5bGVzLm1vZHVsZS5zY3NzJztcbmltcG9ydCBjbGFzc05hbWVzIGZyb20gJ2NsYXNzbmFtZXMnO1xuaW1wb3J0IHsgRG91YmxlTGVmdE91dGxpbmVkLCBEb3VibGVSaWdodE91dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMnO1xuaW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5leHBvcnQgdmFyIFNpZGViYXIgPSBmdW5jdGlvbiAocHJvcHMpIHtcbiAgICB2YXIgX2E7XG4gICAgdmFyIF9iID0gcHJvcHMuaXNPcGVuLCBpc09wZW4gPSBfYiA9PT0gdm9pZCAwID8gZmFsc2UgOiBfYiwgbGlua3MgPSBwcm9wcy5saW5rcywgbmF2aWdhdGVGdW5jdGlvbiA9IHByb3BzLm5hdmlnYXRlRnVuY3Rpb247XG4gICAgdmFyIF9jID0gdXNlU3RhdGUoaXNPcGVuKSwgc2lkZWJhck9wZW4gPSBfY1swXSwgc2V0U2lkZWJhck9wZW4gPSBfY1sxXTtcbiAgICB2YXIgc2lkZWJhckNsYXNzZXMgPSBjbGFzc05hbWVzKChfYSA9IHt9LFxuICAgICAgICBfYVtzdHlsZXMuc2lkZWJhckNsb3NlZF0gPSAhc2lkZWJhck9wZW4sXG4gICAgICAgIF9hKSwgc3R5bGVzLnNpZGViYXIpO1xuICAgIHZhciBkb1NvbWV0aGluZyA9IGZ1bmN0aW9uICgpIHtcbiAgICAgICAgc2V0U2lkZWJhck9wZW4oIXNpZGViYXJPcGVuKTtcbiAgICB9O1xuICAgIHJldHVybiAoX2pzeHMoXCJkaXZcIiwgX19hc3NpZ24oeyBjbGFzc05hbWU6IHNpZGViYXJDbGFzc2VzIH0sIHsgY2hpbGRyZW46IFtfanN4KFwiZGl2XCIsIF9fYXNzaWduKHsgY2xhc3NOYW1lOiBzdHlsZXMudG9nZ2xlLCBvbkNsaWNrOiBkb1NvbWV0aGluZyB9LCB7IGNoaWxkcmVuOiBzaWRlYmFyT3BlbiA/IF9qc3goRG91YmxlUmlnaHRPdXRsaW5lZCwge30pIDogX2pzeChEb3VibGVMZWZ0T3V0bGluZWQsIHt9KSB9KSksIGxpbmtzICYmXG4gICAgICAgICAgICAgICAgbGlua3MubWFwKGZ1bmN0aW9uIChsaW5rLCBpbmRleCkge1xuICAgICAgICAgICAgICAgICAgICB2YXIgX2E7XG4gICAgICAgICAgICAgICAgICAgIHZhciBsYWJlbCA9IGxpbmsubGFiZWwsIHRhcmdldFJvdXRlID0gbGluay50YXJnZXRSb3V0ZSwgYWN0aXZlID0gbGluay5hY3RpdmUsIGljb24gPSBsaW5rLmljb247XG4gICAgICAgICAgICAgICAgICAgIHZhciBzaWRlYmFySXRlbUNsYXNzZXMgPSBjbGFzc05hbWVzKChfYSA9IHt9LFxuICAgICAgICAgICAgICAgICAgICAgICAgX2Fbc3R5bGVzLnNpZGViYXJJdGVtQWN0aXZlXSA9IGFjdGl2ZSxcbiAgICAgICAgICAgICAgICAgICAgICAgIF9hW3N0eWxlcy5zaWRlYmFySGFzSWNvbl0gPSBpY29uLFxuICAgICAgICAgICAgICAgICAgICAgICAgX2EpLCBzdHlsZXMuc2lkZWJhckl0ZW0pO1xuICAgICAgICAgICAgICAgICAgICByZXR1cm4gKF9qc3goXCJkaXZcIiwgX19hc3NpZ24oeyBjbGFzc05hbWU6IHNpZGViYXJJdGVtQ2xhc3Nlcywgb25DbGljazogZnVuY3Rpb24gKCkgeyByZXR1cm4gbmF2aWdhdGVGdW5jdGlvbih0YXJnZXRSb3V0ZSk7IH0gfSwgeyBjaGlsZHJlbjogaWNvbiA/IChzaWRlYmFyT3BlbiA/IGxhYmVsIDogaWNvbikgOiBsYWJlbCB9KSwgaW5kZXgpKTtcbiAgICAgICAgICAgICAgICB9KV0gfSkpKTtcbn07XG4iXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./src/components/Sidebar/index.tsx\n");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Sidebar\": function() { return /* binding */ Sidebar; }\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* harmony import */ var _styles_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./styles.module.scss */ \"./src/components/Sidebar/styles.module.scss\");\n/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\");\n/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _ant_design_icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @ant-design/icons */ \"./node_modules/@ant-design/icons/es/icons/DoubleRightOutlined.js\");\n/* harmony import */ var _ant_design_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @ant-design/icons */ \"./node_modules/@ant-design/icons/es/icons/DoubleLeftOutlined.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);\nvar __assign = (undefined && undefined.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\n\n\n\n\n\nvar Sidebar = function (props) {\n    var _a;\n    var _b = props.isOpen, isOpen = _b === void 0 ? false : _b, links = props.links, navigateFunction = props.navigateFunction;\n    var _c = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(isOpen), sidebarOpen = _c[0], setSidebarOpen = _c[1];\n    var _d = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(-1), activeSubMenuIndex = _d[0], setActiveSubMenuIndex = _d[1];\n    var sidebarClasses = classnames__WEBPACK_IMPORTED_MODULE_2___default()((_a = {},\n        _a[_styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].sidebarClosed] = !sidebarOpen,\n        _a), _styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].sidebar);\n    var toggleSidebar = function () {\n        setSidebarOpen(!sidebarOpen);\n    };\n    var toggleSubMenu = function (index) {\n        setActiveSubMenuIndex(activeSubMenuIndex === index ? -1 : index);\n    };\n    var isLinkActive = function (link) {\n        if (link.sublinks) {\n            return link.sublinks.some(function (sublink) { return sublink.active; });\n        }\n        return link.active;\n    };\n    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: sidebarClasses }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toggle, onClick: toggleSidebar }, { children: sidebarOpen ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ant_design_icons__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {}) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ant_design_icons__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {}) })), links &&\n                links.map(function (link, index) {\n                    var _a;\n                    var label = link.label, targetRoute = link.targetRoute, icon = link.icon, sublinks = link.sublinks;\n                    var isActive = isLinkActive(link);\n                    var isActiveSubMenu = activeSubMenuIndex === index;\n                    var sidebarItemClasses = classnames__WEBPACK_IMPORTED_MODULE_2___default()((_a = {},\n                        _a[_styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].sidebarItemActive] = isActive,\n                        _a[_styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].sidebarHasIcon] = icon,\n                        _a), _styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].sidebarItem);\n                    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: sidebarItemClasses, onClick: function () {\n                            if (sublinks) {\n                                toggleSubMenu(index);\n                            }\n                            else {\n                                navigateFunction(targetRoute);\n                            }\n                        }, onMouseEnter: function () { return toggleSubMenu(index); }, onMouseLeave: function () { return toggleSubMenu(-1); } }, { children: [icon ? (sidebarOpen ? label : icon) : label, sublinks && isActiveSubMenu && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: \"\".concat(sidebarOpen ? _styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].subMenu : '') }, { children: sublinks.map(function (sublink, subindex) {\n                                    var _a;\n                                    var subLabel = sublink.label, subTargetRoute = sublink.targetRoute, subActive = sublink.active, subIcon = sublink.icon;\n                                    var subLinkClasses = classnames__WEBPACK_IMPORTED_MODULE_2___default()((_a = {},\n                                        _a[_styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].sidebarItemActive] = subActive,\n                                        _a[_styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].sidebarHasIcon] = icon,\n                                        _a), _styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].subMenuItem);\n                                    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: \"\".concat(_styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].sidebarItem, \" \").concat(subLinkClasses), onClick: function () { return navigateFunction(subTargetRoute); } }, { children: subIcon ? (sidebarOpen ? subLabel : subIcon) : (sidebarOpen ? subLabel : subLabel.charAt(0)) }), subindex));\n                                }) })))] }), index));\n                })] })));\n};\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvY29tcG9uZW50cy9TaWRlYmFyL2luZGV4LnRzeC5qcyIsIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSIsInNvdXJjZXMiOlsid2VicGFjazovL2xpYi8uL3NyYy9jb21wb25lbnRzL1NpZGViYXIvaW5kZXgudHN4PzQyOWQiXSwic291cmNlc0NvbnRlbnQiOlsidmFyIF9fYXNzaWduID0gKHRoaXMgJiYgdGhpcy5fX2Fzc2lnbikgfHwgZnVuY3Rpb24gKCkge1xuICAgIF9fYXNzaWduID0gT2JqZWN0LmFzc2lnbiB8fCBmdW5jdGlvbih0KSB7XG4gICAgICAgIGZvciAodmFyIHMsIGkgPSAxLCBuID0gYXJndW1lbnRzLmxlbmd0aDsgaSA8IG47IGkrKykge1xuICAgICAgICAgICAgcyA9IGFyZ3VtZW50c1tpXTtcbiAgICAgICAgICAgIGZvciAodmFyIHAgaW4gcykgaWYgKE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHkuY2FsbChzLCBwKSlcbiAgICAgICAgICAgICAgICB0W3BdID0gc1twXTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gdDtcbiAgICB9O1xuICAgIHJldHVybiBfX2Fzc2lnbi5hcHBseSh0aGlzLCBhcmd1bWVudHMpO1xufTtcbmltcG9ydCB7IGpzeCBhcyBfanN4LCBqc3hzIGFzIF9qc3hzIH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XG5pbXBvcnQgc3R5bGVzIGZyb20gJy4vc3R5bGVzLm1vZHVsZS5zY3NzJztcbmltcG9ydCBjbGFzc05hbWVzIGZyb20gJ2NsYXNzbmFtZXMnO1xuaW1wb3J0IHsgRG91YmxlTGVmdE91dGxpbmVkLCBEb3VibGVSaWdodE91dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMnO1xuaW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5leHBvcnQgdmFyIFNpZGViYXIgPSBmdW5jdGlvbiAocHJvcHMpIHtcbiAgICB2YXIgX2E7XG4gICAgdmFyIF9iID0gcHJvcHMuaXNPcGVuLCBpc09wZW4gPSBfYiA9PT0gdm9pZCAwID8gZmFsc2UgOiBfYiwgbGlua3MgPSBwcm9wcy5saW5rcywgbmF2aWdhdGVGdW5jdGlvbiA9IHByb3BzLm5hdmlnYXRlRnVuY3Rpb247XG4gICAgdmFyIF9jID0gdXNlU3RhdGUoaXNPcGVuKSwgc2lkZWJhck9wZW4gPSBfY1swXSwgc2V0U2lkZWJhck9wZW4gPSBfY1sxXTtcbiAgICB2YXIgX2QgPSB1c2VTdGF0ZSgtMSksIGFjdGl2ZVN1Yk1lbnVJbmRleCA9IF9kWzBdLCBzZXRBY3RpdmVTdWJNZW51SW5kZXggPSBfZFsxXTtcbiAgICB2YXIgc2lkZWJhckNsYXNzZXMgPSBjbGFzc05hbWVzKChfYSA9IHt9LFxuICAgICAgICBfYVtzdHlsZXMuc2lkZWJhckNsb3NlZF0gPSAhc2lkZWJhck9wZW4sXG4gICAgICAgIF9hKSwgc3R5bGVzLnNpZGViYXIpO1xuICAgIHZhciB0b2dnbGVTaWRlYmFyID0gZnVuY3Rpb24gKCkge1xuICAgICAgICBzZXRTaWRlYmFyT3Blbighc2lkZWJhck9wZW4pO1xuICAgIH07XG4gICAgdmFyIHRvZ2dsZVN1Yk1lbnUgPSBmdW5jdGlvbiAoaW5kZXgpIHtcbiAgICAgICAgc2V0QWN0aXZlU3ViTWVudUluZGV4KGFjdGl2ZVN1Yk1lbnVJbmRleCA9PT0gaW5kZXggPyAtMSA6IGluZGV4KTtcbiAgICB9O1xuICAgIHZhciBpc0xpbmtBY3RpdmUgPSBmdW5jdGlvbiAobGluaykge1xuICAgICAgICBpZiAobGluay5zdWJsaW5rcykge1xuICAgICAgICAgICAgcmV0dXJuIGxpbmsuc3VibGlua3Muc29tZShmdW5jdGlvbiAoc3VibGluaykgeyByZXR1cm4gc3VibGluay5hY3RpdmU7IH0pO1xuICAgICAgICB9XG4gICAgICAgIHJldHVybiBsaW5rLmFjdGl2ZTtcbiAgICB9O1xuICAgIHJldHVybiAoX2pzeHMoXCJkaXZcIiwgX19hc3NpZ24oeyBjbGFzc05hbWU6IHNpZGViYXJDbGFzc2VzIH0sIHsgY2hpbGRyZW46IFtfanN4KFwiZGl2XCIsIF9fYXNzaWduKHsgY2xhc3NOYW1lOiBzdHlsZXMudG9nZ2xlLCBvbkNsaWNrOiB0b2dnbGVTaWRlYmFyIH0sIHsgY2hpbGRyZW46IHNpZGViYXJPcGVuID8gX2pzeChEb3VibGVSaWdodE91dGxpbmVkLCB7fSkgOiBfanN4KERvdWJsZUxlZnRPdXRsaW5lZCwge30pIH0pKSwgbGlua3MgJiZcbiAgICAgICAgICAgICAgICBsaW5rcy5tYXAoZnVuY3Rpb24gKGxpbmssIGluZGV4KSB7XG4gICAgICAgICAgICAgICAgICAgIHZhciBfYTtcbiAgICAgICAgICAgICAgICAgICAgdmFyIGxhYmVsID0gbGluay5sYWJlbCwgdGFyZ2V0Um91dGUgPSBsaW5rLnRhcmdldFJvdXRlLCBpY29uID0gbGluay5pY29uLCBzdWJsaW5rcyA9IGxpbmsuc3VibGlua3M7XG4gICAgICAgICAgICAgICAgICAgIHZhciBpc0FjdGl2ZSA9IGlzTGlua0FjdGl2ZShsaW5rKTtcbiAgICAgICAgICAgICAgICAgICAgdmFyIGlzQWN0aXZlU3ViTWVudSA9IGFjdGl2ZVN1Yk1lbnVJbmRleCA9PT0gaW5kZXg7XG4gICAgICAgICAgICAgICAgICAgIHZhciBzaWRlYmFySXRlbUNsYXNzZXMgPSBjbGFzc05hbWVzKChfYSA9IHt9LFxuICAgICAgICAgICAgICAgICAgICAgICAgX2Fbc3R5bGVzLnNpZGViYXJJdGVtQWN0aXZlXSA9IGlzQWN0aXZlLFxuICAgICAgICAgICAgICAgICAgICAgICAgX2Fbc3R5bGVzLnNpZGViYXJIYXNJY29uXSA9IGljb24sXG4gICAgICAgICAgICAgICAgICAgICAgICBfYSksIHN0eWxlcy5zaWRlYmFySXRlbSk7XG4gICAgICAgICAgICAgICAgICAgIHJldHVybiAoX2pzeHMoXCJkaXZcIiwgX19hc3NpZ24oeyBjbGFzc05hbWU6IHNpZGViYXJJdGVtQ2xhc3Nlcywgb25DbGljazogZnVuY3Rpb24gKCkge1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlmIChzdWJsaW5rcykge1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0b2dnbGVTdWJNZW51KGluZGV4KTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG5hdmlnYXRlRnVuY3Rpb24odGFyZ2V0Um91dGUpO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgICAgIH0sIG9uTW91c2VFbnRlcjogZnVuY3Rpb24gKCkgeyByZXR1cm4gdG9nZ2xlU3ViTWVudShpbmRleCk7IH0sIG9uTW91c2VMZWF2ZTogZnVuY3Rpb24gKCkgeyByZXR1cm4gdG9nZ2xlU3ViTWVudSgtMSk7IH0gfSwgeyBjaGlsZHJlbjogW2ljb24gPyAoc2lkZWJhck9wZW4gPyBsYWJlbCA6IGljb24pIDogbGFiZWwsIHN1YmxpbmtzICYmIGlzQWN0aXZlU3ViTWVudSAmJiAoX2pzeChcImRpdlwiLCBfX2Fzc2lnbih7IGNsYXNzTmFtZTogXCJcIi5jb25jYXQoc2lkZWJhck9wZW4gPyBzdHlsZXMuc3ViTWVudSA6ICcnKSB9LCB7IGNoaWxkcmVuOiBzdWJsaW5rcy5tYXAoZnVuY3Rpb24gKHN1YmxpbmssIHN1YmluZGV4KSB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB2YXIgX2E7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB2YXIgc3ViTGFiZWwgPSBzdWJsaW5rLmxhYmVsLCBzdWJUYXJnZXRSb3V0ZSA9IHN1YmxpbmsudGFyZ2V0Um91dGUsIHN1YkFjdGl2ZSA9IHN1YmxpbmsuYWN0aXZlLCBzdWJJY29uID0gc3VibGluay5pY29uO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdmFyIHN1YkxpbmtDbGFzc2VzID0gY2xhc3NOYW1lcygoX2EgPSB7fSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBfYVtzdHlsZXMuc2lkZWJhckl0ZW1BY3RpdmVdID0gc3ViQWN0aXZlLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIF9hW3N0eWxlcy5zaWRlYmFySGFzSWNvbl0gPSBpY29uLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIF9hKSwgc3R5bGVzLnN1Yk1lbnVJdGVtKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJldHVybiAoX2pzeChcImRpdlwiLCBfX2Fzc2lnbih7IGNsYXNzTmFtZTogXCJcIi5jb25jYXQoc3R5bGVzLnNpZGViYXJJdGVtLCBcIiBcIikuY29uY2F0KHN1YkxpbmtDbGFzc2VzKSwgb25DbGljazogZnVuY3Rpb24gKCkgeyByZXR1cm4gbmF2aWdhdGVGdW5jdGlvbihzdWJUYXJnZXRSb3V0ZSk7IH0gfSwgeyBjaGlsZHJlbjogc3ViSWNvbiA/IChzaWRlYmFyT3BlbiA/IHN1YkxhYmVsIDogc3ViSWNvbikgOiAoc2lkZWJhck9wZW4gPyBzdWJMYWJlbCA6IHN1YkxhYmVsLmNoYXJBdCgwKSkgfSksIHN1YmluZGV4KSk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0pIH0pKSldIH0pLCBpbmRleCkpO1xuICAgICAgICAgICAgICAgIH0pXSB9KSkpO1xufTtcbiJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./src/components/Sidebar/index.tsx\n");
 
 /***/ }),
 

package/dist/main.css

@@ -66,17 +66,22 @@
 }
 @media (max-width: 767px) {
   .UxfXOleP69PjM5rFOMTD {
-    padding-top: 32px;
+    padding-top: 6px;
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
 }
 .UxfXOleP69PjM5rFOMTD .LzcTbjk0fp70tXlKd3eS {
-  font-size: var(--font-size-body-4);
+  font-size: var(--font-size-body-3);
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
 }
+@media (min-width: 768px) {
+  .UxfXOleP69PjM5rFOMTD .LzcTbjk0fp70tXlKd3eS {
+    font-size: var(--font-size-body-4);
+  }
+}
 .UxfXOleP69PjM5rFOMTD .gn06XRZhFG00HaVjAqNc {
   align-self: center;
 }
@@ -96,6 +101,11 @@
 .UxfXOleP69PjM5rFOMTD .U5tZ7kRlrIHUKsuduD1S {
   justify-self: end;
 }
+@media (max-width: 767px) {
+  .UxfXOleP69PjM5rFOMTD .U5tZ7kRlrIHUKsuduD1S .ant-btn span:not([role=img]) {
+    display: none;
+  }
+}
 /*!*************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Link/styles.module.scss ***!
   \*************************************************************************************************************************************************************/
@@ -528,7 +538,7 @@
 }
 
 .MVw3JKiEvATmRxAAyFA8 {
-  color: var(--color-orange);
+  color: var(--color-orange) !important;
 }
 
 .ULIAFOHHnjA6viVps4dE {
@@ -546,6 +556,19 @@
 .ULIAFOHHnjA6viVps4dE > * {
   font-size: var(--font-size-body-5);
 }
+
+.PxCQRuiQJ_ybUIGB2l5f {
+  margin-top: 8px;
+  padding-left: 16px;
+}
+
+.N7GunVO7DCC1e16M_hkm {
+  color: var(--color-black);
+  padding: 8px;
+  margin-top: 8px;
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+}
 /*!***************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Switch/styles.module.scss ***!
   \***************************************************************************************************************************************************************/
@@ -861,35 +884,43 @@ Label {
 .Q4flbvKEPN6Jx9Cob22I {
   background: #EBECED;
   overflow: auto;
+  padding: 20px 20px 0 20px;
+}
+@media (min-width: 768px) {
+  .Q4flbvKEPN6Jx9Cob22I {
+    padding: 20px;
+  }
 }
 
 .hK3soC6m563VuiLnNutq {
   background: var(--color-white);
   overflow: auto;
+  padding: 0 20px 20px 20px;
 }
-
-.Q4flbvKEPN6Jx9Cob22I,
-.hK3soC6m563VuiLnNutq {
-  padding: 20px;
+@media (min-width: 768px) {
+  .hK3soC6m563VuiLnNutq {
+    padding: 20px;
+  }
 }
 
 .guqqOMHeZE56Bg2p5Ad8 {
-  font-size: var(--font-size-body-3);
+  font-size: var(--font-size-body-2);
   color: var(--color-blue);
-  margin-bottom: 36px;
+  margin-bottom: 12px;
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
 }
 @media (min-width: 768px) {
   .guqqOMHeZE56Bg2p5Ad8 {
     font-size: var(--font-size-body-4);
+    margin-bottom: 36px;
   }
 }
 
 .wRCQxnQc_MZGDeiY1bcL {
   padding-bottom: 15px;
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-body-3);
+  font-size: var(--font-size-body-2);
 }
 @media (min-width: 768px) {
   .wRCQxnQc_MZGDeiY1bcL {
@@ -920,7 +951,12 @@ Label {
 }
 
 .GEZDeWAneRLnZQyf4y9l {
-  margin-bottom: 24px;
+  margin-bottom: 16px;
+}
+@media (min-width: 768px) {
+  .GEZDeWAneRLnZQyf4y9l {
+    margin-bottom: 24px;
+  }
 }
 
 .YcOvMLXE7vKR2Y0_BPRr {
@@ -939,14 +975,23 @@ Label {
   font-size: var(--font-size-body-2);
   font-weight: var(--font-weight-light);
   color: var(--color-black);
-  font-size: var(--font-size-body-3);
+}
+@media (min-width: 768px) {
+  .vlMh_CCr45wbKV4fMhJx {
+    font-size: var(--font-size-body-3);
+  }
 }
 
 .NZ_ohAxNxhxZsCBr2PRA {
   display: flex;
   flex-direction: row;
   gap: 12px;
-  margin-bottom: 36px;
+  margin-bottom: 24px;
+}
+@media (min-width: 768px) {
+  .NZ_ohAxNxhxZsCBr2PRA {
+    margin-bottom: 36px;
+  }
 }
 
 .CArVrMs2ac6JvM1VGLSw {
@@ -984,7 +1029,11 @@ Label {
   font-size: var(--font-size-body-2);
   font-weight: var(--font-weight-semibold);
   margin-bottom: 8px;
-  font-size: var(--font-size-body-3);
+}
+@media (min-width: 768px) {
+  .xdLvKgnXC4tm2aa6tAap {
+    font-size: var(--font-size-body-3);
+  }
 }
 
 .r5obiTduSUBq1uL7oceW {

package/dist/types/components/Sidebar/index.d.ts

@@ -4,6 +4,8 @@ export interface Links {
     targetRoute: string;
     active: boolean;
     icon?: React.ReactNode;
+    sublinks?: Links[];
+    activeSubMenu?: boolean;
 }
 export interface SidebarProps {
     isOpen?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.0.65",
+  "version": "1.0.67",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/components/CategoryResponse/styles.module.scss

@@ -16,34 +16,40 @@
 .sidebarWrapper {
     background: #EBECED;
     overflow: auto;
+    padding: 20px 20px 0 20px;
+
+    @media(min-width: 768px) {
+        padding: 20px;
+    }
 }
 
 .contentWrapper {
     background: var(--color-white);
     overflow: auto;
-}
+    padding: 0 20px 20px 20px;
 
-.sidebarWrapper,
-.contentWrapper {
-    padding: 20px;
+    @media(min-width: 768px) {
+        padding: 20px;
+    }
 }
 
 .title {
-    font-size: var(--font-size-body-3);
+    font-size: var(--font-size-body-2);
     color: var(--color-blue);
-    margin-bottom: 36px;
+    margin-bottom: 12px;
     font-weight: var(--font-weight-semibold);
     text-transform: uppercase;
 
     @media(min-width: 768px) {
         font-size: var(--font-size-body-4);
+        margin-bottom: 36px;
     }
 }
 
 .label {
     padding-bottom: 15px;
     font-weight: var(--font-weight-bold);
-    font-size: var(--font-size-body-3);
+    font-size: var(--font-size-body-2);
 
     @media(min-width: 768px) {
         font-size: var(--font-size-body-4);
@@ -79,7 +85,11 @@
 }
 
 .details {
-    margin-bottom: 24px;
+    margin-bottom: 16px;
+
+    @media(min-width: 768px) {
+        margin-bottom: 24px;
+    }
 }
 
 .categoryName {
@@ -98,7 +108,9 @@
     font-weight: var(--font-weight-light);
     color: var(--color-black);
 
-    font-size: var(--font-size-body-3);
+    @media(min-width: 768px) {
+        font-size: var(--font-size-body-3);
+    }
 }
 
 // Questions
@@ -106,7 +118,11 @@
     display: flex;
     flex-direction: row;
     gap: 12px;
-    margin-bottom: 36px;
+    margin-bottom: 24px;
+
+    @media(min-width: 768px) {
+        margin-bottom: 36px;
+    }
 }
 
 .questionWrapperOpenAnswer {
@@ -151,7 +167,9 @@
     font-weight: var(--font-weight-semibold);
     margin-bottom: 8px;
 
-    font-size: var(--font-size-body-3);
+    @media(min-width: 768px) {
+        font-size: var(--font-size-body-3);
+    }
 }
 
 .description {

package/src/components/Navigation/styles.module.scss

@@ -8,16 +8,20 @@
     position: relative;
 
     @media(max-width: 767px) {
-        padding-top: 32px;
+        padding-top: 6px;
         display: flex;
         align-items: center;
         justify-content: space-between;
     }
 
     .title {
-        font-size: var(--font-size-body-4);
+        font-size: var(--font-size-body-3);
         font-weight: var(--font-weight-semibold);
         text-transform: uppercase;
+
+        @media(min-width: 768px) {
+            font-size: var(--font-size-body-4);
+        }
     }
 
     .columnCenter {
@@ -38,5 +42,17 @@
 
     .columnRight {
         justify-self: end;
+
+        :global {
+            .ant-btn {
+                span {
+                    &:not([role="img"]) {
+                        @media(max-width: 767px) {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
     }
 }

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -1,5 +1,5 @@
 import { RightCircleOutlined } from "@ant-design/icons";
-import {Meta, Story} from "@storybook/react";
+import { Meta, Story } from "@storybook/react";
 import { Sidebar, SidebarProps } from '.';
 
 export default {
@@ -9,11 +9,11 @@ export default {
 
 const Template: Story<SidebarProps> = (args) => {
     const navigate = (targetRoute: string) => {
-        return console.log(targetRoute);
+        console.log(targetRoute);
     }
 
     return <Sidebar {...args} navigateFunction={navigate}></Sidebar>;
-} 
+}
 
 export const Primary = Template.bind({});
 Primary.args = {
@@ -28,13 +28,37 @@ Primary.args = {
         {
             label: "Gestão de Questionários",
             targetRoute: "/gestaodequestionarios",
-            active: false,
+            active: true,
+            sublinks: [
+                {
+                    label: "Subpage 1121212",
+                    targetRoute: "/analytics/subpage121212",
+                    active: false,
+                },
+                {
+                    label: "Subpage 2111",
+                    targetRoute: "/analytics/subpage211",
+                    active: false
+                }
+            ]
         },
         {
             label: "Analytics",
             targetRoute: "/analytics",
             active: false,
-        },
+            sublinks: [
+                {
+                    label: "Subpage 1",
+                    targetRoute: "/analytics/subpage1",
+                    active: false,
+                },
+                {
+                    label: "Subpage 2",
+                    targetRoute: "/analytics/subpage2",
+                    active: false
+                }
+            ]
+        }
     ],
 };
 

package/src/components/Sidebar/index.tsx

@@ -8,51 +8,97 @@ export interface Links {
     targetRoute: string;
     active: boolean;
     icon?: React.ReactNode;
+    sublinks?: Links[];
+    activeSubMenu?: boolean;
 }
 
 export interface SidebarProps {
     isOpen?: boolean;
-    links: Links[],
+    links: Links[];
     navigateFunction: (targetRoute: string) => void;
 }
 
 export const Sidebar = (props: SidebarProps) => {
     const { isOpen = false, links, navigateFunction } = props;
-    const [sidebarOpen, setSidebarOpen] = useState<boolean>(isOpen)
-
+    const [sidebarOpen, setSidebarOpen] = useState<boolean>(isOpen);
+    const [activeSubMenuIndex, setActiveSubMenuIndex] = useState<number>(-1);
+  
     const sidebarClasses = classNames({
-        [styles.sidebarClosed]: !sidebarOpen,
+      [styles.sidebarClosed]: !sidebarOpen,
     }, styles.sidebar);
-
-    const doSomething = () => {
-        setSidebarOpen(!sidebarOpen);
+  
+    const toggleSidebar = () => {
+      setSidebarOpen(!sidebarOpen);
     }
-
+  
+    const toggleSubMenu = (index: number) => {
+      setActiveSubMenuIndex(activeSubMenuIndex === index ? -1 : index);
+    }
+  
+    const isLinkActive = (link: Links) => {
+      if (link.sublinks) {
+        return link.sublinks.some(sublink => sublink.active);
+      }
+      return link.active;
+    }
+  
     return (
-        <div className={sidebarClasses}>
-            <div className={styles.toggle} onClick={doSomething}>
-                {sidebarOpen ? <DoubleRightOutlined /> : <DoubleLeftOutlined />}
-            </div>
-            {links &&
-                links.map((link: Links, index: number) => {
-                    const { label, targetRoute, active, icon } = link;
-
-                    const sidebarItemClasses = classNames({
-                        [styles.sidebarItemActive]: active,
-                        [styles.sidebarHasIcon]: icon
-                    }, styles.sidebarItem);
+      <div className={sidebarClasses}>
+        <div className={styles.toggle} onClick={toggleSidebar}>
+          {sidebarOpen ? <DoubleRightOutlined /> : <DoubleLeftOutlined />}
+        </div>
+        {links &&
+          links.map((link: Links, index: number) => {
+            const { label, targetRoute, icon, sublinks } = link;
+            const isActive = isLinkActive(link);
+            const isActiveSubMenu = activeSubMenuIndex === index;
+  
+            const sidebarItemClasses = classNames({
+              [styles.sidebarItemActive]: isActive,
+              [styles.sidebarHasIcon]: icon
+            }, styles.sidebarItem);
+  
+            return (
+              <div
+                className={sidebarItemClasses}
+                onClick={() => {
+                  if (sublinks) {
+                    toggleSubMenu(index);
+                  } else {
+                    navigateFunction(targetRoute);
+                  }
+                }}
+                onMouseEnter={() => toggleSubMenu(index)}
+                onMouseLeave={() => toggleSubMenu(-1)}
+                key={index}
+              >
+                {icon ? (sidebarOpen ? label : icon) : label}
+                {sublinks && isActiveSubMenu && (
+                  <div className={`${sidebarOpen ? styles.subMenu : ''}`}>
+                    {sublinks.map((sublink: Links, subindex: number) => {
+                      const { label: subLabel, targetRoute: subTargetRoute, active: subActive, icon: subIcon } = sublink;
 
-                    return (
+                      const subLinkClasses = classNames({
+                        [styles.sidebarItemActive]: subActive,
+                        [styles.sidebarHasIcon]: icon,
+                      }, styles.subMenuItem);
+  
+                      return (
                         <div
-                            className={sidebarItemClasses}
-                            onClick={() => navigateFunction(targetRoute)}
-                            key={index}
+                          className={`${styles.sidebarItem} ${subLinkClasses}`}
+                          onClick={() => navigateFunction(subTargetRoute)}
+                          key={subindex}
                         >
-                            {icon ? (sidebarOpen ? label : icon) : label}
+                          {subIcon ? (sidebarOpen ? subLabel : subIcon) : (sidebarOpen ? subLabel : subLabel.charAt(0))}
                         </div>
-                    );
-                })
-            }
-        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+      </div>
     );
-};
+  };  
+  

package/src/components/Sidebar/styles.module.scss

@@ -52,7 +52,7 @@
 } 
 
 .sidebarItemActive {
-    color: var(--color-orange);
+    color: var(--color-orange) !important;
 }
 
 .toggle {
@@ -71,3 +71,16 @@
         font-size: var(--font-size-body-5);
     }
 }
+
+.subMenu {
+    margin-top: 8px;
+    padding-left: 16px;
+}
+
+.subMenuItem {
+    color: var(--color-black);
+    padding: 8px;
+    margin-top: 8px;
+    font-weight: var(--font-weight-semibold);
+    cursor: pointer;
+}