@omniumretail/component-library 1.0.53 → 1.0.54
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/bundle.js +2 -2
- package/dist/main.css +10 -4
- package/dist/types/components/Sidebar/index.d.ts +5 -2
- package/package.json +1 -1
- package/src/components/Sidebar/Sidebar.stories.tsx +14 -6
- package/src/components/Sidebar/index.tsx +27 -13
- package/src/components/Sidebar/styles.module.scss +11 -1
- package/src/components/Table/styles.module.scss +0 -2
package/dist/bundle.js
CHANGED
|
@@ -4845,7 +4845,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr
|
|
|
4845
4845
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
4846
4846
|
|
|
4847
4847
|
"use strict";
|
|
4848
|
-
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\",\"toggle\":\"ULIAFOHHnjA6viVps4dE\"});//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
4848
|
+
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");
|
|
4849
4849
|
|
|
4850
4850
|
/***/ }),
|
|
4851
4851
|
|
|
@@ -10849,7 +10849,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
10849
10849
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
10850
10850
|
|
|
10851
10851
|
"use strict";
|
|
10852
|
-
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:
|
|
10852
|
+
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");
|
|
10853
10853
|
|
|
10854
10854
|
/***/ }),
|
|
10855
10855
|
|
package/dist/main.css
CHANGED
|
@@ -206,9 +206,6 @@
|
|
|
206
206
|
.pwZdBKCECvzAH92fQDTI .ant-table-thead > tr > th:before {
|
|
207
207
|
display: none;
|
|
208
208
|
}
|
|
209
|
-
.pwZdBKCECvzAH92fQDTI .ant-table-tbody > tr {
|
|
210
|
-
cursor: pointer;
|
|
211
|
-
}
|
|
212
209
|
.pwZdBKCECvzAH92fQDTI .ant-table-tbody > tr:last-child > td {
|
|
213
210
|
border-bottom: 1px solid var(--color-grey-light) !important;
|
|
214
211
|
}
|
|
@@ -478,6 +475,10 @@
|
|
|
478
475
|
.x_X2axa502qG690LM5DM.iEepDtDljm_PdBbkR3JA .dcC_pqHYFgU16huYkWP5:first-letter {
|
|
479
476
|
font-size: var(--font-size-body-4);
|
|
480
477
|
}
|
|
478
|
+
.x_X2axa502qG690LM5DM.iEepDtDljm_PdBbkR3JA .spPPzIkYjj024FZcGckd {
|
|
479
|
+
font-size: 24px;
|
|
480
|
+
padding-left: 35px;
|
|
481
|
+
}
|
|
481
482
|
|
|
482
483
|
.dcC_pqHYFgU16huYkWP5 {
|
|
483
484
|
color: var(--color-black);
|
|
@@ -486,6 +487,7 @@
|
|
|
486
487
|
text-transform: uppercase;
|
|
487
488
|
position: relative;
|
|
488
489
|
white-space: nowrap;
|
|
490
|
+
cursor: pointer;
|
|
489
491
|
}
|
|
490
492
|
.dcC_pqHYFgU16huYkWP5:after {
|
|
491
493
|
content: "";
|
|
@@ -498,6 +500,10 @@
|
|
|
498
500
|
transform: scaleY(0.5);
|
|
499
501
|
}
|
|
500
502
|
|
|
503
|
+
.MVw3JKiEvATmRxAAyFA8 {
|
|
504
|
+
color: var(--color-orange);
|
|
505
|
+
}
|
|
506
|
+
|
|
501
507
|
.ULIAFOHHnjA6viVps4dE {
|
|
502
508
|
position: absolute;
|
|
503
509
|
top: 12px;
|
|
@@ -507,7 +513,7 @@
|
|
|
507
513
|
display: flex;
|
|
508
514
|
align-items: center;
|
|
509
515
|
justify-content: center;
|
|
510
|
-
z-index:
|
|
516
|
+
z-index: 1;
|
|
511
517
|
cursor: pointer;
|
|
512
518
|
}
|
|
513
519
|
.ULIAFOHHnjA6viVps4dE > * {
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
export interface Links {
|
|
2
3
|
label: string;
|
|
3
4
|
targetRoute: string;
|
|
5
|
+
active: boolean;
|
|
6
|
+
icon?: React.ReactNode;
|
|
4
7
|
}
|
|
5
8
|
export interface SidebarProps {
|
|
6
9
|
isOpen?: boolean;
|
|
7
|
-
links: Links[]
|
|
8
|
-
navigateFunction:
|
|
10
|
+
links: Links[];
|
|
11
|
+
navigateFunction: (targetRoute: string) => void;
|
|
9
12
|
}
|
|
10
13
|
export declare const Sidebar: (props: SidebarProps) => JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { RightCircleOutlined } from "@ant-design/icons";
|
|
1
2
|
import {Meta, Story} from "@storybook/react";
|
|
2
3
|
import { Sidebar, SidebarProps } from '.';
|
|
3
4
|
|
|
@@ -20,15 +21,19 @@ Primary.args = {
|
|
|
20
21
|
links: [
|
|
21
22
|
{
|
|
22
23
|
label: "Ciclo de Avaliação",
|
|
23
|
-
targetRoute: "/ciclodeavaliacao"
|
|
24
|
+
targetRoute: "/ciclodeavaliacao",
|
|
25
|
+
active: true,
|
|
26
|
+
icon: <RightCircleOutlined />,
|
|
24
27
|
},
|
|
25
28
|
{
|
|
26
29
|
label: "Gestão de Questionários",
|
|
27
|
-
targetRoute: "/gestaodequestionarios"
|
|
30
|
+
targetRoute: "/gestaodequestionarios",
|
|
31
|
+
active: false,
|
|
28
32
|
},
|
|
29
33
|
{
|
|
30
34
|
label: "Analytics",
|
|
31
|
-
targetRoute: "/analytics"
|
|
35
|
+
targetRoute: "/analytics",
|
|
36
|
+
active: false,
|
|
32
37
|
},
|
|
33
38
|
],
|
|
34
39
|
};
|
|
@@ -39,15 +44,18 @@ Secondary.args = {
|
|
|
39
44
|
links: [
|
|
40
45
|
{
|
|
41
46
|
label: "Ciclo de Avaliação",
|
|
42
|
-
targetRoute: "/ciclodeavaliacao"
|
|
47
|
+
targetRoute: "/ciclodeavaliacao",
|
|
48
|
+
active: false,
|
|
43
49
|
},
|
|
44
50
|
{
|
|
45
51
|
label: "Gestão de Questionários",
|
|
46
|
-
targetRoute: "/gestaodequestionarios"
|
|
52
|
+
targetRoute: "/gestaodequestionarios",
|
|
53
|
+
active: false,
|
|
47
54
|
},
|
|
48
55
|
{
|
|
49
56
|
label: "Analytics",
|
|
50
|
-
targetRoute: "/analytics"
|
|
57
|
+
targetRoute: "/analytics",
|
|
58
|
+
active: false,
|
|
51
59
|
},
|
|
52
60
|
],
|
|
53
61
|
};
|
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import styles from './styles.module.scss';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import { DoubleLeftOutlined, DoubleRightOutlined} from '@ant-design/icons';
|
|
3
|
+
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
|
|
4
4
|
import { useState } from 'react';
|
|
5
5
|
|
|
6
6
|
export interface Links {
|
|
7
7
|
label: string;
|
|
8
8
|
targetRoute: string;
|
|
9
|
+
active: boolean;
|
|
10
|
+
icon?: React.ReactNode;
|
|
9
11
|
}
|
|
10
12
|
|
|
11
13
|
export interface SidebarProps {
|
|
12
14
|
isOpen?: boolean;
|
|
13
|
-
links: Links[]
|
|
14
|
-
navigateFunction:
|
|
15
|
+
links: Links[],
|
|
16
|
+
navigateFunction: (targetRoute: string) => void;
|
|
15
17
|
}
|
|
16
18
|
|
|
17
19
|
export const Sidebar = (props: SidebarProps) => {
|
|
@@ -19,7 +21,7 @@ export const Sidebar = (props: SidebarProps) => {
|
|
|
19
21
|
const [sidebarOpen, setSidebarOpen] = useState<boolean>(isOpen)
|
|
20
22
|
|
|
21
23
|
const sidebarClasses = classNames({
|
|
22
|
-
[styles.sidebarClosed]: sidebarOpen,
|
|
24
|
+
[styles.sidebarClosed]: !sidebarOpen,
|
|
23
25
|
}, styles.sidebar);
|
|
24
26
|
|
|
25
27
|
const doSomething = () => {
|
|
@@ -28,17 +30,29 @@ export const Sidebar = (props: SidebarProps) => {
|
|
|
28
30
|
|
|
29
31
|
return (
|
|
30
32
|
<div className={sidebarClasses}>
|
|
31
|
-
<div className={styles.toggle} onClick={
|
|
32
|
-
{sidebarOpen ? <DoubleRightOutlined />
|
|
33
|
+
<div className={styles.toggle} onClick={doSomething}>
|
|
34
|
+
{sidebarOpen ? <DoubleRightOutlined /> : <DoubleLeftOutlined />}
|
|
33
35
|
</div>
|
|
34
|
-
{links &&
|
|
35
|
-
links.map((
|
|
36
|
-
const { label, targetRoute } =
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
{links &&
|
|
37
|
+
links.map((link: Links, index: number) => {
|
|
38
|
+
const { label, targetRoute, active, icon } = link;
|
|
39
|
+
|
|
40
|
+
const sidebarItemClasses = classNames({
|
|
41
|
+
[styles.sidebarItemActive]: active,
|
|
42
|
+
[styles.sidebarHasIcon]: icon
|
|
43
|
+
}, styles.sidebarItem);
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<div
|
|
47
|
+
className={sidebarItemClasses}
|
|
48
|
+
onClick={() => navigateFunction(targetRoute)}
|
|
49
|
+
key={index}
|
|
50
|
+
>
|
|
51
|
+
{icon ? (sidebarOpen ? label : icon) : label}
|
|
52
|
+
</div>
|
|
53
|
+
);
|
|
40
54
|
})
|
|
41
55
|
}
|
|
42
56
|
</div>
|
|
43
|
-
)
|
|
57
|
+
);
|
|
44
58
|
};
|
|
@@ -22,6 +22,11 @@
|
|
|
22
22
|
font-size: var(--font-size-body-4);
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
+
|
|
26
|
+
.sidebarHasIcon {
|
|
27
|
+
font-size: 24px;
|
|
28
|
+
padding-left: 35px;
|
|
29
|
+
}
|
|
25
30
|
}
|
|
26
31
|
}
|
|
27
32
|
|
|
@@ -32,6 +37,7 @@
|
|
|
32
37
|
text-transform: uppercase;
|
|
33
38
|
position: relative;
|
|
34
39
|
white-space: nowrap;
|
|
40
|
+
cursor: pointer;
|
|
35
41
|
|
|
36
42
|
&:after {
|
|
37
43
|
content: '';
|
|
@@ -43,6 +49,10 @@
|
|
|
43
49
|
background-color: var(--color-orange);
|
|
44
50
|
transform: scaleY(.5);
|
|
45
51
|
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.sidebarItemActive {
|
|
55
|
+
color: var(--color-orange);
|
|
46
56
|
}
|
|
47
57
|
|
|
48
58
|
.toggle {
|
|
@@ -54,7 +64,7 @@
|
|
|
54
64
|
display: flex;
|
|
55
65
|
align-items: center;
|
|
56
66
|
justify-content: center;
|
|
57
|
-
z-index:
|
|
67
|
+
z-index: 1;
|
|
58
68
|
cursor: pointer;
|
|
59
69
|
|
|
60
70
|
> * {
|