funuicss 3.8.16 → 3.8.17

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.
Files changed (4) hide show
  1. package/css/fun.css +2 -2
  2. package/package.json +1 -1
  3. package/ui/sidebar/SideBar.d.ts +4 -1
  4. package/ui/sidebar/SideBar.js +630 -258
package/css/fun.css CHANGED
@@ -2093,11 +2093,10 @@ border-radius: var(--borderRadius);
2093
2093
  .dropdown-menu {
2094
2094
  position: absolute;
2095
2095
  z-index: 9999 !important;
2096
- background-color: var(--lighter);
2096
+ background-color: var(--page-bg);
2097
2097
  border: var(--border);
2098
2098
  border-radius: 0.5rem;
2099
2099
  box-shadow: var(--card);
2100
- backdrop-filter: blur(2px);
2101
2100
  overflow: auto;
2102
2101
  animation: dropdownFadeIn 0.15s ease-out;
2103
2102
  }
@@ -6904,6 +6903,7 @@ color: var(--primary) !important;
6904
6903
  .h-1450-f { height: 1450px !important; }
6905
6904
  .h-1500-f { height: 1500px !important; }
6906
6905
 
6906
+
6907
6907
  /* percentage */
6908
6908
  .h-10-p { height: 10% !important; }
6909
6909
  .h-20-p { height: 20% !important; }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.8.16",
2
+ "version": "3.8.17",
3
3
  "name": "funuicss",
4
4
  "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
5
5
  "main": "index.js",
package/ui/sidebar/SideBar.d.ts CHANGED
@@ -27,6 +27,9 @@ interface SideBarProps {
27
27
  onClose?: () => void;
28
28
  isAccordion?: boolean;
29
29
  togglePrefix?: ReactNode;
30
+ isCollapsed?: boolean;
31
+ onCollapseChange?: (collapsed: boolean) => void;
30
32
  }
31
- export default function SideBar({ funcss, position, open, header, content, footer, top, sidebarWidth, iconCSS, sidebarCss, activeCss, bodyCss, popIcon, dividers, accordionItemCss, links, children, onClose, togglePrefix, isAccordion, }: SideBarProps): React.JSX.Element;
33
+ export default function SideBar({ funcss, position, open, header, content, footer, top, sidebarWidth, iconCSS, sidebarCss, activeCss, bodyCss, popIcon, dividers, accordionItemCss, links, children, onClose, togglePrefix, isAccordion, isCollapsed, // Default to true as requested
34
+ onCollapseChange, }: SideBarProps): React.JSX.Element;
32
35
  export {};
package/ui/sidebar/SideBar.js CHANGED
@@ -1,4 +1,522 @@
1
1
  "use strict";
2
+ 'use client';
3
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
4
+ if (k2 === undefined) k2 = k;
5
+ var desc = Object.getOwnPropertyDescriptor(m, k);
6
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
7
+ desc = { enumerable: true, get: function() { return m[k]; } };
8
+ }
9
+ Object.defineProperty(o, k2, desc);
10
+ }) : (function(o, m, k, k2) {
11
+ if (k2 === undefined) k2 = k;
12
+ o[k2] = m[k];
13
+ }));
14
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
15
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
16
+ }) : function(o, v) {
17
+ o["default"] = v;
18
+ });
19
+ var __importStar = (this && this.__importStar) || (function () {
20
+ var ownKeys = function(o) {
21
+ ownKeys = Object.getOwnPropertyNames || function (o) {
22
+ var ar = [];
23
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
24
+ return ar;
25
+ };
26
+ return ownKeys(o);
27
+ };
28
+ return function (mod) {
29
+ if (mod && mod.__esModule) return mod;
30
+ var result = {};
31
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
32
+ __setModuleDefault(result, mod);
33
+ return result;
34
+ };
35
+ })();
36
+ var __importDefault = (this && this.__importDefault) || function (mod) {
37
+ return (mod && mod.__esModule) ? mod : { "default": mod };
38
+ };
39
+ Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.default = SideBar;
41
+ var react_1 = __importStar(require("react"));
42
+ var Text_1 = __importDefault(require("../text/Text"));
43
+ var navigation_1 = require("next/navigation");
44
+ var theme_1 = require("../theme/theme");
45
+ var Button_1 = __importDefault(require("../button/Button"));
46
+ var Accordion_1 = __importDefault(require("../accordion/Accordion"));
47
+ var bs_1 = require("react-icons/bs");
48
+ var Flex_1 = __importDefault(require("../flex/Flex"));
49
+ function SideBar(_a) {
50
+ var _b, _c;
51
+ var _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.position, position = _e === void 0 ? 'left' : _e, _f = _a.open, open = _f === void 0 ? false : _f, header = _a.header, content = _a.content, footer = _a.footer, _g = _a.top, top = _g === void 0 ? 0 : _g, _h = _a.sidebarWidth, sidebarWidth = _h === void 0 ? 250 : _h, _j = _a.iconCSS, iconCSS = _j === void 0 ? '' : _j, _k = _a.sidebarCss, sidebarCss = _k === void 0 ? '' : _k, activeCss = _a.activeCss, _l = _a.bodyCss, bodyCss = _l === void 0 ? '' : _l, _m = _a.popIcon, popIcon = _m === void 0 ? false : _m, _o = _a.dividers, dividers = _o === void 0 ? false : _o, accordionItemCss = _a.accordionItemCss, _p = _a.links, links = _p === void 0 ? [] : _p, children = _a.children, onClose = _a.onClose, togglePrefix = _a.togglePrefix, _q = _a.isAccordion, isAccordion = _q === void 0 ? false : _q, _r = _a.isCollapsed, isCollapsed = _r === void 0 ? true : _r, // Default to true as requested
52
+ onCollapseChange = _a.onCollapseChange;
53
+ var _s = (0, react_1.useState)(false), isMobile = _s[0], setIsMobile = _s[1];
54
+ var _t = (0, react_1.useState)(open), internalOpen = _t[0], setInternalOpen = _t[1];
55
+ var _u = (0, react_1.useState)('0px'), appBarHeight = _u[0], setAppBarHeight = _u[1];
56
+ var _v = (0, react_1.useState)(isCollapsed), collapsed = _v[0], setCollapsed = _v[1]; // Initialize with prop
57
+ var pathname = (0, navigation_1.usePathname)();
58
+ var sidebarRef = (0, react_1.useRef)(null);
59
+ var variant = (0, theme_1.useVariant)().variant;
60
+ var _w = (0, react_1.useState)(''), selectedOption = _w[0], setselectedOption = _w[1];
61
+ var updateIsMobile = (0, react_1.useCallback)(function () {
62
+ setIsMobile(window.innerWidth <= 992);
63
+ }, []);
64
+ (0, react_1.useEffect)(function () {
65
+ updateIsMobile();
66
+ window.addEventListener('resize', updateIsMobile);
67
+ return function () { return window.removeEventListener('resize', updateIsMobile); };
68
+ }, [updateIsMobile]);
69
+ // Sync internal state with prop changes
70
+ (0, react_1.useEffect)(function () {
71
+ setInternalOpen(open);
72
+ }, [open]);
73
+ // Sync collapsed state with prop changes
74
+ (0, react_1.useEffect)(function () {
75
+ setCollapsed(isCollapsed);
76
+ }, [isCollapsed]);
77
+ (0, react_1.useEffect)(function () {
78
+ var appBar = document.querySelector('#appBar');
79
+ if (appBar) {
80
+ setAppBarHeight("".concat(appBar.offsetHeight, "px"));
81
+ }
82
+ }, []);
83
+ (0, react_1.useEffect)(function () {
84
+ if (!isMobile || !internalOpen)
85
+ return;
86
+ var handleOutsideClick = function (e) {
87
+ if (sidebarRef.current && !sidebarRef.current.contains(e.target)) {
88
+ handleClose();
89
+ }
90
+ };
91
+ document.addEventListener('mousedown', handleOutsideClick);
92
+ document.addEventListener('touchstart', handleOutsideClick);
93
+ return function () {
94
+ document.removeEventListener('mousedown', handleOutsideClick);
95
+ document.removeEventListener('touchstart', handleOutsideClick);
96
+ };
97
+ }, [isMobile, internalOpen]);
98
+ var handleClose = function () {
99
+ setInternalOpen(false);
100
+ onClose === null || onClose === void 0 ? void 0 : onClose();
101
+ };
102
+ var toggleCollapse = function () {
103
+ var newCollapsed = !collapsed;
104
+ setCollapsed(newCollapsed);
105
+ onCollapseChange === null || onCollapseChange === void 0 ? void 0 : onCollapseChange(newCollapsed);
106
+ };
107
+ var groupedLinks = links.reduce(function (acc, link) {
108
+ acc[link.section] = acc[link.section] || [];
109
+ acc[link.section].push(link);
110
+ return acc;
111
+ }, {});
112
+ var isOverlay = isMobile;
113
+ // Prepare accordion items when isAccordion is true
114
+ var accordionItems = isAccordion
115
+ ? Object.entries(groupedLinks).map(function (_a) {
116
+ var _b;
117
+ var section = _a[0], sectionLinks = _a[1];
118
+ return ({
119
+ icon: (_b = sectionLinks[0]) === null || _b === void 0 ? void 0 : _b.icon,
120
+ title: section,
121
+ content: (react_1.default.createElement("div", { className: "sidebar-accordion-links" }, sectionLinks.map(function (link, index) {
122
+ var isActive = link.onClick
123
+ ? selectedOption === "".concat(section, "-").concat(index)
124
+ : pathname === link.uri;
125
+ return (react_1.default.createElement("div", { onClick: function () {
126
+ if (isMobile) {
127
+ handleClose();
128
+ }
129
+ if (link === null || link === void 0 ? void 0 : link.onClick) {
130
+ link.onClick();
131
+ setselectedOption("".concat(section, "-").concat(index));
132
+ }
133
+ else {
134
+ window.location.href = link.uri;
135
+ }
136
+ }, key: link.uri },
137
+ react_1.default.createElement(Button_1.default, { fullWidth: true, small: true, funcss: "sidebar-link ".concat(isActive ? "" : "p-0", " text-left ").concat(isActive ? "primary ".concat(activeCss || '') : 'hoverable'), startIcon: react_1.default.createElement("span", { className: "".concat(iconCSS || '', " ").concat(variant === 'standard' || popIcon
138
+ ? "p-1 ".concat(isActive ? 'primary' : 'lighter text-primary border', " central")
139
+ : variant === 'minimal' && !isActive
140
+ ? 'p-1 central lighter text-primary'
141
+ : ''), style: { lineHeight: 0, borderRadius: '0.4rem' } }, link.icon) }, !collapsed && react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
142
+ }))),
143
+ });
144
+ })
145
+ : [];
146
+ // Get current sidebar width based on collapsed state
147
+ var currentSidebarWidth = collapsed ? 70 : sidebarWidth;
148
+ var collapseIconSize = '18px';
149
+ return (react_1.default.createElement("div", { className: "sidebar-container ".concat(isOverlay ? '' : 'with-content') },
150
+ internalOpen && collapsed && (react_1.default.createElement("aside", { role: "complementary", ref: sidebarRef, className: "sidebar collapsed ".concat(funcss, " ").concat(sidebarCss, " ").concat(isOverlay ? 'nav_overlay' : ''), style: (_b = {
151
+ width: isOverlay ? '100%' : "".concat(currentSidebarWidth, "px"),
152
+ height: "calc(100vh - ".concat(appBarHeight || top || '0px', ")"),
153
+ position: 'fixed',
154
+ top: appBarHeight || top
155
+ },
156
+ _b[position] = 0,
157
+ _b.padding = '0.5rem',
158
+ _b.overflow = 'visible',
159
+ _b) },
160
+ react_1.default.createElement("div", { className: 'pointer text-primary text-center p-1 bb mb', style: { fontSize: collapseIconSize, lineHeight: 0 }, onClick: toggleCollapse },
161
+ react_1.default.createElement(bs_1.BsLayoutSidebarInsetReverse, null)),
162
+ react_1.default.createElement("section", { className: "" }, links.length > 0 && (react_1.default.createElement(Flex_1.default, { direction: 'column', gap: 0.6, alignItems: 'center', width: '100%' }, Object.entries(groupedLinks).map(function (_a, sectionIndex) {
163
+ var section = _a[0], sectionLinks = _a[1];
164
+ return (react_1.default.createElement(Flex_1.default, { key: section, direction: 'column', gap: 0.5, alignItems: 'center', width: '100%' },
165
+ sectionLinks.map(function (link, index) {
166
+ var isActive = link.onClick
167
+ ? selectedOption === "".concat(section, "-").concat(index)
168
+ : pathname === link.uri;
169
+ return (react_1.default.createElement("div", { onClick: function () {
170
+ if (isMobile) {
171
+ handleClose();
172
+ }
173
+ if (link === null || link === void 0 ? void 0 : link.onClick) {
174
+ link.onClick();
175
+ setselectedOption("".concat(section, "-").concat(index));
176
+ }
177
+ else {
178
+ window.location.href = link.uri;
179
+ }
180
+ }, key: link.uri, className: 'hover-scale' },
181
+ react_1.default.createElement("span", { className: " pointer ".concat(iconCSS || '', " ").concat(variant === 'standard' || popIcon
182
+ ? "p-1 ".concat(isActive ? 'text-primary' : 'bg border', " central")
183
+ : variant === 'minimal' && !isActive
184
+ ? 'p-1 central bg'
185
+ : ''), style: { lineHeight: 0, borderRadius: '0.4rem', fontSize: collapseIconSize } }, link.icon)));
186
+ }),
187
+ sectionIndex < Object.keys(groupedLinks).length - 1 && (react_1.default.createElement("div", { className: "mt-1 mb-1 bt fit" }))));
188
+ })))))),
189
+ internalOpen && !collapsed && (react_1.default.createElement("aside", { role: "complementary", ref: sidebarRef, className: "sidebar ".concat(funcss, " ").concat(sidebarCss, " ").concat(isOverlay ? 'nav_overlay' : ''), style: (_c = {
190
+ width: isOverlay ? '100%' : "".concat(currentSidebarWidth, "px"),
191
+ height: "calc(100vh - ".concat(appBarHeight || top || '0px', ")"),
192
+ position: 'fixed',
193
+ top: appBarHeight || top
194
+ },
195
+ _c[position] = 0,
196
+ _c.padding = '1rem',
197
+ _c) },
198
+ react_1.default.createElement("div", { className: "sidebar-header" },
199
+ react_1.default.createElement(Flex_1.default, { width: '100%', alignItems: 'center', gap: 0.5, justify: 'space-between' },
200
+ togglePrefix || react_1.default.createElement("div", null),
201
+ react_1.default.createElement("div", { className: 'pointer hover-text-primary text-right', style: { fontSize: collapseIconSize, lineHeight: 0 }, onClick: toggleCollapse },
202
+ react_1.default.createElement(bs_1.BsLayoutSidebarInset, null))),
203
+ header && react_1.default.createElement("div", null, header)),
204
+ react_1.default.createElement("section", { className: "sidebar-body mt-3" },
205
+ links.length > 0 && (react_1.default.createElement("nav", { className: "sidebar-links" }, isAccordion ? (react_1.default.createElement(Accordion_1.default, { itemClass: accordionItemCss, items: accordionItems, allowMultiple: false, contentClass: "", titleClass: 'text-sm', activeClass: "" })) : (Object.entries(groupedLinks).map(function (_a) {
206
+ var section = _a[0], sectionLinks = _a[1];
207
+ return (react_1.default.createElement("div", { key: section, className: "sidebar-section ".concat(dividers ? 'bt' : '', " pt-2 pb-2") },
208
+ react_1.default.createElement(Text_1.default, { size: "sm" }, section),
209
+ sectionLinks.map(function (link, index) {
210
+ var isActive = link.onClick
211
+ ? selectedOption === "".concat(section, "-").concat(index)
212
+ : pathname === link.uri;
213
+ return (react_1.default.createElement("div", { onClick: function () {
214
+ if (isMobile) {
215
+ handleClose();
216
+ }
217
+ if (link === null || link === void 0 ? void 0 : link.onClick) {
218
+ link.onClick();
219
+ setselectedOption("".concat(section, "-").concat(index));
220
+ }
221
+ else {
222
+ window.location.href = link.uri;
223
+ }
224
+ }, key: link.uri },
225
+ react_1.default.createElement(Button_1.default, { fullWidth: true, small: true, funcss: "sidebar-link text-left ".concat(isActive ? "primary ".concat(activeCss || '') : 'hoverable'), startIcon: react_1.default.createElement("span", { className: "".concat(iconCSS || '', " ").concat(variant === 'standard' || popIcon
226
+ ? "p-1 ".concat(isActive ? 'primary' : 'lighter text-primary border', " central")
227
+ : variant === 'minimal' && !isActive
228
+ ? 'p-1 central lighter text-primary'
229
+ : ''), style: { lineHeight: 0, borderRadius: '0.4rem' } }, link.icon) },
230
+ react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
231
+ })));
232
+ })))),
233
+ content),
234
+ footer && react_1.default.createElement("footer", { className: "sidebar-footer mt-2" }, footer))),
235
+ react_1.default.createElement("main", { className: "main-content ".concat(bodyCss), style: {
236
+ flex: 1,
237
+ marginLeft: position === 'left' && !isOverlay && internalOpen ? "".concat(currentSidebarWidth, "px") : 0,
238
+ marginRight: position === 'right' && !isOverlay && internalOpen ? "".concat(currentSidebarWidth, "px") : 0,
239
+ overflowY: 'auto',
240
+ height: '100vh',
241
+ paddingTop: appBarHeight || top,
242
+ transition: 'margin 0.3s ease',
243
+ } }, children)));
244
+ }
245
+ // // 'use client';
246
+ // // import React, {
247
+ // // useEffect,
248
+ // // useRef,
249
+ // // useState,
250
+ // // ReactNode,
251
+ // // useCallback,
252
+ // // } from 'react';
253
+ // // import RowFlex from '../specials/RowFlex';
254
+ // // import Text from '../text/Text';
255
+ // // import { usePathname } from 'next/navigation';
256
+ // // import { useVariant } from '../theme/theme';
257
+ // // import Button from '../button/Button';
258
+ // // import Accordion from '../accordion/Accordion';
259
+ // // interface SideBarLink {
260
+ // // uri: string;
261
+ // // icon?: React.ReactNode;
262
+ // // text: string;
263
+ // // section: string;
264
+ // // onClick?: () => void;
265
+ // // }
266
+ // // interface SideBarProps {
267
+ // // funcss?: string;
268
+ // // position?: 'left' | 'right';
269
+ // // open?: boolean;
270
+ // // header?: ReactNode;
271
+ // // content?: ReactNode;
272
+ // // footer?: ReactNode;
273
+ // // top?: number;
274
+ // // sidebarWidth?: number;
275
+ // // sidebarCss?: string;
276
+ // // activeCss?: string;
277
+ // // iconCSS?: string;
278
+ // // accordionItemCss?: string;
279
+ // // bodyCss?: string;
280
+ // // popIcon?: boolean;
281
+ // // dividers?: boolean;
282
+ // // links?: SideBarLink[];
283
+ // // children?: ReactNode;
284
+ // // onClose?: () => void;
285
+ // // isAccordion?: boolean;
286
+ // // }
287
+ // // export default function SideBar({
288
+ // // funcss = '',
289
+ // // position = 'left',
290
+ // // open = false,
291
+ // // header,
292
+ // // content,
293
+ // // footer,
294
+ // // top = 0,
295
+ // // sidebarWidth = 250,
296
+ // // iconCSS = '',
297
+ // // sidebarCss = '',
298
+ // // activeCss,
299
+ // // bodyCss = '',
300
+ // // popIcon = false,
301
+ // // dividers = false,
302
+ // // accordionItemCss,
303
+ // // links = [],
304
+ // // children,
305
+ // // onClose,
306
+ // // isAccordion = false,
307
+ // // }: SideBarProps) {
308
+ // // const [isMobile, setIsMobile] = useState(false);
309
+ // // const [internalOpen, setInternalOpen] = useState(open);
310
+ // // const [appBarHeight, setAppBarHeight] = useState('0px');
311
+ // // const pathname = usePathname();
312
+ // // const sidebarRef = useRef<HTMLDivElement>(null);
313
+ // // const { variant } = useVariant();
314
+ // // const [selectedOption, setselectedOption] = useState('');
315
+ // // const updateIsMobile = useCallback(() => {
316
+ // // setIsMobile(window.innerWidth <= 992);
317
+ // // }, []);
318
+ // // useEffect(() => {
319
+ // // updateIsMobile();
320
+ // // window.addEventListener('resize', updateIsMobile);
321
+ // // return () => window.removeEventListener('resize', updateIsMobile);
322
+ // // }, [updateIsMobile]);
323
+ // // // Sync internal state with prop changes
324
+ // // useEffect(() => {
325
+ // // setInternalOpen(open);
326
+ // // }, [open]);
327
+ // // useEffect(() => {
328
+ // // const appBar = document.querySelector('#appBar') as HTMLElement;
329
+ // // if (appBar) {
330
+ // // setAppBarHeight(`${appBar.offsetHeight}px`);
331
+ // // }
332
+ // // }, []);
333
+ // // useEffect(() => {
334
+ // // if (!isMobile || !internalOpen) return;
335
+ // // const handleOutsideClick = (e: MouseEvent | TouchEvent) => {
336
+ // // if (sidebarRef.current && !sidebarRef.current.contains(e.target as Node)) {
337
+ // // handleClose();
338
+ // // }
339
+ // // };
340
+ // // document.addEventListener('mousedown', handleOutsideClick);
341
+ // // document.addEventListener('touchstart', handleOutsideClick);
342
+ // // return () => {
343
+ // // document.removeEventListener('mousedown', handleOutsideClick);
344
+ // // document.removeEventListener('touchstart', handleOutsideClick);
345
+ // // };
346
+ // // }, [isMobile, internalOpen]);
347
+ // // const handleClose = () => {
348
+ // // setInternalOpen(false);
349
+ // // onClose?.();
350
+ // // };
351
+ // // const groupedLinks = links.reduce<Record<string, SideBarLink[]>>((acc, link) => {
352
+ // // acc[link.section] = acc[link.section] || [];
353
+ // // acc[link.section].push(link);
354
+ // // return acc;
355
+ // // }, {});
356
+ // // const isOverlay = isMobile;
357
+ // // // Prepare accordion items when isAccordion is true
358
+ // // const accordionItems = isAccordion
359
+ // // ? Object.entries(groupedLinks).map(([section, sectionLinks]) => ({
360
+ // // icon: sectionLinks[0]?.icon,
361
+ // // title: section,
362
+ // // content: (
363
+ // // <div className="sidebar-accordion-links">
364
+ // // {sectionLinks.map((link, index) => {
365
+ // // const isActive = link.onClick
366
+ // // ? selectedOption === `${section}-${index}`
367
+ // // : pathname === link.uri;
368
+ // // return (
369
+ // // <div
370
+ // // onClick={() => {
371
+ // // if (isMobile) {
372
+ // // handleClose();
373
+ // // }
374
+ // // if (link?.onClick) {
375
+ // // link.onClick();
376
+ // // setselectedOption(`${section}-${index}`);
377
+ // // } else {
378
+ // // window.location.href = link.uri;
379
+ // // }
380
+ // // }}
381
+ // // key={link.uri}
382
+ // // >
383
+ // // <Button
384
+ // // fullWidth
385
+ // // small
386
+ // // funcss={`sidebar-link ${isActive ? "" : "p-0"} text-left ${
387
+ // // isActive ? `primary ${activeCss || ''}` : 'hoverable'
388
+ // // }`}
389
+ // // startIcon={
390
+ // // <span
391
+ // // className={`${iconCSS || ''} ${
392
+ // // variant === 'standard' || popIcon
393
+ // // ? `p-1 ${isActive ? 'primary' : 'lighter text-primary border'} central`
394
+ // // : variant === 'minimal' && !isActive
395
+ // // ? 'p-1 central lighter text-primary'
396
+ // // : ''
397
+ // // }`}
398
+ // // style={{ lineHeight: 0, borderRadius: '0.4rem' }}
399
+ // // >
400
+ // // {link.icon}
401
+ // // </span>
402
+ // // }
403
+ // // >
404
+ // // <Text text={link.text} size="sm" weight={400} />
405
+ // // </Button>
406
+ // // </div>
407
+ // // );
408
+ // // })}
409
+ // // </div>
410
+ // // ),
411
+ // // }))
412
+ // // : [];
413
+ // // return (
414
+ // // <div className={`sidebar-container ${isOverlay ? '' : 'with-content'}`}>
415
+ // // {internalOpen && (
416
+ // // <aside
417
+ // // role="complementary"
418
+ // // ref={sidebarRef}
419
+ // // className={`sidebar ${funcss} ${sidebarCss} ${isOverlay ? 'nav_overlay' : ''}`}
420
+ // // style={{
421
+ // // width: isOverlay ? '100%' : `${sidebarWidth}px`,
422
+ // // height: `calc(100vh - ${appBarHeight || top || '0px'})`,
423
+ // // position: 'fixed',
424
+ // // top: appBarHeight || top,
425
+ // // [position]: 0,
426
+ // // padding: '1rem',
427
+ // // }}
428
+ // // >
429
+ // // {header && <div>{header}</div>}
430
+ // // <section className="sidebar-body mt-3">
431
+ // // {links.length > 0 && (
432
+ // // <nav className="sidebar-links">
433
+ // // {isAccordion ? (
434
+ // // <Accordion
435
+ // // itemClass={accordionItemCss}
436
+ // // items={accordionItems}
437
+ // // allowMultiple={false}
438
+ // // contentClass=""
439
+ // // titleClass='text-sm'
440
+ // // activeClass=""
441
+ // // />
442
+ // // ) : (
443
+ // // Object.entries(groupedLinks).map(([section, sectionLinks]) => (
444
+ // // <div key={section} className={`sidebar-section ${dividers ? 'bt' : ''} pt-2 pb-2`}>
445
+ // // <Text size="sm" >
446
+ // // {section}
447
+ // // </Text>
448
+ // // {sectionLinks.map((link, index) => {
449
+ // // const isActive = link.onClick
450
+ // // ? selectedOption === `${section}-${index}`
451
+ // // : pathname === link.uri;
452
+ // // return (
453
+ // // <div
454
+ // // onClick={() => {
455
+ // // if (isMobile) {
456
+ // // handleClose();
457
+ // // }
458
+ // // if (link?.onClick) {
459
+ // // link.onClick();
460
+ // // setselectedOption(`${section}-${index}`);
461
+ // // } else {
462
+ // // window.location.href = link.uri;
463
+ // // }
464
+ // // }}
465
+ // // key={link.uri}
466
+ // // >
467
+ // // <Button
468
+ // // fullWidth
469
+ // // small
470
+ // // funcss={`sidebar-link text-left ${
471
+ // // isActive ? `primary ${activeCss || ''}` : 'hoverable'
472
+ // // }`}
473
+ // // startIcon={
474
+ // // <span
475
+ // // className={`${iconCSS || ''} ${
476
+ // // variant === 'standard' || popIcon
477
+ // // ? `p-1 ${isActive ? 'primary' : 'lighter text-primary border'} central`
478
+ // // : variant === 'minimal' && !isActive
479
+ // // ? 'p-1 central lighter text-primary'
480
+ // // : ''
481
+ // // }`}
482
+ // // style={{ lineHeight: 0, borderRadius: '0.4rem' }}
483
+ // // >
484
+ // // {link.icon}
485
+ // // </span>
486
+ // // }
487
+ // // >
488
+ // // <Text text={link.text} size="sm" weight={400} />
489
+ // // </Button>
490
+ // // </div>
491
+ // // );
492
+ // // })}
493
+ // // </div>
494
+ // // ))
495
+ // // )}
496
+ // // </nav>
497
+ // // )}
498
+ // // {content}
499
+ // // </section>
500
+ // // {footer && <footer className="sidebar-footer mt-2">{footer}</footer>}
501
+ // // </aside>
502
+ // // )}
503
+ // // <main
504
+ // // className={`main-content ${bodyCss}`}
505
+ // // style={{
506
+ // // flex: 1,
507
+ // // marginLeft: position === 'left' && !isOverlay && internalOpen ? `${sidebarWidth}px` : 0,
508
+ // // marginRight: position === 'right' && !isOverlay && internalOpen ? `${sidebarWidth}px` : 0,
509
+ // // overflowY: 'auto',
510
+ // // height: '100vh',
511
+ // // paddingTop: appBarHeight || top,
512
+ // // transition: 'margin 0.3s ease',
513
+ // // }}
514
+ // // >
515
+ // // {children}
516
+ // // </main>
517
+ // // </div>
518
+ // // );
519
+ // // }
2
520
  // 'use client';
3
521
  // import React, {
4
522
  // useEffect,
@@ -12,7 +530,11 @@
12
530
  // import { usePathname } from 'next/navigation';
13
531
  // import { useVariant } from '../theme/theme';
14
532
  // import Button from '../button/Button';
15
- // import Accordion from '../accordion/Accordion';
533
+ // import Accordion from '../accordion/Accordion';
534
+ // import { BsLayoutSidebarInset, BsLayoutSidebarInsetReverse } from "react-icons/bs";
535
+ // import Flex from '../flex/Flex';
536
+ // import ToolTip from '../tooltip/ToolTip';
537
+ // import Tip from '../tooltip/Tip';
16
538
  // interface SideBarLink {
17
539
  // uri: string;
18
540
  // icon?: React.ReactNode;
@@ -40,6 +562,7 @@
40
562
  // children?: ReactNode;
41
563
  // onClose?: () => void;
42
564
  // isAccordion?: boolean;
565
+ // togglePrefix?: ReactNode;
43
566
  // }
44
567
  // export default function SideBar({
45
568
  // funcss = '',
@@ -60,11 +583,13 @@
60
583
  // links = [],
61
584
  // children,
62
585
  // onClose,
586
+ // togglePrefix,
63
587
  // isAccordion = false,
64
588
  // }: SideBarProps) {
65
589
  // const [isMobile, setIsMobile] = useState(false);
66
590
  // const [internalOpen, setInternalOpen] = useState(open);
67
591
  // const [appBarHeight, setAppBarHeight] = useState('0px');
592
+ // const [collapsed, setCollapsed] = useState(false);
68
593
  // const pathname = usePathname();
69
594
  // const sidebarRef = useRef<HTMLDivElement>(null);
70
595
  // const { variant } = useVariant();
@@ -105,6 +630,9 @@
105
630
  // setInternalOpen(false);
106
631
  // onClose?.();
107
632
  // };
633
+ // const toggleCollapse = () => {
634
+ // setCollapsed(!collapsed);
635
+ // };
108
636
  // const groupedLinks = links.reduce<Record<string, SideBarLink[]>>((acc, link) => {
109
637
  // acc[link.section] = acc[link.section] || [];
110
638
  // acc[link.section].push(link);
@@ -158,7 +686,7 @@
158
686
  // </span>
159
687
  // }
160
688
  // >
161
- // <Text text={link.text} size="sm" weight={400} />
689
+ // {!collapsed && <Text text={link.text} size="sm" weight={400} />}
162
690
  // </Button>
163
691
  // </div>
164
692
  // );
@@ -167,15 +695,97 @@
167
695
  // ),
168
696
  // }))
169
697
  // : [];
698
+ // // Get current sidebar width based on collapsed state
699
+ // const currentSidebarWidth = collapsed ? 70 : sidebarWidth;
700
+ // const collapseIconSize = '18px'
170
701
  // return (
171
702
  // <div className={`sidebar-container ${isOverlay ? '' : 'with-content'}`}>
172
- // {internalOpen && (
703
+ // {/* Collapsed Sidebar */}
704
+ // {internalOpen && collapsed && (
705
+ // <aside
706
+ // role="complementary"
707
+ // ref={sidebarRef}
708
+ // className={`sidebar collapsed ${funcss} ${sidebarCss} ${isOverlay ? 'nav_overlay' : ''}`}
709
+ // style={{
710
+ // width: isOverlay ? '100%' : `${currentSidebarWidth}px`,
711
+ // height: `calc(100vh - ${appBarHeight || top || '0px'})`,
712
+ // position: 'fixed',
713
+ // top: appBarHeight || top,
714
+ // [position]: 0,
715
+ // padding: '0.5rem',
716
+ // // overflow: 'auto',
717
+ // overflow:"visible"
718
+ // }}
719
+ // >
720
+ // {/* Expand Button at Top */}
721
+ // <div
722
+ // className='pointer text-primary text-center p-1 bb mb'
723
+ // style={{fontSize:collapseIconSize , lineHeight: 0}}
724
+ // onClick={toggleCollapse}
725
+ // >
726
+ // <BsLayoutSidebarInsetReverse />
727
+ // </div>
728
+ // {/* Collapsed Icons Only */}
729
+ // <section className="">
730
+ // {links.length > 0 && (
731
+ // <Flex direction='column' gap={0.6} alignItems='center' width='100%'>
732
+ // {Object.entries(groupedLinks).map(([section, sectionLinks], sectionIndex) => (
733
+ // <Flex direction='column' gap={0.5} alignItems='center' width='100%'>
734
+ // {sectionLinks.map((link, index) => {
735
+ // const isActive = link.onClick
736
+ // ? selectedOption === `${section}-${index}`
737
+ // : pathname === link.uri;
738
+ // return (
739
+ // <div
740
+ // onClick={() => {
741
+ // if (isMobile) {
742
+ // handleClose();
743
+ // }
744
+ // if (link?.onClick) {
745
+ // link.onClick();
746
+ // setselectedOption(`${section}-${index}`);
747
+ // } else {
748
+ // window.location.href = link.uri;
749
+ // }
750
+ // }}
751
+ // key={link.uri}
752
+ // className='hover-scale'
753
+ // >
754
+ // <span
755
+ // className={` pointer ${iconCSS || ''} ${
756
+ // variant === 'standard' || popIcon
757
+ // ? `p-1 ${isActive ? 'text-primary' : 'bg border'} central`
758
+ // : variant === 'minimal' && !isActive
759
+ // ? 'p-1 central bg'
760
+ // : ''
761
+ // }`}
762
+ // style={{ lineHeight: 0, borderRadius: '0.4rem' , fontSize: collapseIconSize }}
763
+ // >
764
+ // {link.icon}
765
+ // </span>
766
+ // {/* </Button> */}
767
+ // </div>
768
+ // );
769
+ // })}
770
+ // {/* Add HR between sections except after last one */}
771
+ // {sectionIndex < Object.keys(groupedLinks).length - 1 && (
772
+ // <div className="mt-1 mb-1 bt fit" />
773
+ // )}
774
+ // </Flex>
775
+ // ))}
776
+ // </Flex>
777
+ // )}
778
+ // </section>
779
+ // </aside>
780
+ // )}
781
+ // {/* Regular Sidebar */}
782
+ // {internalOpen && !collapsed && (
173
783
  // <aside
174
784
  // role="complementary"
175
785
  // ref={sidebarRef}
176
786
  // className={`sidebar ${funcss} ${sidebarCss} ${isOverlay ? 'nav_overlay' : ''}`}
177
787
  // style={{
178
- // width: isOverlay ? '100%' : `${sidebarWidth}px`,
788
+ // width: isOverlay ? '100%' : `${currentSidebarWidth}px`,
179
789
  // height: `calc(100vh - ${appBarHeight || top || '0px'})`,
180
790
  // position: 'fixed',
181
791
  // top: appBarHeight || top,
@@ -183,7 +793,20 @@
183
793
  // padding: '1rem',
184
794
  // }}
185
795
  // >
186
- // {header && <div>{header}</div>}
796
+ // {/* Header with Collapse Button */}
797
+ // <div className="sidebar-header">
798
+ // <Flex width='100%' alignItems='center' gap={0.5} justify='space-between'>
799
+ // {togglePrefix || <div />}
800
+ // <div
801
+ // className='pointer hover-text-primary text-right'
802
+ // style={{fontSize:collapseIconSize , lineHeight: 0}}
803
+ // onClick={toggleCollapse}
804
+ // >
805
+ // <BsLayoutSidebarInset />
806
+ // </div>
807
+ // </Flex>
808
+ // {header && <div>{header}</div>}
809
+ // </div>
187
810
  // <section className="sidebar-body mt-3">
188
811
  // {links.length > 0 && (
189
812
  // <nav className="sidebar-links">
@@ -261,8 +884,8 @@
261
884
  // className={`main-content ${bodyCss}`}
262
885
  // style={{
263
886
  // flex: 1,
264
- // marginLeft: position === 'left' && !isOverlay && internalOpen ? `${sidebarWidth}px` : 0,
265
- // marginRight: position === 'right' && !isOverlay && internalOpen ? `${sidebarWidth}px` : 0,
887
+ // marginLeft: position === 'left' && !isOverlay && internalOpen ? `${currentSidebarWidth}px` : 0,
888
+ // marginRight: position === 'right' && !isOverlay && internalOpen ? `${currentSidebarWidth}px` : 0,
266
889
  // overflowY: 'auto',
267
890
  // height: '100vh',
268
891
  // paddingTop: appBarHeight || top,
@@ -274,254 +897,3 @@
274
897
  // </div>
275
898
  // );
276
899
  // }
277
- 'use client';
278
- // 'use client';
279
- // import React, {
280
- // useEffect,
281
- // useRef,
282
- // useState,
283
- // ReactNode,
284
- // useCallback,
285
- // } from 'react';
286
- // import RowFlex from '../specials/RowFlex';
287
- // import Text from '../text/Text';
288
- // import { usePathname } from 'next/navigation';
289
- // import { useVariant } from '../theme/theme';
290
- // import Button from '../button/Button';
291
- // import Accordion from '../accordion/Accordion';
292
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
293
- if (k2 === undefined) k2 = k;
294
- var desc = Object.getOwnPropertyDescriptor(m, k);
295
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
296
- desc = { enumerable: true, get: function() { return m[k]; } };
297
- }
298
- Object.defineProperty(o, k2, desc);
299
- }) : (function(o, m, k, k2) {
300
- if (k2 === undefined) k2 = k;
301
- o[k2] = m[k];
302
- }));
303
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
304
- Object.defineProperty(o, "default", { enumerable: true, value: v });
305
- }) : function(o, v) {
306
- o["default"] = v;
307
- });
308
- var __importStar = (this && this.__importStar) || (function () {
309
- var ownKeys = function(o) {
310
- ownKeys = Object.getOwnPropertyNames || function (o) {
311
- var ar = [];
312
- for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
313
- return ar;
314
- };
315
- return ownKeys(o);
316
- };
317
- return function (mod) {
318
- if (mod && mod.__esModule) return mod;
319
- var result = {};
320
- if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
321
- __setModuleDefault(result, mod);
322
- return result;
323
- };
324
- })();
325
- var __importDefault = (this && this.__importDefault) || function (mod) {
326
- return (mod && mod.__esModule) ? mod : { "default": mod };
327
- };
328
- Object.defineProperty(exports, "__esModule", { value: true });
329
- exports.default = SideBar;
330
- var react_1 = __importStar(require("react"));
331
- var Text_1 = __importDefault(require("../text/Text"));
332
- var navigation_1 = require("next/navigation");
333
- var theme_1 = require("../theme/theme");
334
- var Button_1 = __importDefault(require("../button/Button"));
335
- var Accordion_1 = __importDefault(require("../accordion/Accordion"));
336
- var bs_1 = require("react-icons/bs");
337
- var Flex_1 = __importDefault(require("../flex/Flex"));
338
- function SideBar(_a) {
339
- var _b, _c;
340
- var _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.position, position = _e === void 0 ? 'left' : _e, _f = _a.open, open = _f === void 0 ? false : _f, header = _a.header, content = _a.content, footer = _a.footer, _g = _a.top, top = _g === void 0 ? 0 : _g, _h = _a.sidebarWidth, sidebarWidth = _h === void 0 ? 250 : _h, _j = _a.iconCSS, iconCSS = _j === void 0 ? '' : _j, _k = _a.sidebarCss, sidebarCss = _k === void 0 ? '' : _k, activeCss = _a.activeCss, _l = _a.bodyCss, bodyCss = _l === void 0 ? '' : _l, _m = _a.popIcon, popIcon = _m === void 0 ? false : _m, _o = _a.dividers, dividers = _o === void 0 ? false : _o, accordionItemCss = _a.accordionItemCss, _p = _a.links, links = _p === void 0 ? [] : _p, children = _a.children, onClose = _a.onClose, togglePrefix = _a.togglePrefix, _q = _a.isAccordion, isAccordion = _q === void 0 ? false : _q;
341
- var _r = (0, react_1.useState)(false), isMobile = _r[0], setIsMobile = _r[1];
342
- var _s = (0, react_1.useState)(open), internalOpen = _s[0], setInternalOpen = _s[1];
343
- var _t = (0, react_1.useState)('0px'), appBarHeight = _t[0], setAppBarHeight = _t[1];
344
- var _u = (0, react_1.useState)(false), collapsed = _u[0], setCollapsed = _u[1];
345
- var pathname = (0, navigation_1.usePathname)();
346
- var sidebarRef = (0, react_1.useRef)(null);
347
- var variant = (0, theme_1.useVariant)().variant;
348
- var _v = (0, react_1.useState)(''), selectedOption = _v[0], setselectedOption = _v[1];
349
- var updateIsMobile = (0, react_1.useCallback)(function () {
350
- setIsMobile(window.innerWidth <= 992);
351
- }, []);
352
- (0, react_1.useEffect)(function () {
353
- updateIsMobile();
354
- window.addEventListener('resize', updateIsMobile);
355
- return function () { return window.removeEventListener('resize', updateIsMobile); };
356
- }, [updateIsMobile]);
357
- // Sync internal state with prop changes
358
- (0, react_1.useEffect)(function () {
359
- setInternalOpen(open);
360
- }, [open]);
361
- (0, react_1.useEffect)(function () {
362
- var appBar = document.querySelector('#appBar');
363
- if (appBar) {
364
- setAppBarHeight("".concat(appBar.offsetHeight, "px"));
365
- }
366
- }, []);
367
- (0, react_1.useEffect)(function () {
368
- if (!isMobile || !internalOpen)
369
- return;
370
- var handleOutsideClick = function (e) {
371
- if (sidebarRef.current && !sidebarRef.current.contains(e.target)) {
372
- handleClose();
373
- }
374
- };
375
- document.addEventListener('mousedown', handleOutsideClick);
376
- document.addEventListener('touchstart', handleOutsideClick);
377
- return function () {
378
- document.removeEventListener('mousedown', handleOutsideClick);
379
- document.removeEventListener('touchstart', handleOutsideClick);
380
- };
381
- }, [isMobile, internalOpen]);
382
- var handleClose = function () {
383
- setInternalOpen(false);
384
- onClose === null || onClose === void 0 ? void 0 : onClose();
385
- };
386
- var toggleCollapse = function () {
387
- setCollapsed(!collapsed);
388
- };
389
- var groupedLinks = links.reduce(function (acc, link) {
390
- acc[link.section] = acc[link.section] || [];
391
- acc[link.section].push(link);
392
- return acc;
393
- }, {});
394
- var isOverlay = isMobile;
395
- // Prepare accordion items when isAccordion is true
396
- var accordionItems = isAccordion
397
- ? Object.entries(groupedLinks).map(function (_a) {
398
- var _b;
399
- var section = _a[0], sectionLinks = _a[1];
400
- return ({
401
- icon: (_b = sectionLinks[0]) === null || _b === void 0 ? void 0 : _b.icon,
402
- title: section,
403
- content: (react_1.default.createElement("div", { className: "sidebar-accordion-links" }, sectionLinks.map(function (link, index) {
404
- var isActive = link.onClick
405
- ? selectedOption === "".concat(section, "-").concat(index)
406
- : pathname === link.uri;
407
- return (react_1.default.createElement("div", { onClick: function () {
408
- if (isMobile) {
409
- handleClose();
410
- }
411
- if (link === null || link === void 0 ? void 0 : link.onClick) {
412
- link.onClick();
413
- setselectedOption("".concat(section, "-").concat(index));
414
- }
415
- else {
416
- window.location.href = link.uri;
417
- }
418
- }, key: link.uri },
419
- react_1.default.createElement(Button_1.default, { fullWidth: true, small: true, funcss: "sidebar-link ".concat(isActive ? "" : "p-0", " text-left ").concat(isActive ? "primary ".concat(activeCss || '') : 'hoverable'), startIcon: react_1.default.createElement("span", { className: "".concat(iconCSS || '', " ").concat(variant === 'standard' || popIcon
420
- ? "p-1 ".concat(isActive ? 'primary' : 'lighter text-primary border', " central")
421
- : variant === 'minimal' && !isActive
422
- ? 'p-1 central lighter text-primary'
423
- : ''), style: { lineHeight: 0, borderRadius: '0.4rem' } }, link.icon) }, !collapsed && react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
424
- }))),
425
- });
426
- })
427
- : [];
428
- // Get current sidebar width based on collapsed state
429
- var currentSidebarWidth = collapsed ? 70 : sidebarWidth;
430
- var collapseIconSize = '18px';
431
- return (react_1.default.createElement("div", { className: "sidebar-container ".concat(isOverlay ? '' : 'with-content') },
432
- internalOpen && collapsed && (react_1.default.createElement("aside", { role: "complementary", ref: sidebarRef, className: "sidebar collapsed ".concat(funcss, " ").concat(sidebarCss, " ").concat(isOverlay ? 'nav_overlay' : ''), style: (_b = {
433
- width: isOverlay ? '100%' : "".concat(currentSidebarWidth, "px"),
434
- height: "calc(100vh - ".concat(appBarHeight || top || '0px', ")"),
435
- position: 'fixed',
436
- top: appBarHeight || top
437
- },
438
- _b[position] = 0,
439
- _b.padding = '0.5rem',
440
- // overflow: 'auto',
441
- _b.overflow = "visible",
442
- _b) },
443
- react_1.default.createElement("div", { className: 'pointer hover-text-primary text-center p-1', style: { fontSize: collapseIconSize, lineHeight: 0 }, onClick: toggleCollapse },
444
- react_1.default.createElement(bs_1.BsLayoutSidebarInsetReverse, null)),
445
- react_1.default.createElement("section", { className: "" }, links.length > 0 && (react_1.default.createElement(Flex_1.default, { direction: 'column', gap: 0.6, alignItems: 'center', width: '100%' }, Object.entries(groupedLinks).map(function (_a, sectionIndex) {
446
- var section = _a[0], sectionLinks = _a[1];
447
- return (react_1.default.createElement(Flex_1.default, { direction: 'column', gap: 0.5, alignItems: 'center', width: '100%' },
448
- sectionLinks.map(function (link, index) {
449
- var isActive = link.onClick
450
- ? selectedOption === "".concat(section, "-").concat(index)
451
- : pathname === link.uri;
452
- return (react_1.default.createElement("div", { onClick: function () {
453
- if (isMobile) {
454
- handleClose();
455
- }
456
- if (link === null || link === void 0 ? void 0 : link.onClick) {
457
- link.onClick();
458
- setselectedOption("".concat(section, "-").concat(index));
459
- }
460
- else {
461
- window.location.href = link.uri;
462
- }
463
- }, key: link.uri },
464
- react_1.default.createElement("span", { className: " pointer ".concat(iconCSS || '', " ").concat(variant === 'standard' || popIcon
465
- ? "p-1 ".concat(isActive ? 'primary' : 'bg text-primary border', " central")
466
- : variant === 'minimal' && !isActive
467
- ? 'p-1 central bg text-primary'
468
- : ''), style: { lineHeight: 0, borderRadius: '0.4rem', fontSize: collapseIconSize } }, link.icon)));
469
- }),
470
- sectionIndex < Object.keys(groupedLinks).length - 1 && (react_1.default.createElement("div", { className: "mt-1 mb-1 bt col" }))));
471
- })))))),
472
- internalOpen && !collapsed && (react_1.default.createElement("aside", { role: "complementary", ref: sidebarRef, className: "sidebar ".concat(funcss, " ").concat(sidebarCss, " ").concat(isOverlay ? 'nav_overlay' : ''), style: (_c = {
473
- width: isOverlay ? '100%' : "".concat(currentSidebarWidth, "px"),
474
- height: "calc(100vh - ".concat(appBarHeight || top || '0px', ")"),
475
- position: 'fixed',
476
- top: appBarHeight || top
477
- },
478
- _c[position] = 0,
479
- _c.padding = '1rem',
480
- _c) },
481
- react_1.default.createElement("div", { className: "sidebar-header" },
482
- react_1.default.createElement(Flex_1.default, { width: '100%', alignItems: 'center', gap: 0.5, justify: 'space-between' },
483
- togglePrefix || react_1.default.createElement("div", null),
484
- react_1.default.createElement("div", { className: 'pointer hover-text-primary text-right', style: { fontSize: collapseIconSize, lineHeight: 0 }, onClick: toggleCollapse },
485
- react_1.default.createElement(bs_1.BsLayoutSidebarInset, null))),
486
- header && react_1.default.createElement("div", null, header)),
487
- react_1.default.createElement("section", { className: "sidebar-body mt-3" },
488
- links.length > 0 && (react_1.default.createElement("nav", { className: "sidebar-links" }, isAccordion ? (react_1.default.createElement(Accordion_1.default, { itemClass: accordionItemCss, items: accordionItems, allowMultiple: false, contentClass: "", titleClass: 'text-sm', activeClass: "" })) : (Object.entries(groupedLinks).map(function (_a) {
489
- var section = _a[0], sectionLinks = _a[1];
490
- return (react_1.default.createElement("div", { key: section, className: "sidebar-section ".concat(dividers ? 'bt' : '', " pt-2 pb-2") },
491
- react_1.default.createElement(Text_1.default, { size: "sm" }, section),
492
- sectionLinks.map(function (link, index) {
493
- var isActive = link.onClick
494
- ? selectedOption === "".concat(section, "-").concat(index)
495
- : pathname === link.uri;
496
- return (react_1.default.createElement("div", { onClick: function () {
497
- if (isMobile) {
498
- handleClose();
499
- }
500
- if (link === null || link === void 0 ? void 0 : link.onClick) {
501
- link.onClick();
502
- setselectedOption("".concat(section, "-").concat(index));
503
- }
504
- else {
505
- window.location.href = link.uri;
506
- }
507
- }, key: link.uri },
508
- react_1.default.createElement(Button_1.default, { fullWidth: true, small: true, funcss: "sidebar-link text-left ".concat(isActive ? "primary ".concat(activeCss || '') : 'hoverable'), startIcon: react_1.default.createElement("span", { className: "".concat(iconCSS || '', " ").concat(variant === 'standard' || popIcon
509
- ? "p-1 ".concat(isActive ? 'primary' : 'lighter text-primary border', " central")
510
- : variant === 'minimal' && !isActive
511
- ? 'p-1 central lighter text-primary'
512
- : ''), style: { lineHeight: 0, borderRadius: '0.4rem' } }, link.icon) },
513
- react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
514
- })));
515
- })))),
516
- content),
517
- footer && react_1.default.createElement("footer", { className: "sidebar-footer mt-2" }, footer))),
518
- react_1.default.createElement("main", { className: "main-content ".concat(bodyCss), style: {
519
- flex: 1,
520
- marginLeft: position === 'left' && !isOverlay && internalOpen ? "".concat(currentSidebarWidth, "px") : 0,
521
- marginRight: position === 'right' && !isOverlay && internalOpen ? "".concat(currentSidebarWidth, "px") : 0,
522
- overflowY: 'auto',
523
- height: '100vh',
524
- paddingTop: appBarHeight || top,
525
- transition: 'margin 0.3s ease',
526
- } }, children)));
527
- }