pixelize-design-library 2.2.122 → 2.2.123
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/Components/Header/Header.js +2 -1
- package/dist/Components/SideBar/SecondaryBar.d.ts +1 -12
- package/dist/Components/SideBar/SecondaryBar.js +49 -43
- package/dist/Components/SideBar/SideBar.js +55 -25
- package/dist/Components/SideBar/SideBarProps.d.ts +11 -0
- package/dist/Components/SideBar/components/MenuItemBox.js +2 -2
- package/dist/Components/SideBar/components/MenuPopoverContent.js +1 -1
- package/dist/Constants/Sidebar.d.ts +1 -0
- package/dist/Constants/Sidebar.js +2 -1
- package/package.json +1 -1
|
@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
var react_1 = require("@chakra-ui/react");
|
|
30
|
+
var Sidebar_1 = require("../../Constants/Sidebar");
|
|
30
31
|
var lucide_react_1 = require("lucide-react");
|
|
31
32
|
var react_2 = __importStar(require("react"));
|
|
32
33
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
@@ -52,7 +53,7 @@ var Header = function (_a) {
|
|
|
52
53
|
? react_2.default.cloneElement(rightSlot, { closeMobileMenu: closeMobileMenu })
|
|
53
54
|
: rightSlot;
|
|
54
55
|
return (react_2.default.createElement(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: 1000, position: "sticky" },
|
|
55
|
-
react_2.default.createElement(react_1.Flex, {
|
|
56
|
+
react_2.default.createElement(react_1.Flex, { h: Sidebar_1.HEADER_HEIGHT, align: "center", mx: "auto", justifyContent: "flex-start" },
|
|
56
57
|
react_2.default.createElement(react_1.HStack, { spacing: 6, align: "center" },
|
|
57
58
|
react_2.default.createElement(react_1.Box, { cursor: "pointer" }, logo),
|
|
58
59
|
react_2.default.createElement(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText })),
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
3
|
-
type SecondaryBarProps = {
|
|
4
|
-
items?: MenuProps[];
|
|
5
|
-
defaultCollapsed?: boolean;
|
|
6
|
-
collapsedWidth?: string | number;
|
|
7
|
-
expandedWidth?: string | number;
|
|
8
|
-
headerFontSize?: string;
|
|
9
|
-
itemFontSize?: string;
|
|
10
|
-
selected?: string | number | null;
|
|
11
|
-
onItemClick?: (item: MenuProps) => void;
|
|
12
|
-
title?: string;
|
|
13
|
-
};
|
|
2
|
+
import { SecondaryBarProps } from "./SideBarProps";
|
|
14
3
|
declare const SecondaryBar: React.FC<SecondaryBarProps>;
|
|
15
4
|
export default SecondaryBar;
|
|
@@ -32,58 +32,64 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
|
32
32
|
var lucide_react_1 = require("lucide-react");
|
|
33
33
|
var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
|
|
34
34
|
var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
|
|
35
|
+
var parseBadge = function (badge) {
|
|
36
|
+
var _a, _b, _c;
|
|
37
|
+
return ({
|
|
38
|
+
badgeVal: badge === null || badge === void 0 ? void 0 : badge.count,
|
|
39
|
+
colorScheme: (_a = badge === null || badge === void 0 ? void 0 : badge.color) !== null && _a !== void 0 ? _a : "teal",
|
|
40
|
+
radius: (_b = badge === null || badge === void 0 ? void 0 : badge.radius) !== null && _b !== void 0 ? _b : "full",
|
|
41
|
+
variant: (_c = badge === null || badge === void 0 ? void 0 : badge.variant) !== null && _c !== void 0 ? _c : "subtle",
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
var CollapsedItem = function (_a) {
|
|
45
|
+
var item = _a.item, isActive = _a.isActive, itemFontSize = _a.itemFontSize, onItemClick = _a.onItemClick;
|
|
46
|
+
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
47
|
+
var _b = parseBadge(item.badge), badgeVal = _b.badgeVal, colorScheme = _b.colorScheme, radius = _b.radius, variant = _b.variant;
|
|
48
|
+
return (react_1.default.createElement(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
|
|
49
|
+
react_1.default.createElement(react_2.PopoverTrigger, null,
|
|
50
|
+
react_1.default.createElement(react_2.Box, { py: "0.75rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, color: theme.colors.white, _hover: { bg: item.disabled ? "transparent" : theme.colors.primary[700] }, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); }, bg: isActive ? theme.colors.primary[600] : "transparent" },
|
|
51
|
+
react_1.default.createElement(react_2.Box, { position: "relative" },
|
|
52
|
+
react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem" }),
|
|
53
|
+
badgeVal != null && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))))),
|
|
54
|
+
react_1.default.createElement(react_2.Portal, null,
|
|
55
|
+
react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white", border: 'none' },
|
|
56
|
+
react_1.default.createElement(react_2.PopoverBody, { p: "0.75rem" },
|
|
57
|
+
react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between" },
|
|
58
|
+
react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0 },
|
|
59
|
+
react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }),
|
|
60
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p" }, item.title)),
|
|
61
|
+
badgeVal != null && (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal))))))));
|
|
62
|
+
};
|
|
63
|
+
var ExpandedItem = function (_a) {
|
|
64
|
+
var item = _a.item, isActive = _a.isActive, itemFontSize = _a.itemFontSize, onItemClick = _a.onItemClick;
|
|
65
|
+
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
66
|
+
var _b = parseBadge(item.badge), badgeVal = _b.badgeVal, colorScheme = _b.colorScheme, radius = _b.radius, variant = _b.variant;
|
|
67
|
+
return (react_1.default.createElement(react_2.Flex, { px: "1rem", py: "0.75rem", align: "center", justify: "space-between", gap: "0.5rem", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? theme.colors.primary[600] : "transparent", _hover: { bg: item.disabled ? "transparent" : theme.colors.primary[700] }, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); }, color: theme.colors.white, borderLeft: isActive ? "0.188rem solid ".concat(theme.colors.background[300]) : "0.188rem solid transparent" },
|
|
68
|
+
react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, overflow: "hidden" },
|
|
69
|
+
react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem", flexShrink: 0 }),
|
|
70
|
+
react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
|
|
71
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: 600, as: "p" }, item.title))),
|
|
72
|
+
badgeVal != null && (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal))));
|
|
73
|
+
};
|
|
35
74
|
var SecondaryBar = function (_a) {
|
|
36
|
-
var _b, _c, _d;
|
|
37
|
-
var _e = _a.items, items = _e === void 0 ? [] : _e, _f = _a.defaultCollapsed, defaultCollapsed = _f === void 0 ? true : _f, _g = _a.collapsedWidth, collapsedWidth = _g === void 0 ? "3.5rem" : _g, _h = _a.expandedWidth, expandedWidth = _h === void 0 ? "10rem" : _h, _j = _a.headerFontSize, headerFontSize = _j === void 0 ? "0.95rem" : _j, _k = _a.itemFontSize, itemFontSize = _k === void 0 ? "0.875rem" : _k, selected = _a.selected, onItemClick = _a.onItemClick, title = _a.title;
|
|
75
|
+
var _b = _a.items, items = _b === void 0 ? [] : _b, _c = _a.defaultCollapsed, defaultCollapsed = _c === void 0 ? true : _c, _d = _a.collapsedWidth, collapsedWidth = _d === void 0 ? "3.5rem" : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? "10rem" : _e, _f = _a.headerFontSize, headerFontSize = _f === void 0 ? "0.95rem" : _f, _g = _a.itemFontSize, itemFontSize = _g === void 0 ? "0.875rem" : _g, selected = _a.selected, onItemClick = _a.onItemClick, title = _a.title;
|
|
38
76
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
39
|
-
var
|
|
77
|
+
var _h = (0, react_1.useState)(defaultCollapsed), collapsed = _h[0], setCollapsed = _h[1];
|
|
40
78
|
var width = collapsed ? collapsedWidth : expandedWidth;
|
|
41
|
-
|
|
42
|
-
return (react_1.default.createElement(react_2.Box, { transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: (_d = (_c = (_b = theme.colors.sidebar) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[400]) !== null && _d !== void 0 ? _d : theme.colors.gray[800], boxShadow: theme.shadows.md, zIndex: 1 },
|
|
79
|
+
return (react_1.default.createElement(react_2.Box, { transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: theme.colors.sidebar.background[200], boxShadow: theme.shadows.md, zIndex: 1 },
|
|
43
80
|
react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 0 },
|
|
44
|
-
react_1.default.createElement(react_2.Flex, { align: "center", justify:
|
|
45
|
-
|
|
46
|
-
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 700, color: theme.colors.white, as: "p" }, title !== null && title !== void 0 ? title : "")))
|
|
81
|
+
react_1.default.createElement(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "0.75rem", h: "4rem", overflow: "hidden" },
|
|
82
|
+
!collapsed && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0, mr: "0.5rem" },
|
|
83
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 700, color: theme.colors.white, as: "p" }, title !== null && title !== void 0 ? title : ""))),
|
|
47
84
|
react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "100%", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", onClick: function () { return setCollapsed(function (c) { return !c; }); } }, collapsed ? (react_1.default.createElement(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right" },
|
|
48
85
|
react_1.default.createElement(lucide_react_1.ChevronRight, { size: 16, color: theme.colors.white }))) : (react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 16, color: theme.colors.white })))),
|
|
49
|
-
react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[
|
|
86
|
+
react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[500] }),
|
|
50
87
|
react_1.default.createElement(react_2.Box, { id: "secondary-scroll-container", flex: "1", overflowY: "auto", overflowX: "hidden" }, items.map(function (item) {
|
|
51
|
-
var _a
|
|
88
|
+
var _a;
|
|
52
89
|
var isActive = String(selected) === String(item.id) ||
|
|
53
90
|
String(selected) === String(item.title);
|
|
54
|
-
var
|
|
55
|
-
|
|
56
|
-
var colorScheme = (_a = (isObj ? item.badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
|
|
57
|
-
var radius = (_b = (isObj ? item.badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
|
|
58
|
-
var variant = (_c = (isObj ? item.badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
|
|
59
|
-
if (!showText) {
|
|
60
|
-
return (react_1.default.createElement(react_2.Popover, { key: String((_d = item.id) !== null && _d !== void 0 ? _d : item.title), trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
|
|
61
|
-
react_1.default.createElement(react_2.PopoverTrigger, null,
|
|
62
|
-
react_1.default.createElement(react_2.Box, { py: "0.625rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, color: theme.colors.white, _hover: {
|
|
63
|
-
bg: item.disabled ? "transparent" : theme.colors.primary[700],
|
|
64
|
-
}, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); } },
|
|
65
|
-
react_1.default.createElement(react_2.Box, { position: "relative" },
|
|
66
|
-
react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem" }),
|
|
67
|
-
badgeVal != null && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))))),
|
|
68
|
-
react_1.default.createElement(react_2.Portal, null,
|
|
69
|
-
react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.313rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white" },
|
|
70
|
-
react_1.default.createElement(react_2.PopoverBody, { p: "0.5rem" },
|
|
71
|
-
react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between" },
|
|
72
|
-
react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0 },
|
|
73
|
-
react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }),
|
|
74
|
-
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p" }, item.title)),
|
|
75
|
-
badgeVal != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal)) : null))))));
|
|
76
|
-
}
|
|
77
|
-
return (react_1.default.createElement(react_2.Flex, { key: String((_e = item.id) !== null && _e !== void 0 ? _e : item.title), px: "1rem", py: "0.625rem", align: "center", justify: "space-between", gap: "0.5rem", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? theme.colors.primary[600] : "transparent", _hover: {
|
|
78
|
-
bg: item.disabled ? "transparent" : theme.colors.primary[700],
|
|
79
|
-
}, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); }, color: theme.colors.white, borderLeft: isActive
|
|
80
|
-
? "0.188rem solid ".concat(theme.colors.background[300])
|
|
81
|
-
: "0.188rem solid transparent" },
|
|
82
|
-
react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, overflow: "hidden" },
|
|
83
|
-
react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem", flexShrink: 0 }),
|
|
84
|
-
react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
|
|
85
|
-
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: 600, as: "p" }, item.title))),
|
|
86
|
-
badgeVal != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal)) : null));
|
|
91
|
+
var key = String((_a = item.id) !== null && _a !== void 0 ? _a : item.title);
|
|
92
|
+
return collapsed ? (react_1.default.createElement(CollapsedItem, { key: key, item: item, isActive: isActive, itemFontSize: itemFontSize, onItemClick: onItemClick })) : (react_1.default.createElement(ExpandedItem, { key: key, item: item, isActive: isActive, itemFontSize: itemFontSize, onItemClick: onItemClick }));
|
|
87
93
|
})))));
|
|
88
94
|
};
|
|
89
95
|
exports.default = SecondaryBar;
|
|
@@ -23,9 +23,55 @@ var MenuItems_1 = __importDefault(require("./components/MenuItems"));
|
|
|
23
23
|
var defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
|
|
24
24
|
var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
|
|
25
25
|
var SecondaryBar_1 = __importDefault(require("./SecondaryBar"));
|
|
26
|
+
var SidebarHeader = function (_a) {
|
|
27
|
+
var logo = _a.logo, companyName = _a.companyName, toggle = _a.toggle, isLoading = _a.isLoading;
|
|
28
|
+
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
29
|
+
if (isLoading) {
|
|
30
|
+
return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
|
|
31
|
+
react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4 },
|
|
32
|
+
react_1.default.createElement(react_2.Skeleton, { w: "25px", h: "25px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
|
|
33
|
+
react_1.default.createElement(react_2.Skeleton, { h: "1.5rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })))));
|
|
34
|
+
}
|
|
35
|
+
if (logo) {
|
|
36
|
+
return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
|
|
37
|
+
react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
|
|
38
|
+
!toggle && (react_1.default.createElement(react_2.Text, { fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName))));
|
|
39
|
+
}
|
|
40
|
+
return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
|
|
41
|
+
react_1.default.createElement(react_2.Box, { bg: theme.colors.white, color: theme.colors.black, borderRadius: "full", boxSize: "2rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: { base: "xl", md: "2xl" } },
|
|
42
|
+
react_1.default.createElement(defaultLogo_1.default, null)),
|
|
43
|
+
!toggle && (react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, lineHeight: 2, as: "p" }, companyName !== null && companyName !== void 0 ? companyName : ""))));
|
|
44
|
+
};
|
|
45
|
+
var SkeletonMenuRow = function (_a) {
|
|
46
|
+
var toggle = _a.toggle;
|
|
47
|
+
return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 3 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
|
|
48
|
+
react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 5 },
|
|
49
|
+
react_1.default.createElement(react_2.Skeleton, { w: "20px", h: "20px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
|
|
50
|
+
react_1.default.createElement(react_2.Skeleton, { h: "1rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })))));
|
|
51
|
+
};
|
|
52
|
+
var AddNewButton = function (_a) {
|
|
53
|
+
var toggle = _a.toggle, isLoading = _a.isLoading, onClick = _a.onClick;
|
|
54
|
+
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
55
|
+
if (isLoading) {
|
|
56
|
+
return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
|
|
57
|
+
react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md" })));
|
|
58
|
+
}
|
|
59
|
+
return (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onClick },
|
|
60
|
+
react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
|
|
61
|
+
react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
|
|
62
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")));
|
|
63
|
+
};
|
|
64
|
+
var CollapseButton = function (_a) {
|
|
65
|
+
var toggle = _a.toggle, onToggle = _a.onToggle;
|
|
66
|
+
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
67
|
+
return (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onToggle, transition: "all 0.5s", bg: theme.colors.gray[700] },
|
|
68
|
+
react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" }, toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 16, color: theme.colors.white })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 16, color: theme.colors.white }))),
|
|
69
|
+
react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: "white", fontWeight: "medium", display: toggle ? "none" : "block" }, "Collapse")));
|
|
70
|
+
};
|
|
71
|
+
// --- Main Sidebar component ---
|
|
26
72
|
function Sidebar(_a) {
|
|
27
|
-
var _b
|
|
28
|
-
var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, handleSecondaryNavClick = _a.handleSecondaryNavClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName,
|
|
73
|
+
var _b;
|
|
74
|
+
var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, handleSecondaryNavClick = _a.handleSecondaryNavClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, selectedSecondaryItem = _a.selectedSecondaryItem, isLoading = _a.isLoading, loadingLines = _a.loadingLines;
|
|
29
75
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
30
76
|
var activeTop = menus.find(function (m) { return String(m.title) === String(activeMenu); }) ||
|
|
31
77
|
menus.find(function (m) { return String(m.id) === String(activeMenu); });
|
|
@@ -33,31 +79,15 @@ function Sidebar(_a) {
|
|
|
33
79
|
return (react_1.default.createElement(react_2.Box, { transition: "all 0.5s", position: "sticky", height: "100vh", boxShadow: theme.shadows.lg, display: "flex", background: theme.colors.sidebar.background[500] },
|
|
34
80
|
react_1.default.createElement(react_2.Box, { width: toggle ? "4.688rem" : "13rem", transition: "width 0.5s ease", display: "flex", flexDirection: "column", justifyContent: "space-between" },
|
|
35
81
|
react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", as: "nav", h: "100vh" },
|
|
36
|
-
|
|
37
|
-
react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4 },
|
|
38
|
-
react_1.default.createElement(react_2.Skeleton, { w: "25px", h: "25px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
|
|
39
|
-
react_1.default.createElement(react_2.Skeleton, { h: "1.5rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))) : (react_1.default.createElement(react_2.Box, null, logo ? (react_1.default.createElement(react_2.Flex, { h: "4.688rem", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
|
|
40
|
-
react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
|
|
41
|
-
!toggle && (react_1.default.createElement(react_2.Text, { fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName)))) : (react_1.default.createElement(react_2.Flex, { h: "3.91rem", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
|
|
42
|
-
react_1.default.createElement(react_2.Box, { bg: theme.colors.white, color: theme.colors.black, borderRadius: "full", boxSize: "2rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: { base: "xl", md: "2xl" } },
|
|
43
|
-
react_1.default.createElement(defaultLogo_1.default, null)),
|
|
44
|
-
!toggle && (react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, lineHeight: 2, as: "p" }, companyName !== null && companyName !== void 0 ? companyName : "")))))),
|
|
82
|
+
react_1.default.createElement(SidebarHeader, { logo: logo, companyName: companyName, toggle: toggle, isLoading: isLoading }),
|
|
45
83
|
react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200] }),
|
|
46
84
|
react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss, overflowX: "hidden" },
|
|
47
|
-
react_1.default.createElement(react_2.Box, { id: "sidebar-scroll-container", width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading
|
|
48
|
-
|
|
49
|
-
react_1.default.createElement(
|
|
50
|
-
react_1.default.createElement(react_2.Skeleton, { h: "1rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))); })) : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
|
|
85
|
+
react_1.default.createElement(react_2.Box, { id: "sidebar-scroll-container", width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading
|
|
86
|
+
? Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(SkeletonMenuRow, { key: i, toggle: toggle })); })
|
|
87
|
+
: (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
|
|
51
88
|
react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
|
|
52
|
-
!isDisableAddNew &&
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
|
|
56
|
-
react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
|
|
57
|
-
react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")))),
|
|
58
|
-
react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: changeToggle, transition: "all 0.5s", bg: theme.colors.gray[700] },
|
|
59
|
-
react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" }, toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 16, color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 16, color: theme.colors.white }))),
|
|
60
|
-
react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: "white", fontWeight: "medium", display: toggle ? "none" : "block" }, "Collapse"))))),
|
|
61
|
-
secondaryItems.length ? (react_1.default.createElement(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: toggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title })) : null));
|
|
89
|
+
!isDisableAddNew && (react_1.default.createElement(AddNewButton, { toggle: toggle, isLoading: isLoading, onClick: onAddNewClick })),
|
|
90
|
+
react_1.default.createElement(CollapseButton, { toggle: toggle, onToggle: changeToggle })))),
|
|
91
|
+
secondaryItems.length > 0 && (react_1.default.createElement(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: toggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title }))));
|
|
62
92
|
}
|
|
63
93
|
exports.default = Sidebar;
|
|
@@ -38,3 +38,14 @@ export type RenderMenuType = {
|
|
|
38
38
|
selectedSubMenu?: string | null;
|
|
39
39
|
selectedSecondaryItem?: string | number | null;
|
|
40
40
|
};
|
|
41
|
+
export type SecondaryBarProps = {
|
|
42
|
+
items?: MenuProps[];
|
|
43
|
+
defaultCollapsed?: boolean;
|
|
44
|
+
collapsedWidth?: string | number;
|
|
45
|
+
expandedWidth?: string | number;
|
|
46
|
+
headerFontSize?: string;
|
|
47
|
+
itemFontSize?: string;
|
|
48
|
+
selected?: string | number | null;
|
|
49
|
+
onItemClick?: (item: MenuProps) => void;
|
|
50
|
+
title?: string;
|
|
51
|
+
};
|
|
@@ -86,8 +86,8 @@ var MenuItemBox = function (_a) {
|
|
|
86
86
|
react_1.default.createElement(react_2.PopoverTrigger, null,
|
|
87
87
|
react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title) }), buttonContent)),
|
|
88
88
|
react_1.default.createElement(react_2.Portal, null,
|
|
89
|
-
react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isAnyActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.
|
|
90
|
-
react_1.default.createElement(react_2.PopoverBody, { p: "0.
|
|
89
|
+
react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isAnyActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500 },
|
|
90
|
+
react_1.default.createElement(react_2.PopoverBody, { p: "0.625rem", color: "white" },
|
|
91
91
|
react_1.default.createElement(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }))))));
|
|
92
92
|
}
|
|
93
93
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
@@ -32,7 +32,7 @@ var MenuPopoverContent = function (_a) {
|
|
|
32
32
|
locked && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })), subMenu === null || subMenu === void 0 ? void 0 :
|
|
33
33
|
subMenu.map(function (sub) {
|
|
34
34
|
var isSubActive = activeMenu === sub.id;
|
|
35
|
-
return (react_1.default.createElement(react_2.Flex, { key: sub.id || sub.title, onClick: function () { return !sub.disabled && (handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(sub)); }, px: "1rem", py: "0.
|
|
35
|
+
return (react_1.default.createElement(react_2.Flex, { key: sub.id || sub.title, onClick: function () { return !sub.disabled && (handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(sub)); }, px: "1rem", py: "0.7rem", align: "center", justify: "space-between", gap: "0.75rem", _hover: {
|
|
36
36
|
bg: !sub.disabled ? theme.colors.primary[500] : "transparent",
|
|
37
37
|
cursor: !sub.disabled ? "pointer" : "not-allowed",
|
|
38
38
|
}, bg: isAnySubActive ? theme.colors.primary[500] : theme.colors.primary[700], borderLeft: isSubActive
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.cssForScrollBar = exports.FlexCss = void 0;
|
|
3
|
+
exports.cssForScrollBar = exports.FlexCss = exports.HEADER_HEIGHT = void 0;
|
|
4
|
+
exports.HEADER_HEIGHT = "4.3rem";
|
|
4
5
|
exports.FlexCss = {
|
|
5
6
|
"&::-webkit-scrollbar": {
|
|
6
7
|
width: "0.188rem",
|