@jrapps/my_tickets_dashboard_ui 0.0.4 → 0.0.5
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/cjs/index.js +327 -0
- package/dist/cjs/index.js.map +4 -4
- package/dist/esm/chunks/chunk-4XEQQFOL.js +316 -0
- package/dist/esm/chunks/chunk-4XEQQFOL.js.map +7 -0
- package/dist/esm/components/Sidebar/index.js +2 -312
- package/dist/esm/components/Sidebar/index.js.map +4 -4
- package/dist/esm/index.js +5 -9
- package/dist/esm/index.js.map +3 -3
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/esm/chunks/chunk-NRCRLAHV.js +0 -13
- package/dist/esm/chunks/chunk-NRCRLAHV.js.map +0 -7
|
@@ -1,316 +1,6 @@
|
|
|
1
|
-
import "../../chunks/chunk-NRCRLAHV.js";
|
|
2
|
-
|
|
3
|
-
// src/components/Sidebar/Sidebar.tsx
|
|
4
|
-
import { useRef, useState as useState3, forwardRef } from "react";
|
|
5
|
-
import { Avatar as Avatar2, Box as Box3, Text as Text3 } from "@wix/design-system";
|
|
6
|
-
import { ChevronLeft, ChevronRight } from "@wix/wix-ui-icons-common";
|
|
7
|
-
|
|
8
|
-
// src/components/Sidebar/sidebar-menu-item.tsx
|
|
9
|
-
import { useEffect, useState } from "react";
|
|
10
|
-
import { Box, Text, CounterBadge } from "@wix/design-system";
|
|
11
|
-
import { dashboard } from "@wix/dashboard";
|
|
12
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
-
var SidebarMenuItem = ({
|
|
14
|
-
item,
|
|
15
|
-
items,
|
|
16
|
-
expanded,
|
|
17
|
-
expandedClassName,
|
|
18
|
-
selectedId,
|
|
19
|
-
expandedSections,
|
|
20
|
-
teamId,
|
|
21
|
-
totalCount,
|
|
22
|
-
onToggleSection,
|
|
23
|
-
onItemClick,
|
|
24
|
-
onModalClosed,
|
|
25
|
-
onCreateTicketClicked
|
|
26
|
-
}) => {
|
|
27
|
-
const [itemTotalCount, setItemTotalCount] = useState(totalCount);
|
|
28
|
-
const hasChildren = items.some((i) => i.parent === item.stateId);
|
|
29
|
-
const isExpanded = expandedSections.has(item.stateId);
|
|
30
|
-
const isSelected = selectedId === item.stateId;
|
|
31
|
-
useEffect(() => {
|
|
32
|
-
setItemTotalCount(totalCount);
|
|
33
|
-
}, [totalCount]);
|
|
34
|
-
const handleAction = async (actionItem) => {
|
|
35
|
-
if (actionItem.type === "page") {
|
|
36
|
-
onItemClick(actionItem.stateId);
|
|
37
|
-
} else if (actionItem.type === "modal") {
|
|
38
|
-
const { modalClosed } = dashboard.openModal({ modalId: String(actionItem.modalId), params: actionItem.modalParams });
|
|
39
|
-
modalClosed.then((result) => {
|
|
40
|
-
if (result && onModalClosed) {
|
|
41
|
-
onModalClosed(result);
|
|
42
|
-
}
|
|
43
|
-
});
|
|
44
|
-
} else if (actionItem.type === "custom_modal") {
|
|
45
|
-
onCreateTicketClicked == null ? void 0 : onCreateTicketClicked();
|
|
46
|
-
} else if (actionItem.type === "link") {
|
|
47
|
-
const generatedLink = await dashboard.getPageUrl({ pageId: "9f1191cb-46cb-4280-af8d-5c15d89aced8", relativeUrl: actionItem.link || "" });
|
|
48
|
-
window.open(generatedLink, "_blank");
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
if (hasChildren) {
|
|
52
|
-
const children = items.filter((i) => i.parent === item.stateId);
|
|
53
|
-
return /* @__PURE__ */ jsxs("div", { className: "sidebar-section", children: [
|
|
54
|
-
/* @__PURE__ */ jsxs(
|
|
55
|
-
"div",
|
|
56
|
-
{
|
|
57
|
-
className: `sidebar-item sidebar-parent-item ${isSelected ? "sidebar-item-selected" : ""}`,
|
|
58
|
-
onClick: () => onToggleSection(item.stateId),
|
|
59
|
-
children: [
|
|
60
|
-
/* @__PURE__ */ jsx(Box, { className: "sidebar-item-icon", children: item.prefixIcon }),
|
|
61
|
-
expanded && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
62
|
-
/* @__PURE__ */ jsxs(Box, { className: "sidebar-item-content", direction: "vertical", children: [
|
|
63
|
-
/* @__PURE__ */ jsx(Text, { size: "small", className: "sidebar-item-title", children: item.label }),
|
|
64
|
-
item.subtitle && /* @__PURE__ */ jsx(Text, { size: "small", className: "sidebar-item-subtitle", children: item.subtitle })
|
|
65
|
-
] }),
|
|
66
|
-
/* @__PURE__ */ jsx(Box, { className: `sidebar-item-chevron ${isExpanded ? "expanded" : ""}`, children: "\u25BC" })
|
|
67
|
-
] })
|
|
68
|
-
]
|
|
69
|
-
}
|
|
70
|
-
),
|
|
71
|
-
isExpanded && /* @__PURE__ */ jsx(Box, { className: "sidebar-submenu-container", direction: "vertical", children: children.map((child) => /* @__PURE__ */ jsxs(
|
|
72
|
-
"div",
|
|
73
|
-
{
|
|
74
|
-
className: `sidebar-item sidebar-child-item ${expandedClassName} ${selectedId === child.stateId ? "sidebar-item-selected" : ""}`,
|
|
75
|
-
onClick: () => handleAction(child),
|
|
76
|
-
children: [
|
|
77
|
-
/* @__PURE__ */ jsx(Box, { className: "sidebar-item-icon", children: child.prefixIcon }),
|
|
78
|
-
expanded && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, { className: "sidebar-item-content", direction: "vertical", children: [
|
|
79
|
-
/* @__PURE__ */ jsx(Text, { size: "small", className: "sidebar-item-title-submenu", children: child.label }),
|
|
80
|
-
child.subtitle && /* @__PURE__ */ jsx(Text, { size: "small", className: "sidebar-item-subtitle", children: child.subtitle })
|
|
81
|
-
] }) })
|
|
82
|
-
]
|
|
83
|
-
},
|
|
84
|
-
child.stateId
|
|
85
|
-
)) })
|
|
86
|
-
] }, item.stateId);
|
|
87
|
-
}
|
|
88
|
-
return /* @__PURE__ */ jsxs(
|
|
89
|
-
"div",
|
|
90
|
-
{
|
|
91
|
-
className: `sidebar-item ${expandedClassName} ${isSelected ? "sidebar-item-selected" : ""}`,
|
|
92
|
-
onClick: () => handleAction(item),
|
|
93
|
-
children: [
|
|
94
|
-
/* @__PURE__ */ jsx(Box, { className: "sidebar-item-icon", children: item.prefixIcon }),
|
|
95
|
-
expanded && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Box, { className: "sidebar-item-content", children: /* @__PURE__ */ jsxs(Box, { verticalAlign: "middle", gap: 2, children: [
|
|
96
|
-
/* @__PURE__ */ jsxs(Box, { direction: "vertical", children: [
|
|
97
|
-
/* @__PURE__ */ jsx(Text, { size: "small", className: "sidebar-item-title", children: item.label }),
|
|
98
|
-
item.subtitle && /* @__PURE__ */ jsx(Text, { size: "small", className: "sidebar-item-subtitle", children: item.subtitle })
|
|
99
|
-
] }),
|
|
100
|
-
item.stateId === "chats" && /* @__PURE__ */ jsx(CounterBadge, { size: "medium", skin: "warning", children: String(itemTotalCount) })
|
|
101
|
-
] }) }) })
|
|
102
|
-
]
|
|
103
|
-
},
|
|
104
|
-
item.stateId
|
|
105
|
-
);
|
|
106
|
-
};
|
|
107
|
-
var sidebar_menu_item_default = SidebarMenuItem;
|
|
108
|
-
|
|
109
|
-
// src/components/Sidebar/footer/avatar-dropdown.wrapper.tsx
|
|
110
|
-
import { useState as useState2 } from "react";
|
|
111
1
|
import {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
DropdownBase,
|
|
115
|
-
TextButton,
|
|
116
|
-
listItemSectionBuilder,
|
|
117
|
-
listItemSelectBuilder,
|
|
118
|
-
Box as Box2,
|
|
119
|
-
Text as Text2
|
|
120
|
-
} from "@wix/design-system";
|
|
121
|
-
|
|
122
|
-
// src/components/Sidebar/footer/status-dots.wrapper.tsx
|
|
123
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
124
|
-
var Online = () => {
|
|
125
|
-
return /* @__PURE__ */ jsx2("div", { style: { width: "8px", height: "8px", borderRadius: "50%", background: "#22c55e", boxShadow: "0 0 0 2px #fff" } });
|
|
126
|
-
};
|
|
127
|
-
var Away = () => {
|
|
128
|
-
return /* @__PURE__ */ jsx2("div", { style: { width: "8px", height: "8px", borderRadius: "50%", background: "#f59e0b", boxShadow: "0 0 0 2px #fff" } });
|
|
129
|
-
};
|
|
130
|
-
var DoNotDisturb = () => {
|
|
131
|
-
return /* @__PURE__ */ jsx2("div", { style: { position: "relative", width: "8px", height: "8px", borderRadius: "50%", background: "#ef4444", boxShadow: "0 0 0 2px #fff" }, children: /* @__PURE__ */ jsx2("div", { style: { position: "absolute", top: "50%", left: "10%", right: "10%", height: "2px", background: "#fff", transform: "translateY(-50%)", borderRadius: "1px" } }) });
|
|
132
|
-
};
|
|
133
|
-
var Offline = () => {
|
|
134
|
-
return /* @__PURE__ */ jsx2("div", { style: { width: "8px", height: "8px", borderRadius: "50%", border: "2px solid #71717a", boxShadow: "0 0 0 2px #fff" } });
|
|
135
|
-
};
|
|
136
|
-
var StatusDots = {
|
|
137
|
-
Online,
|
|
138
|
-
Away,
|
|
139
|
-
DoNotDisturb,
|
|
140
|
-
Offline
|
|
141
|
-
};
|
|
142
|
-
var status_dots_wrapper_default = StatusDots;
|
|
143
|
-
|
|
144
|
-
// src/components/Sidebar/footer/avatar-dropdown.wrapper.tsx
|
|
145
|
-
import { ChevronDown } from "@wix/wix-ui-icons-common";
|
|
146
|
-
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
147
|
-
var AvatarDropdown = ({ status = "online", onStatusChange, onLogout, permissions, agentProfilePictureUrl, agentName, agentRole }) => {
|
|
148
|
-
const [selectedStatus, setSelectedStatus] = useState2(status);
|
|
149
|
-
const handleStatusChange = (newStatus) => {
|
|
150
|
-
setSelectedStatus(newStatus);
|
|
151
|
-
if (onStatusChange) {
|
|
152
|
-
onStatusChange(newStatus);
|
|
153
|
-
}
|
|
154
|
-
};
|
|
155
|
-
const handleLogout = () => {
|
|
156
|
-
if (onLogout) {
|
|
157
|
-
onLogout();
|
|
158
|
-
}
|
|
159
|
-
};
|
|
160
|
-
const options = [
|
|
161
|
-
listItemSectionBuilder({
|
|
162
|
-
id: "status-section",
|
|
163
|
-
title: "Online Status"
|
|
164
|
-
}),
|
|
165
|
-
listItemSelectBuilder({
|
|
166
|
-
id: "online",
|
|
167
|
-
checkbox: true,
|
|
168
|
-
prefix: /* @__PURE__ */ jsx3(status_dots_wrapper_default.Online, {}),
|
|
169
|
-
title: "Online",
|
|
170
|
-
disabled: (permissions == null ? void 0 : permissions["my-tickets-change-agent-online-status"]) === true ? false : true
|
|
171
|
-
}),
|
|
172
|
-
listItemSelectBuilder({
|
|
173
|
-
id: "busy",
|
|
174
|
-
checkbox: true,
|
|
175
|
-
prefix: /* @__PURE__ */ jsx3(status_dots_wrapper_default.Away, {}),
|
|
176
|
-
title: "Away",
|
|
177
|
-
disabled: (permissions == null ? void 0 : permissions["my-tickets-change-agent-online-status"]) === true ? false : true
|
|
178
|
-
}),
|
|
179
|
-
listItemSelectBuilder({
|
|
180
|
-
id: "offline",
|
|
181
|
-
checkbox: true,
|
|
182
|
-
prefix: /* @__PURE__ */ jsx3(status_dots_wrapper_default.DoNotDisturb, {}),
|
|
183
|
-
title: "Offline",
|
|
184
|
-
disabled: (permissions == null ? void 0 : permissions["my-tickets-change-agent-online-status"]) === true ? false : true
|
|
185
|
-
}),
|
|
186
|
-
{ id: "divider-1", value: "-" },
|
|
187
|
-
listItemActionBuilder({
|
|
188
|
-
id: 0,
|
|
189
|
-
title: "Logout",
|
|
190
|
-
onClick: handleLogout
|
|
191
|
-
})
|
|
192
|
-
];
|
|
193
|
-
return /* @__PURE__ */ jsx3(DropdownBase, { options, selectedId: selectedStatus, onSelect: (option) => typeof option.id === "string" && handleStatusChange(option.id), className: "sidebar-avatar-dropdown", minWidth: 0, children: ({ toggle }) => /* @__PURE__ */ jsx3(TextButton, { className: "header-account-button", onClick: toggle, children: /* @__PURE__ */ jsxs2(Box2, { verticalAlign: "middle", gap: 2, textAlign: "start", maxWidth: "100%", minWidth: 0, children: [
|
|
194
|
-
/* @__PURE__ */ jsx3(Avatar, { presence: selectedStatus, name: agentName && !agentProfilePictureUrl ? agentName : void 0, size: "size30", imgProps: !agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl ? { src: agentProfilePictureUrl } : void 0 }),
|
|
195
|
-
/* @__PURE__ */ jsxs2(Box2, { direction: "vertical", gap: 0, verticalAlign: "middle", maxWidth: "100%", minWidth: 0, children: [
|
|
196
|
-
/* @__PURE__ */ jsx3(Text2, { weight: "bold", size: "small", ellipsis: true, maxWidth: "100%", children: agentName ? agentName : "Error getting name" }),
|
|
197
|
-
/* @__PURE__ */ jsx3(Text2, { size: "tiny", secondary: true, ellipsis: true, maxWidth: "100%", children: agentRole ? agentRole : "Error getting role" })
|
|
198
|
-
] }),
|
|
199
|
-
/* @__PURE__ */ jsx3(ChevronDown, {})
|
|
200
|
-
] }) }) });
|
|
201
|
-
};
|
|
202
|
-
var avatar_dropdown_wrapper_default = AvatarDropdown;
|
|
203
|
-
|
|
204
|
-
// src/components/Sidebar/Sidebar.css
|
|
205
|
-
if (typeof document !== "undefined" && !document.getElementById("jrapps-style-eea3023c")) {
|
|
206
|
-
const s = document.createElement("style");
|
|
207
|
-
s.id = "jrapps-style-eea3023c";
|
|
208
|
-
s.textContent = ".sidebar-outer-wrapper {\n position: relative;\n display: flex;\n flex-shrink: 0;\n max-height: 100%;\n}\n\n.sidebar-container {\n background: #f8f7f4;\n max-height: 100% !important;\n border-right: 1px solid #e1e4e8;\n border-left: 1px solid #e1e4e8;\n border-top: 1px solid #e1e4e8;\n display: flex;\n flex-direction: column;\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);\n box-sizing: border-box;\n transition: width 0.3s ease, min-width 0.3s ease;\n overflow: hidden;\n}\n\n.sidebar-container.expanded {\n width: 210px;\n min-width: 210px;\n}\n\n.sidebar-container.closed {\n width: max-content;\n min-width: 0;\n}\n\n.sidebar-header {\n padding: 16px 18px 12px;\n border-bottom: 1px solid #f0f2f5;\n}\n\n.sidebar-header-title {\n margin: 0;\n color: #1a1a1a;\n font-weight: 600;\n font-size: 14px;\n line-height: 1.4;\n text-align: center;\n text-overflow: clip;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.sidebar-items-container.expanded {\n flex: 1;\n width: 100%;\n min-height: 0;\n display: flex;\n column-gap: 15px;\n row-gap: 12px;\n overflow-y: auto;\n padding-top: 8px;\n}\n\n.sidebar-items-container.closed {\n flex: 1;\n width: 100%;\n min-height: 0;\n display: flex;\n column-gap: 15px;\n row-gap: 12px;\n overflow-y: auto;\n padding-top: 8px;\n align-items: center;\n}\n\n.sidebar-items-container::-webkit-scrollbar {\n width: 6px;\n}\n\n.sidebar-items-container::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.sidebar-items-container::-webkit-scrollbar-thumb {\n background: #d0d7de;\n border-radius: 3px;\n}\n\n.sidebar-items-container::-webkit-scrollbar-thumb:hover {\n background: #bec3cc;\n}\n\n.sidebar-section {\n display: flex;\n flex-direction: column;\n}\n\n.sidebar-item,\n.sidebar-item-selected {\n display: flex;\n flex-direction: row;\n column-gap: 12px;\n padding: 8px 8px;\n margin: 0 8px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.sidebar-item.expanded {\n background-color: transparent;\n align-items: center;\n user-select: none;\n}\n\n.sidebar-item.closed {\n align-items: center;\n justify-content: center;\n background-color: transparent;\n user-select: none;\n width: max-content;\n}\n\n.sidebar-item:hover {\n background: rgba(0, 0, 0, 0.04);\n}\n\n.sidebar-item.sidebar-item-selected {\n background: white;\n border: 0.5px solid rgba(0, 0, 0, 0.15);\n align-items: center;\n}\n\n.sidebar-item-icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sidebar-item-content {\n display: flex;\n flex-direction: column;\n flex: 1;\n width: 100%;\n}\n\n.sidebar-item-title-submenu {\n color: #1a1a1a;\n font-weight: 600;\n font-size: 13px;\n line-height: 1.4;\n width: 100%;\n}\n\n.sidebar-item-title-submenu {\n color: #1a1a1a;\n font-weight: 600;\n font-size: 13px;\n line-height: 1.4;\n width: max-content;\n text-align: end;\n}\n\n.sidebar-item-subtitle {\n color: #6d7681;\n font-size: 12px;\n line-height: 1.4;\n margin-top: 2px;\n}\n\n.sidebar-parent-item {\n justify-content: space-between;\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n}\n\n.sidebar-item-chevron {\n flex-shrink: 0;\n color: #6d7681;\n font-size: 10px;\n transition: transform 0.2s ease;\n display: flex;\n align-items: center;\n}\n\n.sidebar-item-chevron.expanded {\n transform: rotate(-180deg);\n}\n\n.sidebar-submenu-container {\n display: flex;\n flex-direction: column;\n row-gap: 8px;\n padding: 0;\n}\n\n.sidebar-child-item {\n padding: 8px 0px 8px 12px;\n margin: 0 8px;\n}\n\n.sidebar-child-item .sidebar-item-title {\n font-weight: 500;\n color: #6d7681;\n}\n\n.sidebar-child-item:hover .sidebar-item-title {\n color: #1a1a1a;\n}\n\n@media (max-width: 1200px) {\n .sidebar-container.expanded {\n width: auto;\n min-width: 210px;\n }\n}\n\n@media (max-width: 768px) {\n .sidebar-container.expanded {\n position: absolute;\n left: 0;\n top: 0;\n height: 100vh;\n z-index: 1000;\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);\n }\n}\n\n.sidebar-header-box {\n padding: 16px 18px 12px;\n border-bottom: 0.5px solid rgba(0, 0, 0, 0.15);\n}\n\n.sidebar-avatar-dropdown {\n min-width: 0px;\n max-width: 100%;\n}\n\n.header-account-button {\n min-width: 0;\n max-width: 100%;\n height: max-content;\n}\n\n.header-account-button span {\n min-width: 0;\n max-width: 100%;\n}\n\n.sidebar-expand-button-container {\n position: absolute;\n top: 3%;\n background: #f8f7f4;\n border: 1px solid #e1e4e8;\n border-radius: 4px;\n cursor: pointer;\n z-index: 1001;\n right: 0;\n transform: translateX(100%) translateY(-50%);\n border-top: 2px solid #e1e4e8;\n border-right: 2px solid #e1e4e8;\n border-bottom: 2px solid #e1e4e8;\n border-left: 0px;\n align-items: center;\n text-align: center;\n}\n\n.sidebar-expand-button-container div {\n align-items: center;\n text-align: center;\n}\n\n.sidebar-footer.expanded {\n padding: 16px 8px 16px 12px;\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\n gap: 2px;\n max-width: 100%;\n min-width: 0;\n}\n\n.sidebar-footer.closed {\n padding: 16px 16px 16px 16px;\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\n gap: 2px;\n max-width: 100%;\n min-width: 0;\n align-items: center;\n justify-content: center;\n}";
|
|
209
|
-
document.head.appendChild(s);
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
// src/components/Sidebar/Sidebar.tsx
|
|
213
|
-
var import_meta = {};
|
|
214
|
-
import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
215
|
-
var Sidebar = forwardRef(
|
|
216
|
-
({
|
|
217
|
-
className,
|
|
218
|
-
children,
|
|
219
|
-
items,
|
|
220
|
-
isOpen,
|
|
221
|
-
onItemSelect,
|
|
222
|
-
onModalClosed,
|
|
223
|
-
selectedId = "",
|
|
224
|
-
onCreateTicketClicked,
|
|
225
|
-
agentName,
|
|
226
|
-
agentRole,
|
|
227
|
-
agentProfilePictureUrl,
|
|
228
|
-
status,
|
|
229
|
-
teamId,
|
|
230
|
-
onStatusChange,
|
|
231
|
-
onLogout,
|
|
232
|
-
permissions
|
|
233
|
-
}, ref) => {
|
|
234
|
-
const [expandedSections, setExpandedSections] = useState3(/* @__PURE__ */ new Set());
|
|
235
|
-
const [expanded, setExpanded] = useState3(true);
|
|
236
|
-
const sidebarRef = useRef(null);
|
|
237
|
-
const SIDEBAR_EXPANDED_WIDTH = "210px";
|
|
238
|
-
const toggleSection = (sectionId) => {
|
|
239
|
-
const newExpanded = new Set(expandedSections);
|
|
240
|
-
if (newExpanded.has(sectionId)) {
|
|
241
|
-
newExpanded.delete(sectionId);
|
|
242
|
-
} else {
|
|
243
|
-
newExpanded.add(sectionId);
|
|
244
|
-
}
|
|
245
|
-
setExpandedSections(newExpanded);
|
|
246
|
-
};
|
|
247
|
-
const handleItemClick = (id) => {
|
|
248
|
-
onItemSelect == null ? void 0 : onItemSelect(id);
|
|
249
|
-
};
|
|
250
|
-
const toggleSidebar = () => {
|
|
251
|
-
const el = sidebarRef.current;
|
|
252
|
-
if (!el) {
|
|
253
|
-
setExpanded(!expanded);
|
|
254
|
-
return;
|
|
255
|
-
}
|
|
256
|
-
if (expanded) {
|
|
257
|
-
setExpanded(false);
|
|
258
|
-
} else {
|
|
259
|
-
const currentWidth = el.offsetWidth;
|
|
260
|
-
const clearInlineStyles = () => {
|
|
261
|
-
el.style.width = "";
|
|
262
|
-
el.style.minWidth = "";
|
|
263
|
-
el.style.transition = "";
|
|
264
|
-
el.removeEventListener("transitionend", clearInlineStyles);
|
|
265
|
-
};
|
|
266
|
-
el.style.transition = "none";
|
|
267
|
-
el.style.width = `${currentWidth}px`;
|
|
268
|
-
el.style.minWidth = `${currentWidth}px`;
|
|
269
|
-
void el.offsetHeight;
|
|
270
|
-
el.style.transition = "";
|
|
271
|
-
el.style.width = SIDEBAR_EXPANDED_WIDTH;
|
|
272
|
-
el.style.minWidth = SIDEBAR_EXPANDED_WIDTH;
|
|
273
|
-
el.addEventListener("transitionend", clearInlineStyles, { once: true });
|
|
274
|
-
setExpanded(true);
|
|
275
|
-
}
|
|
276
|
-
};
|
|
277
|
-
const rootItems = items.filter((item) => !item.parent || item.parent === "default");
|
|
278
|
-
const currentUrl = new URL(import_meta.url);
|
|
279
|
-
const expandedClassName = expanded ? "expanded" : "closed";
|
|
280
|
-
return /* @__PURE__ */ jsxs3("div", { className: "sidebar-outer-wrapper", ref, children: [
|
|
281
|
-
/* @__PURE__ */ jsx4("div", { className: "sidebar-expand-button-container", children: /* @__PURE__ */ jsx4("div", { onClick: toggleSidebar, children: expanded ? /* @__PURE__ */ jsx4(ChevronLeft, {}) : /* @__PURE__ */ jsx4(ChevronRight, {}) }) }),
|
|
282
|
-
/* @__PURE__ */ jsx4("div", { ref: sidebarRef, className: `sidebar-container ${expanded ? "expanded" : "closed"}`, children: isOpen && /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
283
|
-
/* @__PURE__ */ jsxs3(Box3, { className: "sidebar-header-box", direction: "horizontal", gap: "13px", WebkitAlignItems: "center", children: [
|
|
284
|
-
/* @__PURE__ */ jsx4("img", { width: "37px", height: "37px", src: currentUrl.origin + "/logo.png", alt: "My Tickets Logo", className: "sidebar-logo" }),
|
|
285
|
-
expanded && /* @__PURE__ */ jsx4(Text3, { className: "header-title", children: "My Tickets" })
|
|
286
|
-
] }),
|
|
287
|
-
/* @__PURE__ */ jsx4(Box3, { className: `sidebar-items-container ${expandedClassName}`, direction: "vertical", children: rootItems.map((item) => /* @__PURE__ */ jsx4(
|
|
288
|
-
sidebar_menu_item_default,
|
|
289
|
-
{
|
|
290
|
-
item,
|
|
291
|
-
items,
|
|
292
|
-
expanded,
|
|
293
|
-
expandedClassName,
|
|
294
|
-
selectedId,
|
|
295
|
-
expandedSections,
|
|
296
|
-
teamId,
|
|
297
|
-
onToggleSection: toggleSection,
|
|
298
|
-
onItemClick: handleItemClick,
|
|
299
|
-
onModalClosed,
|
|
300
|
-
onCreateTicketClicked,
|
|
301
|
-
totalCount: item.totalCount || 0
|
|
302
|
-
},
|
|
303
|
-
item.stateId
|
|
304
|
-
)) }),
|
|
305
|
-
/* @__PURE__ */ jsx4(Box3, { direction: "horizontal", className: `sidebar-footer ${expandedClassName}`, children: /* @__PURE__ */ jsxs3(Box3, { marginTop: "2px", maxWidth: "100%", minWidth: 0, children: [
|
|
306
|
-
expanded && /* @__PURE__ */ jsx4(avatar_dropdown_wrapper_default, { status, onStatusChange, onLogout, permissions, agentProfilePictureUrl, agentName, agentRole }),
|
|
307
|
-
!expanded && /* @__PURE__ */ jsx4(Avatar2, { name: agentName && !agentProfilePictureUrl ? agentName : void 0, size: "size30", imgProps: !agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl ? { src: agentProfilePictureUrl } : void 0 })
|
|
308
|
-
] }) })
|
|
309
|
-
] }) })
|
|
310
|
-
] });
|
|
311
|
-
}
|
|
312
|
-
);
|
|
313
|
-
Sidebar.displayName = "Sidebar";
|
|
2
|
+
Sidebar
|
|
3
|
+
} from "../../chunks/chunk-4XEQQFOL.js";
|
|
314
4
|
export {
|
|
315
5
|
Sidebar
|
|
316
6
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": [
|
|
4
|
-
"sourcesContent": ["import { useRef, useState, forwardRef } from 'react';\nimport type { SidebarProps } from './Sidebar.types';\nimport { Avatar, Box, Text } from '@wix/design-system';\nimport { ChevronLeft, ChevronRight } from '@wix/wix-ui-icons-common';\nimport SidebarMenuItem from './sidebar-menu-item';\nimport AvatarDropdown from './footer/avatar-dropdown.wrapper';\nimport './Sidebar.css';\n\nexport const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(\n ({ \n className, \n children, \n items,\n isOpen,\n onItemSelect,\n onModalClosed,\n selectedId = '',\n onCreateTicketClicked,\n agentName,\n agentRole,\n agentProfilePictureUrl,\n status,\n teamId,\n onStatusChange,\n onLogout,\n permissions\n }, ref) => {\n const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set());\n const [expanded, setExpanded] = useState(true);\n const sidebarRef = useRef<HTMLDivElement>(null);\n const SIDEBAR_EXPANDED_WIDTH = '210px';\n\n const toggleSection = (sectionId: string) => {\n const newExpanded = new Set(expandedSections);\n if (newExpanded.has(sectionId)) {\n newExpanded.delete(sectionId);\n } else {\n newExpanded.add(sectionId);\n }\n setExpandedSections(newExpanded);\n };\n\n const handleItemClick = (id: string) => {\n onItemSelect?.(id);\n };\n\n const toggleSidebar = () => {\n const el = sidebarRef.current;\n if (!el) { setExpanded(!expanded); return; }\n\n if (expanded) {\n // Collapsing: instant, no animation\n setExpanded(false);\n } else {\n // Expanding: animate from current to 210px\n const currentWidth = el.offsetWidth;\n\n const clearInlineStyles = () => {\n el.style.width = '';\n el.style.minWidth = '';\n el.style.transition = '';\n el.removeEventListener('transitionend', clearInlineStyles);\n };\n\n el.style.transition = 'none';\n el.style.width = `${currentWidth}px`;\n el.style.minWidth = `${currentWidth}px`;\n void el.offsetHeight; // force reflow\n el.style.transition = '';\n el.style.width = SIDEBAR_EXPANDED_WIDTH;\n el.style.minWidth = SIDEBAR_EXPANDED_WIDTH;\n\n el.addEventListener('transitionend', clearInlineStyles, { once: true });\n setExpanded(true);\n }\n }\n\n const rootItems = items.filter(item => !item.parent || item.parent === 'default');\n const currentUrl = new URL(import.meta.url);\n const expandedClassName = expanded ? 'expanded' : 'closed';\n return (\n <div className=\"sidebar-outer-wrapper\" ref={ref}>\n <div className='sidebar-expand-button-container'><div onClick={toggleSidebar}>{expanded ? <ChevronLeft /> : <ChevronRight />}</div></div>\n <div ref={sidebarRef} className={`sidebar-container ${expanded ? 'expanded' : 'closed'}`}>\n {isOpen && (\n <>\n <Box className=\"sidebar-header-box\" direction=\"horizontal\" gap={'13px'} WebkitAlignItems={'center'}>\n <img width={'37px'} height={'37px'} src={currentUrl.origin + '/logo.png'} alt=\"My Tickets Logo\" className='sidebar-logo' />\n {expanded && <Text className=\"header-title\">My Tickets</Text>}\n </Box>\n <Box className={`sidebar-items-container ${expandedClassName}`} direction=\"vertical\">\n {rootItems.map((item) => (\n <SidebarMenuItem\n key={item.stateId}\n item={item}\n items={items}\n expanded={expanded}\n expandedClassName={expandedClassName}\n selectedId={selectedId}\n expandedSections={expandedSections}\n teamId={teamId}\n onToggleSection={toggleSection}\n onItemClick={handleItemClick}\n onModalClosed={onModalClosed}\n onCreateTicketClicked={onCreateTicketClicked}\n totalCount={item.totalCount || 0}\n />\n ))}\n </Box>\n <Box direction='horizontal' className={`sidebar-footer ${expandedClassName}`}>\n <Box marginTop={'2px'} maxWidth={'100%'} minWidth={0}>\n {expanded && <AvatarDropdown status={status} onStatusChange={onStatusChange} onLogout={onLogout} permissions={permissions} agentProfilePictureUrl={agentProfilePictureUrl} agentName={agentName} agentRole={agentRole} />}\n {!expanded && <Avatar name={agentName && !agentProfilePictureUrl ? agentName : undefined} size=\"size30\" imgProps={(!agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl) ? { src: agentProfilePictureUrl } : undefined} />}\n </Box>\n </Box>\n </>\n )}\n </div>\n </div>\n );\n }\n);\n\nSidebar.displayName = 'Sidebar';\n", "import type { FC } from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Text, CounterBadge } from '@wix/design-system';\nimport { dashboard } from '@wix/dashboard';\n\nimport type { SidebarMenuItemProps, SideBarItem } from './Sidebar.types';\n\nconst SidebarMenuItem: FC<SidebarMenuItemProps> = ({\n item,\n items,\n expanded,\n expandedClassName,\n selectedId,\n expandedSections,\n teamId,\n totalCount,\n onToggleSection,\n onItemClick,\n onModalClosed,\n onCreateTicketClicked,\n}) => {\n const [itemTotalCount, setItemTotalCount] = useState<number | string>(totalCount);\n const hasChildren = items.some(i => i.parent === item.stateId);\n const isExpanded = expandedSections.has(item.stateId);\n const isSelected = selectedId === item.stateId;\n\n useEffect(() => {\n setItemTotalCount(totalCount);\n }, [totalCount]);\n\n const handleAction = async (actionItem: SideBarItem) => {\n if (actionItem.type === 'page') {\n onItemClick(actionItem.stateId);\n } else if (actionItem.type === 'modal') {\n const { modalClosed } = dashboard.openModal({ modalId: String(actionItem.modalId), params: actionItem.modalParams });\n modalClosed.then((result: any) => {\n if (result && onModalClosed) {\n onModalClosed(result);\n }\n });\n } else if (actionItem.type === 'custom_modal') {\n onCreateTicketClicked?.();\n } else if (actionItem.type === 'link') {\n const generatedLink = await dashboard.getPageUrl({ pageId: \"9f1191cb-46cb-4280-af8d-5c15d89aced8\", relativeUrl: actionItem.link || '' });\n window.open(generatedLink, '_blank')\n }\n };\n\n if (hasChildren) {\n const children = items.filter(i => i.parent === item.stateId);\n return (\n <div key={item.stateId} className=\"sidebar-section\">\n <div\n className={`sidebar-item sidebar-parent-item ${isSelected ? 'sidebar-item-selected' : ''}`}\n onClick={() => onToggleSection(item.stateId)}\n >\n <Box className=\"sidebar-item-icon\">{item.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\" direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title\">{item.label}</Text>\n {item.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{item.subtitle}</Text>}\n </Box>\n <Box className={`sidebar-item-chevron ${isExpanded ? 'expanded' : ''}`}>\n \u25BC\n </Box>\n </>\n )}\n </div>\n {isExpanded && (\n <Box className=\"sidebar-submenu-container\" direction=\"vertical\">\n {children.map((child) => (\n <div\n key={child.stateId}\n className={`sidebar-item sidebar-child-item ${expandedClassName} ${selectedId === child.stateId ? 'sidebar-item-selected' : ''}`}\n onClick={() => handleAction(child)}\n >\n <Box className=\"sidebar-item-icon\">{child.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\" direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title-submenu\">{child.label}</Text>\n {child.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{child.subtitle}</Text>}\n </Box>\n </>\n )}\n </div>\n ))}\n </Box>\n )}\n </div>\n );\n }\n\n return (\n <div\n key={item.stateId}\n className={`sidebar-item ${expandedClassName} ${isSelected ? 'sidebar-item-selected' : ''}`}\n onClick={() => handleAction(item)}\n >\n <Box className=\"sidebar-item-icon\">{item.prefixIcon}</Box>\n {expanded && (\n <>\n <Box className=\"sidebar-item-content\">\n <Box verticalAlign='middle' gap={2}>\n <Box direction=\"vertical\">\n <Text size='small' className=\"sidebar-item-title\">{item.label}</Text>\n {item.subtitle && <Text size='small' className=\"sidebar-item-subtitle\">{item.subtitle}</Text>}\n </Box>\n {item.stateId === \"chats\" && <CounterBadge size=\"medium\" skin=\"warning\">{String(itemTotalCount)}</CounterBadge>}\n </Box>\n </Box>\n </>\n )}\n </div>\n );\n};\n\nexport default SidebarMenuItem;\n", "import { useState, type FC } from 'react';\nimport {\n Avatar,\n listItemActionBuilder,\n DropdownBase,\n TextButton,\n listItemSectionBuilder,\n listItemSelectBuilder,\n Box,\n Text\n} from '@wix/design-system';\nimport StatusDots from './status-dots.wrapper';\nimport { ChevronDown } from '@wix/wix-ui-icons-common';\n\nimport type { Status, AvatarDropdownWrapperProps } from '../Sidebar.types';\n\nconst AvatarDropdown: FC<AvatarDropdownWrapperProps> = ({ status = 'online', onStatusChange, onLogout, permissions, agentProfilePictureUrl, agentName, agentRole }) => {\n const [selectedStatus, setSelectedStatus] = useState<Status>(status);\n\n const handleStatusChange = (newStatus: Status) => {\n setSelectedStatus(newStatus);\n if (onStatusChange) {\n onStatusChange(newStatus);\n }\n };\n\n const handleLogout = () => {\n if (onLogout) {\n onLogout();\n }\n };\n\n const options = [\n listItemSectionBuilder({\n id: 'status-section',\n title: 'Online Status',\n }),\n listItemSelectBuilder({\n id: 'online',\n checkbox: true,\n prefix: <StatusDots.Online />,\n title: 'Online',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n listItemSelectBuilder({\n id: 'busy',\n checkbox: true,\n prefix: <StatusDots.Away />,\n title: 'Away',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n listItemSelectBuilder({\n id: 'offline',\n checkbox: true,\n prefix: <StatusDots.DoNotDisturb />,\n title: 'Offline',\n disabled: permissions?.['my-tickets-change-agent-online-status'] === true ? false : true,\n }),\n { id: 'divider-1', value: '-' },\n listItemActionBuilder({\n id: 0,\n title: 'Logout',\n onClick: handleLogout,\n }),\n ];\n\n return (\n <DropdownBase options={options} selectedId={selectedStatus} onSelect={(option: any) => typeof option.id === 'string' && handleStatusChange(option.id as Status)} className='sidebar-avatar-dropdown' minWidth={0}>\n {({ toggle }: any) => (\n <TextButton className=\"header-account-button\" onClick={toggle}>\n <Box verticalAlign='middle' gap={2} textAlign='start' maxWidth={'100%'} minWidth={0}>\n <Avatar presence={selectedStatus} name={agentName && !agentProfilePictureUrl ? agentName : undefined} size=\"size30\" imgProps={(!agentName && agentProfilePictureUrl || agentName && agentProfilePictureUrl) ? { src: agentProfilePictureUrl } : undefined} />\n <Box direction='vertical' gap={0} verticalAlign='middle' maxWidth={'100%'} minWidth={0}>\n <Text weight='bold' size='small' ellipsis maxWidth={'100%'}>{agentName ? agentName : 'Error getting name'}</Text>\n <Text size=\"tiny\" secondary ellipsis maxWidth={'100%'}>{agentRole ? agentRole : 'Error getting role'}</Text>\n </Box>\n <ChevronDown />\n </Box>\n </TextButton>\n )}\n </DropdownBase>\n )\n}\n\nexport default AvatarDropdown;", "const Online = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#22c55e', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst Away = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#f59e0b', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst DoNotDisturb = () => {\n return <div style={{ position: 'relative', width: '8px', height: '8px', borderRadius: '50%', background: '#ef4444', boxShadow: '0 0 0 2px #fff' }}>\n <div style={{ position: 'absolute', top: '50%', left: '10%', right: '10%', height: '2px', background: '#fff', transform: 'translateY(-50%)', borderRadius: '1px' }}></div>\n </div>\n}\n\nconst Offline = () => {\n return <div style={{ width: '8px', height: '8px', borderRadius: '50%', border: '2px solid #71717a', boxShadow: '0 0 0 2px #fff' }}></div>\n}\n\nconst StatusDots = {\n Online,\n Away,\n DoNotDisturb,\n Offline,\n}\n\nexport default StatusDots;", "if (typeof document !== 'undefined' && !document.getElementById(\"jrapps-style-eea3023c\")) {\n const s = document.createElement('style');\n s.id = \"jrapps-style-eea3023c\";\n s.textContent = \".sidebar-outer-wrapper {\\n position: relative;\\n display: flex;\\n flex-shrink: 0;\\n max-height: 100%;\\n}\\n\\n.sidebar-container {\\n background: #f8f7f4;\\n max-height: 100% !important;\\n border-right: 1px solid #e1e4e8;\\n border-left: 1px solid #e1e4e8;\\n border-top: 1px solid #e1e4e8;\\n display: flex;\\n flex-direction: column;\\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);\\n box-sizing: border-box;\\n transition: width 0.3s ease, min-width 0.3s ease;\\n overflow: hidden;\\n}\\n\\n.sidebar-container.expanded {\\n width: 210px;\\n min-width: 210px;\\n}\\n\\n.sidebar-container.closed {\\n width: max-content;\\n min-width: 0;\\n}\\n\\n.sidebar-header {\\n padding: 16px 18px 12px;\\n border-bottom: 1px solid #f0f2f5;\\n}\\n\\n.sidebar-header-title {\\n margin: 0;\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 14px;\\n line-height: 1.4;\\n text-align: center;\\n text-overflow: clip;\\n white-space: nowrap;\\n overflow: hidden;\\n}\\n\\n.sidebar-items-container.expanded {\\n flex: 1;\\n width: 100%;\\n min-height: 0;\\n display: flex;\\n column-gap: 15px;\\n row-gap: 12px;\\n overflow-y: auto;\\n padding-top: 8px;\\n}\\n\\n.sidebar-items-container.closed {\\n flex: 1;\\n width: 100%;\\n min-height: 0;\\n display: flex;\\n column-gap: 15px;\\n row-gap: 12px;\\n overflow-y: auto;\\n padding-top: 8px;\\n align-items: center;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar {\\n width: 6px;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-track {\\n background: transparent;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-thumb {\\n background: #d0d7de;\\n border-radius: 3px;\\n}\\n\\n.sidebar-items-container::-webkit-scrollbar-thumb:hover {\\n background: #bec3cc;\\n}\\n\\n.sidebar-section {\\n display: flex;\\n flex-direction: column;\\n}\\n\\n.sidebar-item,\\n.sidebar-item-selected {\\n display: flex;\\n flex-direction: row;\\n column-gap: 12px;\\n padding: 8px 8px;\\n margin: 0 8px;\\n border-radius: 8px;\\n cursor: pointer;\\n transition: all 0.2s ease;\\n}\\n\\n.sidebar-item.expanded {\\n background-color: transparent;\\n align-items: center;\\n user-select: none;\\n}\\n\\n.sidebar-item.closed {\\n align-items: center;\\n justify-content: center;\\n background-color: transparent;\\n user-select: none;\\n width: max-content;\\n}\\n\\n.sidebar-item:hover {\\n background: rgba(0, 0, 0, 0.04);\\n}\\n\\n.sidebar-item.sidebar-item-selected {\\n background: white;\\n border: 0.5px solid rgba(0, 0, 0, 0.15);\\n align-items: center;\\n}\\n\\n.sidebar-item-icon {\\n flex-shrink: 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.sidebar-item-content {\\n display: flex;\\n flex-direction: column;\\n flex: 1;\\n width: 100%;\\n}\\n\\n.sidebar-item-title-submenu {\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 13px;\\n line-height: 1.4;\\n width: 100%;\\n}\\n\\n.sidebar-item-title-submenu {\\n color: #1a1a1a;\\n font-weight: 600;\\n font-size: 13px;\\n line-height: 1.4;\\n width: max-content;\\n text-align: end;\\n}\\n\\n.sidebar-item-subtitle {\\n color: #6d7681;\\n font-size: 12px;\\n line-height: 1.4;\\n margin-top: 2px;\\n}\\n\\n.sidebar-parent-item {\\n justify-content: space-between;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n border-top-left-radius: 0px;\\n border-top-right-radius: 0px;\\n}\\n\\n.sidebar-item-chevron {\\n flex-shrink: 0;\\n color: #6d7681;\\n font-size: 10px;\\n transition: transform 0.2s ease;\\n display: flex;\\n align-items: center;\\n}\\n\\n.sidebar-item-chevron.expanded {\\n transform: rotate(-180deg);\\n}\\n\\n.sidebar-submenu-container {\\n display: flex;\\n flex-direction: column;\\n row-gap: 8px;\\n padding: 0;\\n}\\n\\n.sidebar-child-item {\\n padding: 8px 0px 8px 12px;\\n margin: 0 8px;\\n}\\n\\n.sidebar-child-item .sidebar-item-title {\\n font-weight: 500;\\n color: #6d7681;\\n}\\n\\n.sidebar-child-item:hover .sidebar-item-title {\\n color: #1a1a1a;\\n}\\n\\n@media (max-width: 1200px) {\\n .sidebar-container.expanded {\\n width: auto;\\n min-width: 210px;\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .sidebar-container.expanded {\\n position: absolute;\\n left: 0;\\n top: 0;\\n height: 100vh;\\n z-index: 1000;\\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);\\n }\\n}\\n\\n.sidebar-header-box {\\n padding: 16px 18px 12px;\\n border-bottom: 0.5px solid rgba(0, 0, 0, 0.15);\\n}\\n\\n.sidebar-avatar-dropdown {\\n min-width: 0px;\\n max-width: 100%;\\n}\\n\\n.header-account-button {\\n min-width: 0;\\n max-width: 100%;\\n height: max-content;\\n}\\n\\n.header-account-button span {\\n min-width: 0;\\n max-width: 100%;\\n}\\n\\n.sidebar-expand-button-container {\\n position: absolute;\\n top: 3%;\\n background: #f8f7f4;\\n border: 1px solid #e1e4e8;\\n border-radius: 4px;\\n cursor: pointer;\\n z-index: 1001;\\n right: 0;\\n transform: translateX(100%) translateY(-50%);\\n border-top: 2px solid #e1e4e8;\\n border-right: 2px solid #e1e4e8;\\n border-bottom: 2px solid #e1e4e8;\\n border-left: 0px;\\n align-items: center;\\n text-align: center;\\n}\\n\\n.sidebar-expand-button-container div {\\n align-items: center;\\n text-align: center;\\n}\\n\\n.sidebar-footer.expanded {\\n padding: 16px 8px 16px 12px;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n gap: 2px;\\n max-width: 100%;\\n min-width: 0;\\n}\\n\\n.sidebar-footer.closed {\\n padding: 16px 16px 16px 16px;\\n border-top: 0.5px solid rgba(0, 0, 0, 0.15);\\n gap: 2px;\\n max-width: 100%;\\n min-width: 0;\\n align-items: center;\\n justify-content: center;\\n}\";\n document.head.appendChild(s);\n}"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": [
|
|
3
|
+
"sources": [],
|
|
4
|
+
"sourcesContent": [],
|
|
5
|
+
"mappings": "",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
} from "./chunks/chunk-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
"src/index.ts"() {
|
|
8
|
-
}
|
|
9
|
-
});
|
|
10
|
-
export default require_src();
|
|
2
|
+
Sidebar
|
|
3
|
+
} from "./chunks/chunk-4XEQQFOL.js";
|
|
4
|
+
export {
|
|
5
|
+
Sidebar
|
|
6
|
+
};
|
|
11
7
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
package/dist/types/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
2
|
-
var __commonJS = (cb, mod) => function __require() {
|
|
3
|
-
try {
|
|
4
|
-
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
5
|
-
} catch (e) {
|
|
6
|
-
throw mod = 0, e;
|
|
7
|
-
}
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export {
|
|
11
|
-
__commonJS
|
|
12
|
-
};
|
|
13
|
-
//# sourceMappingURL=chunk-NRCRLAHV.js.map
|