@wealthx/shadcn 1.5.33 → 1.5.34
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/.turbo/turbo-build.log +100 -100
- package/CHANGELOG.md +6 -0
- package/dist/{chunk-RSEVIQEO.mjs → chunk-E432NK23.mjs} +41 -36
- package/dist/components/ui/sidebar-nav.js +39 -34
- package/dist/components/ui/sidebar-nav.mjs +1 -1
- package/dist/index.js +39 -34
- package/dist/index.mjs +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/src/components/ui/sidebar-nav.tsx +96 -75
- package/src/styles/styles-css.ts +1 -1
|
@@ -27,8 +27,8 @@ import {
|
|
|
27
27
|
ChevronRight,
|
|
28
28
|
Info,
|
|
29
29
|
LogOut,
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
Pin,
|
|
31
|
+
PinOff
|
|
32
32
|
} from "lucide-react";
|
|
33
33
|
import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
|
|
34
34
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -230,42 +230,53 @@ function CollapsibleNavItem({
|
|
|
230
230
|
function SidebarNav({
|
|
231
231
|
items,
|
|
232
232
|
userName = "Anonymous User",
|
|
233
|
-
collapsed = false,
|
|
234
233
|
logo,
|
|
235
234
|
logoCollapsed,
|
|
236
235
|
metricsGroups,
|
|
237
236
|
onNavigate,
|
|
238
237
|
onLogout,
|
|
239
|
-
|
|
238
|
+
defaultLocked = false,
|
|
239
|
+
onLockedChange,
|
|
240
240
|
className
|
|
241
241
|
}) {
|
|
242
|
+
const [isLocked, setIsLocked] = React.useState(defaultLocked);
|
|
243
|
+
const [isHovered, setIsHovered] = React.useState(false);
|
|
244
|
+
const isExpanded = isLocked || isHovered;
|
|
242
245
|
const [userMenuOpen, setUserMenuOpen] = React.useState(false);
|
|
243
246
|
const navScrollRef = React.useRef(null);
|
|
244
247
|
const expandedScrollRef = React.useRef(0);
|
|
248
|
+
const handleLockToggle = () => {
|
|
249
|
+
const next = !isLocked;
|
|
250
|
+
setIsLocked(next);
|
|
251
|
+
onLockedChange == null ? void 0 : onLockedChange(next);
|
|
252
|
+
};
|
|
245
253
|
React.useEffect(() => {
|
|
246
|
-
if (
|
|
247
|
-
}, [
|
|
254
|
+
if (!isExpanded) setUserMenuOpen(false);
|
|
255
|
+
}, [isExpanded]);
|
|
248
256
|
React.useLayoutEffect(() => {
|
|
249
257
|
const nav = navScrollRef.current;
|
|
250
258
|
if (!nav) return;
|
|
251
|
-
if (
|
|
259
|
+
if (isExpanded) {
|
|
252
260
|
nav.scrollTop = expandedScrollRef.current;
|
|
253
261
|
}
|
|
254
262
|
return () => {
|
|
255
|
-
if (
|
|
263
|
+
if (isExpanded && nav) {
|
|
256
264
|
expandedScrollRef.current = nav.scrollTop;
|
|
257
265
|
}
|
|
258
266
|
};
|
|
259
|
-
}, [
|
|
267
|
+
}, [isExpanded]);
|
|
260
268
|
return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(
|
|
261
269
|
"nav",
|
|
262
270
|
{
|
|
263
271
|
"data-slot": "sidebar-nav",
|
|
264
|
-
"data-
|
|
272
|
+
"data-expanded": isExpanded,
|
|
273
|
+
"data-locked": isLocked,
|
|
274
|
+
onMouseEnter: () => setIsHovered(true),
|
|
275
|
+
onMouseLeave: () => setIsHovered(false),
|
|
265
276
|
className: cn(
|
|
266
277
|
"flex h-full flex-col bg-brand-secondary text-brand-secondary-foreground",
|
|
267
278
|
"transition-all duration-200 ease-in-out",
|
|
268
|
-
|
|
279
|
+
isExpanded ? "w-[279px]" : "w-14",
|
|
269
280
|
className
|
|
270
281
|
),
|
|
271
282
|
children: [
|
|
@@ -277,7 +288,7 @@ function SidebarNav({
|
|
|
277
288
|
alt: "Logo",
|
|
278
289
|
className: cn(
|
|
279
290
|
"h-8 w-auto object-contain object-left px-5 transition-opacity duration-200",
|
|
280
|
-
|
|
291
|
+
!isExpanded ? "opacity-0" : "opacity-100"
|
|
281
292
|
)
|
|
282
293
|
}
|
|
283
294
|
),
|
|
@@ -288,7 +299,7 @@ function SidebarNav({
|
|
|
288
299
|
alt: "Logo",
|
|
289
300
|
className: cn(
|
|
290
301
|
"absolute inset-y-0 left-0 right-0 m-auto h-8 w-8 object-contain transition-opacity duration-200",
|
|
291
|
-
|
|
302
|
+
!isExpanded ? "opacity-100" : "opacity-0"
|
|
292
303
|
)
|
|
293
304
|
}
|
|
294
305
|
)
|
|
@@ -298,7 +309,7 @@ function SidebarNav({
|
|
|
298
309
|
"div",
|
|
299
310
|
{
|
|
300
311
|
className: cn(
|
|
301
|
-
|
|
312
|
+
!isExpanded ? "opacity-0 pointer-events-none" : "opacity-100"
|
|
302
313
|
),
|
|
303
314
|
children: /* @__PURE__ */ jsx(
|
|
304
315
|
Accordion,
|
|
@@ -355,12 +366,12 @@ function SidebarNav({
|
|
|
355
366
|
)
|
|
356
367
|
}
|
|
357
368
|
),
|
|
358
|
-
/* @__PURE__ */ jsx(NavTooltip, { label: userName, collapsed, children: /* @__PURE__ */ jsx(
|
|
369
|
+
/* @__PURE__ */ jsx(NavTooltip, { label: userName, collapsed: !isExpanded, children: /* @__PURE__ */ jsx(
|
|
359
370
|
"div",
|
|
360
371
|
{
|
|
361
372
|
className: cn(
|
|
362
373
|
"absolute inset-0 flex items-center justify-center transition-opacity duration-200",
|
|
363
|
-
|
|
374
|
+
!isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"
|
|
364
375
|
),
|
|
365
376
|
children: /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center font-semibold text-xs bg-primary text-primary-foreground", children: getInitials(userName) })
|
|
366
377
|
}
|
|
@@ -369,7 +380,7 @@ function SidebarNav({
|
|
|
369
380
|
!!(metricsGroups == null ? void 0 : metricsGroups.length) && /* @__PURE__ */ jsx(
|
|
370
381
|
Accordion,
|
|
371
382
|
{
|
|
372
|
-
value:
|
|
383
|
+
value: isExpanded ? ["metrics"] : [],
|
|
373
384
|
onValueChange: () => {
|
|
374
385
|
},
|
|
375
386
|
children: /* @__PURE__ */ jsx(AccordionItem, { className: "border-none", value: "metrics", children: /* @__PURE__ */ jsx(AccordionContent, { className: "p-0 text-inherit", children: metricsGroups.map((group, i) => /* @__PURE__ */ jsx(MetricsGroup, { group }, i)) }) })
|
|
@@ -380,7 +391,7 @@ function SidebarNav({
|
|
|
380
391
|
CollapsibleNavItem,
|
|
381
392
|
{
|
|
382
393
|
item,
|
|
383
|
-
collapsed,
|
|
394
|
+
collapsed: !isExpanded,
|
|
384
395
|
onNavigate
|
|
385
396
|
},
|
|
386
397
|
item.href
|
|
@@ -388,45 +399,39 @@ function SidebarNav({
|
|
|
388
399
|
SidebarNavItemView,
|
|
389
400
|
{
|
|
390
401
|
item,
|
|
391
|
-
collapsed,
|
|
402
|
+
collapsed: !isExpanded,
|
|
392
403
|
onNavigate
|
|
393
404
|
},
|
|
394
405
|
item.href
|
|
395
406
|
)
|
|
396
407
|
) }),
|
|
397
|
-
|
|
408
|
+
/* @__PURE__ */ jsx("div", { className: "mt-auto border-t border-white/15 bg-white/10", children: /* @__PURE__ */ jsx(
|
|
398
409
|
NavTooltip,
|
|
399
410
|
{
|
|
400
|
-
label:
|
|
401
|
-
collapsed,
|
|
411
|
+
label: isLocked ? "Unpin sidebar" : "Pin sidebar open",
|
|
412
|
+
collapsed: !isExpanded,
|
|
402
413
|
children: /* @__PURE__ */ jsxs(
|
|
403
414
|
Button,
|
|
404
415
|
{
|
|
405
416
|
type: "button",
|
|
406
417
|
variant: "ghost",
|
|
407
|
-
onClick:
|
|
418
|
+
onClick: handleLockToggle,
|
|
408
419
|
className: cn(
|
|
409
|
-
"h-12 w-full
|
|
420
|
+
"h-12 w-full items-center gap-3 py-3 transition-colors",
|
|
410
421
|
"text-brand-secondary-foreground/80 hover:bg-white/10 hover:text-brand-secondary-foreground",
|
|
411
|
-
|
|
422
|
+
isExpanded ? "justify-start px-3" : "justify-center px-2",
|
|
423
|
+
isLocked && "text-primary"
|
|
412
424
|
),
|
|
413
425
|
children: [
|
|
414
|
-
|
|
415
|
-
|
|
426
|
+
isLocked ? /* @__PURE__ */ jsx(Pin, { size: 24, strokeWidth: 1.75, className: "shrink-0" }) : /* @__PURE__ */ jsx(
|
|
427
|
+
PinOff,
|
|
416
428
|
{
|
|
417
429
|
size: 24,
|
|
418
430
|
strokeWidth: 1.75,
|
|
419
|
-
className: "shrink-0"
|
|
420
|
-
}
|
|
421
|
-
) : /* @__PURE__ */ jsx(
|
|
422
|
-
PanelLeftClose,
|
|
423
|
-
{
|
|
424
|
-
size: 24,
|
|
425
|
-
strokeWidth: 1.75,
|
|
426
|
-
className: "shrink-0"
|
|
431
|
+
className: "shrink-0 opacity-60"
|
|
427
432
|
}
|
|
428
433
|
),
|
|
429
|
-
|
|
434
|
+
isExpanded && /* @__PURE__ */ jsx("span", { className: "text-sm", children: isLocked ? "Pinned" : "Pin sidebar" })
|
|
430
435
|
]
|
|
431
436
|
}
|
|
432
437
|
)
|
|
@@ -559,42 +559,53 @@ function CollapsibleNavItem({
|
|
|
559
559
|
function SidebarNav({
|
|
560
560
|
items,
|
|
561
561
|
userName = "Anonymous User",
|
|
562
|
-
collapsed = false,
|
|
563
562
|
logo,
|
|
564
563
|
logoCollapsed,
|
|
565
564
|
metricsGroups,
|
|
566
565
|
onNavigate,
|
|
567
566
|
onLogout,
|
|
568
|
-
|
|
567
|
+
defaultLocked = false,
|
|
568
|
+
onLockedChange,
|
|
569
569
|
className
|
|
570
570
|
}) {
|
|
571
|
+
const [isLocked, setIsLocked] = React3.useState(defaultLocked);
|
|
572
|
+
const [isHovered, setIsHovered] = React3.useState(false);
|
|
573
|
+
const isExpanded = isLocked || isHovered;
|
|
571
574
|
const [userMenuOpen, setUserMenuOpen] = React3.useState(false);
|
|
572
575
|
const navScrollRef = React3.useRef(null);
|
|
573
576
|
const expandedScrollRef = React3.useRef(0);
|
|
577
|
+
const handleLockToggle = () => {
|
|
578
|
+
const next = !isLocked;
|
|
579
|
+
setIsLocked(next);
|
|
580
|
+
onLockedChange == null ? void 0 : onLockedChange(next);
|
|
581
|
+
};
|
|
574
582
|
React3.useEffect(() => {
|
|
575
|
-
if (
|
|
576
|
-
}, [
|
|
583
|
+
if (!isExpanded) setUserMenuOpen(false);
|
|
584
|
+
}, [isExpanded]);
|
|
577
585
|
React3.useLayoutEffect(() => {
|
|
578
586
|
const nav = navScrollRef.current;
|
|
579
587
|
if (!nav) return;
|
|
580
|
-
if (
|
|
588
|
+
if (isExpanded) {
|
|
581
589
|
nav.scrollTop = expandedScrollRef.current;
|
|
582
590
|
}
|
|
583
591
|
return () => {
|
|
584
|
-
if (
|
|
592
|
+
if (isExpanded && nav) {
|
|
585
593
|
expandedScrollRef.current = nav.scrollTop;
|
|
586
594
|
}
|
|
587
595
|
};
|
|
588
|
-
}, [
|
|
596
|
+
}, [isExpanded]);
|
|
589
597
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
590
598
|
"nav",
|
|
591
599
|
{
|
|
592
600
|
"data-slot": "sidebar-nav",
|
|
593
|
-
"data-
|
|
601
|
+
"data-expanded": isExpanded,
|
|
602
|
+
"data-locked": isLocked,
|
|
603
|
+
onMouseEnter: () => setIsHovered(true),
|
|
604
|
+
onMouseLeave: () => setIsHovered(false),
|
|
594
605
|
className: cn(
|
|
595
606
|
"flex h-full flex-col bg-brand-secondary text-brand-secondary-foreground",
|
|
596
607
|
"transition-all duration-200 ease-in-out",
|
|
597
|
-
|
|
608
|
+
isExpanded ? "w-[279px]" : "w-14",
|
|
598
609
|
className
|
|
599
610
|
),
|
|
600
611
|
children: [
|
|
@@ -606,7 +617,7 @@ function SidebarNav({
|
|
|
606
617
|
alt: "Logo",
|
|
607
618
|
className: cn(
|
|
608
619
|
"h-8 w-auto object-contain object-left px-5 transition-opacity duration-200",
|
|
609
|
-
|
|
620
|
+
!isExpanded ? "opacity-0" : "opacity-100"
|
|
610
621
|
)
|
|
611
622
|
}
|
|
612
623
|
),
|
|
@@ -617,7 +628,7 @@ function SidebarNav({
|
|
|
617
628
|
alt: "Logo",
|
|
618
629
|
className: cn(
|
|
619
630
|
"absolute inset-y-0 left-0 right-0 m-auto h-8 w-8 object-contain transition-opacity duration-200",
|
|
620
|
-
|
|
631
|
+
!isExpanded ? "opacity-100" : "opacity-0"
|
|
621
632
|
)
|
|
622
633
|
}
|
|
623
634
|
)
|
|
@@ -627,7 +638,7 @@ function SidebarNav({
|
|
|
627
638
|
"div",
|
|
628
639
|
{
|
|
629
640
|
className: cn(
|
|
630
|
-
|
|
641
|
+
!isExpanded ? "opacity-0 pointer-events-none" : "opacity-100"
|
|
631
642
|
),
|
|
632
643
|
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
633
644
|
Accordion,
|
|
@@ -684,12 +695,12 @@ function SidebarNav({
|
|
|
684
695
|
)
|
|
685
696
|
}
|
|
686
697
|
),
|
|
687
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NavTooltip, { label: userName, collapsed, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
698
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NavTooltip, { label: userName, collapsed: !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
688
699
|
"div",
|
|
689
700
|
{
|
|
690
701
|
className: cn(
|
|
691
702
|
"absolute inset-0 flex items-center justify-center transition-opacity duration-200",
|
|
692
|
-
|
|
703
|
+
!isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"
|
|
693
704
|
),
|
|
694
705
|
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center font-semibold text-xs bg-primary text-primary-foreground", children: getInitials(userName) })
|
|
695
706
|
}
|
|
@@ -698,7 +709,7 @@ function SidebarNav({
|
|
|
698
709
|
!!(metricsGroups == null ? void 0 : metricsGroups.length) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
699
710
|
Accordion,
|
|
700
711
|
{
|
|
701
|
-
value:
|
|
712
|
+
value: isExpanded ? ["metrics"] : [],
|
|
702
713
|
onValueChange: () => {
|
|
703
714
|
},
|
|
704
715
|
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AccordionItem, { className: "border-none", value: "metrics", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AccordionContent, { className: "p-0 text-inherit", children: metricsGroups.map((group, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MetricsGroup, { group }, i)) }) })
|
|
@@ -709,7 +720,7 @@ function SidebarNav({
|
|
|
709
720
|
CollapsibleNavItem,
|
|
710
721
|
{
|
|
711
722
|
item,
|
|
712
|
-
collapsed,
|
|
723
|
+
collapsed: !isExpanded,
|
|
713
724
|
onNavigate
|
|
714
725
|
},
|
|
715
726
|
item.href
|
|
@@ -717,45 +728,39 @@ function SidebarNav({
|
|
|
717
728
|
SidebarNavItemView,
|
|
718
729
|
{
|
|
719
730
|
item,
|
|
720
|
-
collapsed,
|
|
731
|
+
collapsed: !isExpanded,
|
|
721
732
|
onNavigate
|
|
722
733
|
},
|
|
723
734
|
item.href
|
|
724
735
|
)
|
|
725
736
|
) }),
|
|
726
|
-
|
|
737
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-auto border-t border-white/15 bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
727
738
|
NavTooltip,
|
|
728
739
|
{
|
|
729
|
-
label:
|
|
730
|
-
collapsed,
|
|
740
|
+
label: isLocked ? "Unpin sidebar" : "Pin sidebar open",
|
|
741
|
+
collapsed: !isExpanded,
|
|
731
742
|
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
732
743
|
Button,
|
|
733
744
|
{
|
|
734
745
|
type: "button",
|
|
735
746
|
variant: "ghost",
|
|
736
|
-
onClick:
|
|
747
|
+
onClick: handleLockToggle,
|
|
737
748
|
className: cn(
|
|
738
|
-
"h-12 w-full
|
|
749
|
+
"h-12 w-full items-center gap-3 py-3 transition-colors",
|
|
739
750
|
"text-brand-secondary-foreground/80 hover:bg-white/10 hover:text-brand-secondary-foreground",
|
|
740
|
-
|
|
751
|
+
isExpanded ? "justify-start px-3" : "justify-center px-2",
|
|
752
|
+
isLocked && "text-primary"
|
|
741
753
|
),
|
|
742
754
|
children: [
|
|
743
|
-
|
|
744
|
-
import_lucide_react3.
|
|
745
|
-
{
|
|
746
|
-
size: 24,
|
|
747
|
-
strokeWidth: 1.75,
|
|
748
|
-
className: "shrink-0"
|
|
749
|
-
}
|
|
750
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
751
|
-
import_lucide_react3.PanelLeftClose,
|
|
755
|
+
isLocked ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Pin, { size: 24, strokeWidth: 1.75, className: "shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
756
|
+
import_lucide_react3.PinOff,
|
|
752
757
|
{
|
|
753
758
|
size: 24,
|
|
754
759
|
strokeWidth: 1.75,
|
|
755
|
-
className: "shrink-0"
|
|
760
|
+
className: "shrink-0 opacity-60"
|
|
756
761
|
}
|
|
757
762
|
),
|
|
758
|
-
|
|
763
|
+
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-sm", children: isLocked ? "Pinned" : "Pin sidebar" })
|
|
759
764
|
]
|
|
760
765
|
}
|
|
761
766
|
)
|
package/dist/index.js
CHANGED
|
@@ -23310,42 +23310,53 @@ function CollapsibleNavItem({
|
|
|
23310
23310
|
function SidebarNav({
|
|
23311
23311
|
items,
|
|
23312
23312
|
userName = "Anonymous User",
|
|
23313
|
-
collapsed = false,
|
|
23314
23313
|
logo,
|
|
23315
23314
|
logoCollapsed,
|
|
23316
23315
|
metricsGroups,
|
|
23317
23316
|
onNavigate,
|
|
23318
23317
|
onLogout,
|
|
23319
|
-
|
|
23318
|
+
defaultLocked = false,
|
|
23319
|
+
onLockedChange,
|
|
23320
23320
|
className
|
|
23321
23321
|
}) {
|
|
23322
|
+
const [isLocked, setIsLocked] = React51.useState(defaultLocked);
|
|
23323
|
+
const [isHovered, setIsHovered] = React51.useState(false);
|
|
23324
|
+
const isExpanded = isLocked || isHovered;
|
|
23322
23325
|
const [userMenuOpen, setUserMenuOpen] = React51.useState(false);
|
|
23323
23326
|
const navScrollRef = React51.useRef(null);
|
|
23324
23327
|
const expandedScrollRef = React51.useRef(0);
|
|
23328
|
+
const handleLockToggle = () => {
|
|
23329
|
+
const next = !isLocked;
|
|
23330
|
+
setIsLocked(next);
|
|
23331
|
+
onLockedChange == null ? void 0 : onLockedChange(next);
|
|
23332
|
+
};
|
|
23325
23333
|
React51.useEffect(() => {
|
|
23326
|
-
if (
|
|
23327
|
-
}, [
|
|
23334
|
+
if (!isExpanded) setUserMenuOpen(false);
|
|
23335
|
+
}, [isExpanded]);
|
|
23328
23336
|
React51.useLayoutEffect(() => {
|
|
23329
23337
|
const nav = navScrollRef.current;
|
|
23330
23338
|
if (!nav) return;
|
|
23331
|
-
if (
|
|
23339
|
+
if (isExpanded) {
|
|
23332
23340
|
nav.scrollTop = expandedScrollRef.current;
|
|
23333
23341
|
}
|
|
23334
23342
|
return () => {
|
|
23335
|
-
if (
|
|
23343
|
+
if (isExpanded && nav) {
|
|
23336
23344
|
expandedScrollRef.current = nav.scrollTop;
|
|
23337
23345
|
}
|
|
23338
23346
|
};
|
|
23339
|
-
}, [
|
|
23347
|
+
}, [isExpanded]);
|
|
23340
23348
|
return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
|
|
23341
23349
|
"nav",
|
|
23342
23350
|
{
|
|
23343
23351
|
"data-slot": "sidebar-nav",
|
|
23344
|
-
"data-
|
|
23352
|
+
"data-expanded": isExpanded,
|
|
23353
|
+
"data-locked": isLocked,
|
|
23354
|
+
onMouseEnter: () => setIsHovered(true),
|
|
23355
|
+
onMouseLeave: () => setIsHovered(false),
|
|
23345
23356
|
className: cn(
|
|
23346
23357
|
"flex h-full flex-col bg-brand-secondary text-brand-secondary-foreground",
|
|
23347
23358
|
"transition-all duration-200 ease-in-out",
|
|
23348
|
-
|
|
23359
|
+
isExpanded ? "w-[279px]" : "w-14",
|
|
23349
23360
|
className
|
|
23350
23361
|
),
|
|
23351
23362
|
children: [
|
|
@@ -23357,7 +23368,7 @@ function SidebarNav({
|
|
|
23357
23368
|
alt: "Logo",
|
|
23358
23369
|
className: cn(
|
|
23359
23370
|
"h-8 w-auto object-contain object-left px-5 transition-opacity duration-200",
|
|
23360
|
-
|
|
23371
|
+
!isExpanded ? "opacity-0" : "opacity-100"
|
|
23361
23372
|
)
|
|
23362
23373
|
}
|
|
23363
23374
|
),
|
|
@@ -23368,7 +23379,7 @@ function SidebarNav({
|
|
|
23368
23379
|
alt: "Logo",
|
|
23369
23380
|
className: cn(
|
|
23370
23381
|
"absolute inset-y-0 left-0 right-0 m-auto h-8 w-8 object-contain transition-opacity duration-200",
|
|
23371
|
-
|
|
23382
|
+
!isExpanded ? "opacity-100" : "opacity-0"
|
|
23372
23383
|
)
|
|
23373
23384
|
}
|
|
23374
23385
|
)
|
|
@@ -23378,7 +23389,7 @@ function SidebarNav({
|
|
|
23378
23389
|
"div",
|
|
23379
23390
|
{
|
|
23380
23391
|
className: cn(
|
|
23381
|
-
|
|
23392
|
+
!isExpanded ? "opacity-0 pointer-events-none" : "opacity-100"
|
|
23382
23393
|
),
|
|
23383
23394
|
children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
|
|
23384
23395
|
Accordion,
|
|
@@ -23435,12 +23446,12 @@ function SidebarNav({
|
|
|
23435
23446
|
)
|
|
23436
23447
|
}
|
|
23437
23448
|
),
|
|
23438
|
-
/* @__PURE__ */ (0, import_jsx_runtime108.jsx)(NavTooltip, { label: userName, collapsed, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
|
|
23449
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsx)(NavTooltip, { label: userName, collapsed: !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
|
|
23439
23450
|
"div",
|
|
23440
23451
|
{
|
|
23441
23452
|
className: cn(
|
|
23442
23453
|
"absolute inset-0 flex items-center justify-center transition-opacity duration-200",
|
|
23443
|
-
|
|
23454
|
+
!isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"
|
|
23444
23455
|
),
|
|
23445
23456
|
children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center font-semibold text-xs bg-primary text-primary-foreground", children: getInitials(userName) })
|
|
23446
23457
|
}
|
|
@@ -23449,7 +23460,7 @@ function SidebarNav({
|
|
|
23449
23460
|
!!(metricsGroups == null ? void 0 : metricsGroups.length) && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
|
|
23450
23461
|
Accordion,
|
|
23451
23462
|
{
|
|
23452
|
-
value:
|
|
23463
|
+
value: isExpanded ? ["metrics"] : [],
|
|
23453
23464
|
onValueChange: () => {
|
|
23454
23465
|
},
|
|
23455
23466
|
children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(AccordionItem, { className: "border-none", value: "metrics", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(AccordionContent, { className: "p-0 text-inherit", children: metricsGroups.map((group, i) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(MetricsGroup, { group }, i)) }) })
|
|
@@ -23460,7 +23471,7 @@ function SidebarNav({
|
|
|
23460
23471
|
CollapsibleNavItem,
|
|
23461
23472
|
{
|
|
23462
23473
|
item,
|
|
23463
|
-
collapsed,
|
|
23474
|
+
collapsed: !isExpanded,
|
|
23464
23475
|
onNavigate
|
|
23465
23476
|
},
|
|
23466
23477
|
item.href
|
|
@@ -23468,45 +23479,39 @@ function SidebarNav({
|
|
|
23468
23479
|
SidebarNavItemView,
|
|
23469
23480
|
{
|
|
23470
23481
|
item,
|
|
23471
|
-
collapsed,
|
|
23482
|
+
collapsed: !isExpanded,
|
|
23472
23483
|
onNavigate
|
|
23473
23484
|
},
|
|
23474
23485
|
item.href
|
|
23475
23486
|
)
|
|
23476
23487
|
) }),
|
|
23477
|
-
|
|
23488
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "mt-auto border-t border-white/15 bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
|
|
23478
23489
|
NavTooltip,
|
|
23479
23490
|
{
|
|
23480
|
-
label:
|
|
23481
|
-
collapsed,
|
|
23491
|
+
label: isLocked ? "Unpin sidebar" : "Pin sidebar open",
|
|
23492
|
+
collapsed: !isExpanded,
|
|
23482
23493
|
children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
|
|
23483
23494
|
Button,
|
|
23484
23495
|
{
|
|
23485
23496
|
type: "button",
|
|
23486
23497
|
variant: "ghost",
|
|
23487
|
-
onClick:
|
|
23498
|
+
onClick: handleLockToggle,
|
|
23488
23499
|
className: cn(
|
|
23489
|
-
"h-12 w-full
|
|
23500
|
+
"h-12 w-full items-center gap-3 py-3 transition-colors",
|
|
23490
23501
|
"text-brand-secondary-foreground/80 hover:bg-white/10 hover:text-brand-secondary-foreground",
|
|
23491
|
-
|
|
23502
|
+
isExpanded ? "justify-start px-3" : "justify-center px-2",
|
|
23503
|
+
isLocked && "text-primary"
|
|
23492
23504
|
),
|
|
23493
23505
|
children: [
|
|
23494
|
-
|
|
23495
|
-
import_lucide_react63.
|
|
23496
|
-
{
|
|
23497
|
-
size: 24,
|
|
23498
|
-
strokeWidth: 1.75,
|
|
23499
|
-
className: "shrink-0"
|
|
23500
|
-
}
|
|
23501
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
|
|
23502
|
-
import_lucide_react63.PanelLeftClose,
|
|
23506
|
+
isLocked ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_lucide_react63.Pin, { size: 24, strokeWidth: 1.75, className: "shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
|
|
23507
|
+
import_lucide_react63.PinOff,
|
|
23503
23508
|
{
|
|
23504
23509
|
size: 24,
|
|
23505
23510
|
strokeWidth: 1.75,
|
|
23506
|
-
className: "shrink-0"
|
|
23511
|
+
className: "shrink-0 opacity-60"
|
|
23507
23512
|
}
|
|
23508
23513
|
),
|
|
23509
|
-
|
|
23514
|
+
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-sm", children: isLocked ? "Pinned" : "Pin sidebar" })
|
|
23510
23515
|
]
|
|
23511
23516
|
}
|
|
23512
23517
|
)
|