anima-ds-nucleus 1.0.13 → 1.0.14
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.
|
@@ -39,6 +39,13 @@ const SidebarCoreMobile = ({
|
|
|
39
39
|
// UX: permitir que el item se pinte inmediatamente aunque el padre tarde en actualizar activeItem
|
|
40
40
|
enableOptimisticActiveItem = true,
|
|
41
41
|
closeOnItemClickAnimationFrame = true,
|
|
42
|
+
// Mobile: labels de items
|
|
43
|
+
mobileItemLabelFontSize = '1rem',
|
|
44
|
+
mobileItemLabelWeightInactive = 'regular',
|
|
45
|
+
mobileItemLabelWeightActive = 'semibold',
|
|
46
|
+
// Mobile: íconos
|
|
47
|
+
mobileIconSize = 24,
|
|
48
|
+
mobileIconStyle,
|
|
42
49
|
isOpen: controlledIsOpen,
|
|
43
50
|
onClose: controlledOnClose,
|
|
44
51
|
className = '',
|
|
@@ -124,8 +131,15 @@ const SidebarCoreMobile = ({
|
|
|
124
131
|
<Icon
|
|
125
132
|
name="Bars3Icon"
|
|
126
133
|
variant="24-outline"
|
|
127
|
-
size={
|
|
134
|
+
size={mobileIconSize}
|
|
128
135
|
className="color-gray-700"
|
|
136
|
+
style={{
|
|
137
|
+
width: `${mobileIconSize}px`,
|
|
138
|
+
height: `${mobileIconSize}px`,
|
|
139
|
+
opacity: 1,
|
|
140
|
+
transform: 'rotate(0deg)',
|
|
141
|
+
...(mobileIconStyle || {}),
|
|
142
|
+
}}
|
|
129
143
|
/>
|
|
130
144
|
</button>
|
|
131
145
|
)}
|
|
@@ -202,8 +216,15 @@ const SidebarCoreMobile = ({
|
|
|
202
216
|
<Icon
|
|
203
217
|
name="XMarkIcon"
|
|
204
218
|
variant="24-outline"
|
|
205
|
-
size={
|
|
219
|
+
size={mobileIconSize}
|
|
206
220
|
className="color-gray-700"
|
|
221
|
+
style={{
|
|
222
|
+
width: `${mobileIconSize}px`,
|
|
223
|
+
height: `${mobileIconSize}px`,
|
|
224
|
+
opacity: 1,
|
|
225
|
+
transform: 'rotate(0deg)',
|
|
226
|
+
...(mobileIconStyle || {}),
|
|
227
|
+
}}
|
|
207
228
|
/>
|
|
208
229
|
</button>
|
|
209
230
|
</div>
|
|
@@ -235,16 +256,23 @@ const SidebarCoreMobile = ({
|
|
|
235
256
|
<Icon
|
|
236
257
|
name="HomeIcon"
|
|
237
258
|
variant="24-outline"
|
|
238
|
-
size={
|
|
259
|
+
size={mobileIconSize}
|
|
239
260
|
className={`mr-3 ${
|
|
240
261
|
effectiveActiveItem === 'inicio' ? 'color-white' : 'color-gray-700'
|
|
241
262
|
}`}
|
|
263
|
+
style={{
|
|
264
|
+
width: `${mobileIconSize}px`,
|
|
265
|
+
height: `${mobileIconSize}px`,
|
|
266
|
+
opacity: 1,
|
|
267
|
+
transform: 'rotate(0deg)',
|
|
268
|
+
...(mobileIconStyle || {}),
|
|
269
|
+
}}
|
|
242
270
|
/>
|
|
243
271
|
<Typography
|
|
244
272
|
variant="body-md"
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
}
|
|
273
|
+
weight={effectiveActiveItem === 'inicio' ? mobileItemLabelWeightActive : mobileItemLabelWeightInactive}
|
|
274
|
+
className={effectiveActiveItem === 'inicio' ? 'color-white' : 'color-gray-700'}
|
|
275
|
+
style={{ fontSize: mobileItemLabelFontSize }}
|
|
248
276
|
>
|
|
249
277
|
Inicio
|
|
250
278
|
</Typography>
|
|
@@ -293,7 +321,7 @@ const SidebarCoreMobile = ({
|
|
|
293
321
|
if (closeOnItemClickAnimationFrame) {
|
|
294
322
|
requestAnimationFrame(() => controlledOnClose());
|
|
295
323
|
} else {
|
|
296
|
-
|
|
324
|
+
controlledOnClose();
|
|
297
325
|
}
|
|
298
326
|
} else {
|
|
299
327
|
toggleMobileMenu();
|
|
@@ -314,16 +342,23 @@ const SidebarCoreMobile = ({
|
|
|
314
342
|
<Icon
|
|
315
343
|
name={item.icon}
|
|
316
344
|
variant="24-outline"
|
|
317
|
-
size={
|
|
345
|
+
size={mobileIconSize}
|
|
318
346
|
className={`mr-3 ${
|
|
319
347
|
effectiveActiveItem === item.id ? 'color-white' : 'color-gray-700'
|
|
320
348
|
}`}
|
|
349
|
+
style={{
|
|
350
|
+
width: `${mobileIconSize}px`,
|
|
351
|
+
height: `${mobileIconSize}px`,
|
|
352
|
+
opacity: 1,
|
|
353
|
+
transform: 'rotate(0deg)',
|
|
354
|
+
...(mobileIconStyle || {}),
|
|
355
|
+
}}
|
|
321
356
|
/>
|
|
322
357
|
<Typography
|
|
323
358
|
variant="body-md"
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
}
|
|
359
|
+
weight={effectiveActiveItem === item.id ? mobileItemLabelWeightActive : mobileItemLabelWeightInactive}
|
|
360
|
+
className={effectiveActiveItem === item.id ? 'color-white' : 'color-gray-700'}
|
|
361
|
+
style={{ fontSize: mobileItemLabelFontSize }}
|
|
327
362
|
>
|
|
328
363
|
{item.label}
|
|
329
364
|
</Typography>
|
|
@@ -439,6 +474,25 @@ export const SidebarCore = ({
|
|
|
439
474
|
desktopExpandIconColor = '#0F172A',
|
|
440
475
|
desktopExpandIconClassName = '',
|
|
441
476
|
desktopExpandIconStyle,
|
|
477
|
+
// Desktop: labels de items (solo cuando NO está colapsado)
|
|
478
|
+
desktopItemLabelFontSize = '1rem',
|
|
479
|
+
desktopItemLabelWeightInactive = 'regular',
|
|
480
|
+
desktopItemLabelWeightActive = 'semibold',
|
|
481
|
+
// Desktop: íconos de navegación (items)
|
|
482
|
+
desktopExpandedIconSize = 24,
|
|
483
|
+
desktopCollapsedIconSize = 32,
|
|
484
|
+
desktopNavIconStyle,
|
|
485
|
+
// Desktop colapsado: wrapper de cada item (Inicio + opciones)
|
|
486
|
+
desktopCollapsedItemWrapperClassName = '',
|
|
487
|
+
desktopCollapsedItemWrapperStyle,
|
|
488
|
+
desktopCollapsedItemActiveBackgroundColor = '#2D5C63',
|
|
489
|
+
// Desktop colapsado: ancho del sidebar
|
|
490
|
+
desktopCollapsedWidth = '118px',
|
|
491
|
+
// Desktop colapsado: footer
|
|
492
|
+
desktopCollapsedFooterContainerClassName = '',
|
|
493
|
+
desktopCollapsedFooterContainerStyle,
|
|
494
|
+
desktopCollapsedFooterTextClassName = '',
|
|
495
|
+
desktopCollapsedFooterTextStyle,
|
|
442
496
|
nucleusName = 'Nucleus AR',
|
|
443
497
|
nucleusLogo,
|
|
444
498
|
onNucleusClick,
|
|
@@ -452,6 +506,20 @@ export const SidebarCore = ({
|
|
|
452
506
|
}) => {
|
|
453
507
|
const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
|
|
454
508
|
const [isMobile, setIsMobile] = useState(false);
|
|
509
|
+
const desktopNavIconSize = isCollapsed ? desktopCollapsedIconSize : desktopExpandedIconSize;
|
|
510
|
+
const collapsedItemWrapperDefaults = {
|
|
511
|
+
width: '78px',
|
|
512
|
+
height: '48px',
|
|
513
|
+
paddingTop: '8px',
|
|
514
|
+
paddingRight: '12px',
|
|
515
|
+
paddingBottom: '8px',
|
|
516
|
+
paddingLeft: '12px',
|
|
517
|
+
gap: '12px',
|
|
518
|
+
opacity: 1,
|
|
519
|
+
transform: 'rotate(0deg)',
|
|
520
|
+
borderRadius: '8px',
|
|
521
|
+
boxSizing: 'border-box',
|
|
522
|
+
};
|
|
455
523
|
|
|
456
524
|
// Detectar tamaño de pantalla
|
|
457
525
|
useEffect(() => {
|
|
@@ -520,9 +588,13 @@ export const SidebarCore = ({
|
|
|
520
588
|
return (
|
|
521
589
|
<aside
|
|
522
590
|
className={`bg-white transition-all duration-300 ease-in-out h-full ${
|
|
523
|
-
isCollapsed ? '
|
|
591
|
+
isCollapsed ? '' : 'w-64'
|
|
524
592
|
} ${className}`}
|
|
525
|
-
style={{
|
|
593
|
+
style={{
|
|
594
|
+
border: '1px solid #C4C4C4',
|
|
595
|
+
borderRadius: '16px',
|
|
596
|
+
...(isCollapsed ? { width: desktopCollapsedWidth } : {}),
|
|
597
|
+
}}
|
|
526
598
|
{...props}
|
|
527
599
|
>
|
|
528
600
|
<nav className="h-full flex flex-col" style={{ overflow: 'hidden' }}>
|
|
@@ -549,8 +621,9 @@ export const SidebarCore = ({
|
|
|
549
621
|
{/* Nombre de la empresa */}
|
|
550
622
|
<Typography
|
|
551
623
|
variant="body-md"
|
|
552
|
-
className={
|
|
624
|
+
className={desktopCompanyNameClassName}
|
|
553
625
|
style={{
|
|
626
|
+
color: '#223B40',
|
|
554
627
|
fontFamily: 'IBM Plex Sans',
|
|
555
628
|
fontWeight: 600,
|
|
556
629
|
fontStyle: 'normal',
|
|
@@ -587,10 +660,10 @@ export const SidebarCore = ({
|
|
|
587
660
|
...(desktopCollapseControlWrapperStyle || {}),
|
|
588
661
|
}}
|
|
589
662
|
>
|
|
590
|
-
|
|
591
|
-
|
|
663
|
+
<button
|
|
664
|
+
onClick={toggleCollapse}
|
|
592
665
|
className={`hover:bg-gray-100 transition-colors rounded-lg ${desktopCollapseButtonClassName}`}
|
|
593
|
-
|
|
666
|
+
aria-label="Colapsar sidebar"
|
|
594
667
|
style={{
|
|
595
668
|
width: '36px',
|
|
596
669
|
height: '36px',
|
|
@@ -601,23 +674,23 @@ export const SidebarCore = ({
|
|
|
601
674
|
transform: 'rotate(0deg)',
|
|
602
675
|
...(desktopCollapseButtonStyle || {}),
|
|
603
676
|
}}
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
677
|
+
>
|
|
678
|
+
<Icon
|
|
679
|
+
name="ChevronDoubleLeftIcon"
|
|
680
|
+
variant="24-outline"
|
|
608
681
|
size={desktopCollapseIconSize}
|
|
609
682
|
strokeWidth={desktopCollapseIconStrokeWidth}
|
|
610
683
|
className={desktopCollapseIconClassName}
|
|
611
684
|
style={{
|
|
612
|
-
width:
|
|
613
|
-
height:
|
|
685
|
+
width: `${desktopCollapseIconSize}px`,
|
|
686
|
+
height: `${desktopCollapseIconSize}px`,
|
|
614
687
|
opacity: 1,
|
|
615
688
|
transform: 'rotate(0deg)',
|
|
616
689
|
color: desktopCollapseIconColor,
|
|
617
690
|
...(desktopCollapseIconStyle || {}),
|
|
618
691
|
}}
|
|
619
|
-
|
|
620
|
-
|
|
692
|
+
/>
|
|
693
|
+
</button>
|
|
621
694
|
</div>
|
|
622
695
|
</div>
|
|
623
696
|
)}
|
|
@@ -654,6 +727,10 @@ export const SidebarCore = ({
|
|
|
654
727
|
className={desktopExpandIconClassName}
|
|
655
728
|
style={{
|
|
656
729
|
color: desktopExpandIconColor,
|
|
730
|
+
width: `${desktopExpandIconSize}px`,
|
|
731
|
+
height: `${desktopExpandIconSize}px`,
|
|
732
|
+
opacity: 1,
|
|
733
|
+
transform: 'rotate(0deg)',
|
|
657
734
|
...(desktopExpandIconStyle || {}),
|
|
658
735
|
}}
|
|
659
736
|
/>
|
|
@@ -666,73 +743,101 @@ export const SidebarCore = ({
|
|
|
666
743
|
<div className={`flex-1 overflow-y-auto ${isCollapsed ? 'py-2' : 'py-4'}`} style={{ overflowX: 'hidden' }}>
|
|
667
744
|
{/* Item "Inicio" destacado */}
|
|
668
745
|
<div className="px-4 mb-4">
|
|
669
|
-
<
|
|
670
|
-
|
|
671
|
-
className={`w-full flex items-center ${
|
|
672
|
-
isCollapsed ? 'justify-center px-2' : 'px-4 justify-between'
|
|
673
|
-
} py-2.5 rounded-lg transition-all duration-200 ${
|
|
674
|
-
activeItem === 'inicio'
|
|
675
|
-
? ''
|
|
676
|
-
: 'color-gray-700 hover:bg-gray-100'
|
|
677
|
-
}`}
|
|
746
|
+
<div
|
|
747
|
+
className={isCollapsed ? desktopCollapsedItemWrapperClassName : ''}
|
|
678
748
|
style={
|
|
679
|
-
|
|
680
|
-
? {
|
|
681
|
-
|
|
749
|
+
isCollapsed
|
|
750
|
+
? {
|
|
751
|
+
...collapsedItemWrapperDefaults,
|
|
752
|
+
backgroundColor:
|
|
753
|
+
activeItem === 'inicio' ? desktopCollapsedItemActiveBackgroundColor : 'transparent',
|
|
754
|
+
...(desktopCollapsedItemWrapperStyle || {}),
|
|
755
|
+
}
|
|
756
|
+
: undefined
|
|
682
757
|
}
|
|
683
758
|
>
|
|
684
|
-
<
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
{
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
759
|
+
<button
|
|
760
|
+
onClick={() => onItemClick && onItemClick('inicio')}
|
|
761
|
+
className={`w-full flex items-center ${
|
|
762
|
+
isCollapsed ? 'justify-center' : 'px-4 justify-between'
|
|
763
|
+
} ${isCollapsed ? '' : 'py-2.5 rounded-lg'} transition-all duration-200 ${
|
|
764
|
+
activeItem === 'inicio'
|
|
765
|
+
? ''
|
|
766
|
+
: 'color-gray-700 hover:bg-gray-100'
|
|
767
|
+
}`}
|
|
768
|
+
style={
|
|
769
|
+
isCollapsed
|
|
770
|
+
? {
|
|
771
|
+
width: '100%',
|
|
772
|
+
height: '100%',
|
|
773
|
+
backgroundColor: 'transparent',
|
|
774
|
+
borderRadius: '8px',
|
|
775
|
+
}
|
|
776
|
+
: activeItem === 'inicio'
|
|
777
|
+
? { backgroundColor: '#2D5C63' }
|
|
778
|
+
: {}
|
|
779
|
+
}
|
|
780
|
+
>
|
|
781
|
+
<div className={`flex items-center ${isCollapsed ? 'relative' : ''}`} style={isCollapsed && itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 ? { paddingRight: '16px' } : {}}>
|
|
782
|
+
<Icon
|
|
783
|
+
name="HomeIcon"
|
|
784
|
+
variant="24-outline"
|
|
785
|
+
size={desktopNavIconSize}
|
|
786
|
+
className={`${isCollapsed ? '' : 'mr-3'} ${
|
|
697
787
|
activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
|
|
698
788
|
}`}
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
789
|
+
style={{
|
|
790
|
+
width: `${desktopNavIconSize}px`,
|
|
791
|
+
height: `${desktopNavIconSize}px`,
|
|
792
|
+
opacity: 1,
|
|
793
|
+
transform: 'rotate(0deg)',
|
|
794
|
+
...(desktopNavIconStyle || {}),
|
|
795
|
+
}}
|
|
796
|
+
/>
|
|
797
|
+
{!isCollapsed && (
|
|
798
|
+
<Typography
|
|
799
|
+
variant="body-lg"
|
|
800
|
+
weight={activeItem === 'inicio' ? desktopItemLabelWeightActive : desktopItemLabelWeightInactive}
|
|
801
|
+
className={activeItem === 'inicio' ? 'color-white' : 'color-gray-700'}
|
|
802
|
+
style={{ fontSize: desktopItemLabelFontSize }}
|
|
803
|
+
>
|
|
804
|
+
Inicio
|
|
805
|
+
</Typography>
|
|
806
|
+
)}
|
|
807
|
+
{isCollapsed && itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
|
|
808
|
+
<span
|
|
809
|
+
className="px-2 py-0.5 min-w-[20px] h-5
|
|
810
|
+
rounded-full flex items-center justify-center
|
|
811
|
+
text-body-sm font-medium absolute"
|
|
812
|
+
style={{
|
|
813
|
+
backgroundColor: activeItem === 'inicio' ? '#ffffff' : '#6D3856',
|
|
814
|
+
color: activeItem === 'inicio' ? '#6D3856' : '#ffffff',
|
|
815
|
+
borderRadius: '12px',
|
|
816
|
+
top: '-4px',
|
|
817
|
+
right: '-4px',
|
|
818
|
+
zIndex: 10
|
|
819
|
+
}}
|
|
820
|
+
>
|
|
821
|
+
{itemBadges['inicio'] > 9 ? '9+' : itemBadges['inicio']}
|
|
822
|
+
</span>
|
|
823
|
+
)}
|
|
824
|
+
</div>
|
|
825
|
+
{!isCollapsed && itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
|
|
704
826
|
<span
|
|
705
827
|
className="px-2 py-0.5 min-w-[20px] h-5
|
|
706
828
|
rounded-full flex items-center justify-center
|
|
707
|
-
text-body-sm font-medium
|
|
708
|
-
style={{
|
|
829
|
+
text-body-sm font-medium"
|
|
830
|
+
style={{
|
|
709
831
|
backgroundColor: activeItem === 'inicio' ? '#ffffff' : '#6D3856',
|
|
710
832
|
color: activeItem === 'inicio' ? '#6D3856' : '#ffffff',
|
|
711
|
-
borderRadius: '12px'
|
|
712
|
-
top: '-4px',
|
|
713
|
-
right: '-4px',
|
|
714
|
-
zIndex: 10
|
|
833
|
+
borderRadius: '12px'
|
|
715
834
|
}}
|
|
716
835
|
>
|
|
717
836
|
{itemBadges['inicio'] > 9 ? '9+' : itemBadges['inicio']}
|
|
718
837
|
</span>
|
|
719
838
|
)}
|
|
720
|
-
</
|
|
721
|
-
|
|
722
|
-
<span
|
|
723
|
-
className="px-2 py-0.5 min-w-[20px] h-5
|
|
724
|
-
rounded-full flex items-center justify-center
|
|
725
|
-
text-body-sm font-medium"
|
|
726
|
-
style={{
|
|
727
|
-
backgroundColor: activeItem === 'inicio' ? '#ffffff' : '#6D3856',
|
|
728
|
-
color: activeItem === 'inicio' ? '#6D3856' : '#ffffff',
|
|
729
|
-
borderRadius: '12px'
|
|
730
|
-
}}
|
|
731
|
-
>
|
|
732
|
-
{itemBadges['inicio'] > 9 ? '9+' : itemBadges['inicio']}
|
|
733
|
-
</span>
|
|
734
|
-
)}
|
|
735
|
-
</button>
|
|
839
|
+
</button>
|
|
840
|
+
</div>
|
|
736
841
|
</div>
|
|
737
842
|
|
|
738
843
|
{/* Secciones */}
|
|
@@ -761,74 +866,103 @@ export const SidebarCore = ({
|
|
|
761
866
|
<div className="space-y-1">
|
|
762
867
|
{section.items.map((item) => (
|
|
763
868
|
<div key={item.id} className="px-4">
|
|
764
|
-
<
|
|
765
|
-
|
|
766
|
-
className={`w-full flex items-center ${
|
|
767
|
-
isCollapsed ? 'justify-center px-2' : 'px-4 justify-between'
|
|
768
|
-
} py-2.5 rounded-lg transition-all duration-200 ${
|
|
769
|
-
activeItem === item.id
|
|
770
|
-
? ''
|
|
771
|
-
: 'color-gray-700 hover:bg-gray-100'
|
|
772
|
-
}`}
|
|
869
|
+
<div
|
|
870
|
+
className={isCollapsed ? desktopCollapsedItemWrapperClassName : ''}
|
|
773
871
|
style={
|
|
774
|
-
|
|
775
|
-
? {
|
|
776
|
-
|
|
872
|
+
isCollapsed
|
|
873
|
+
? {
|
|
874
|
+
...collapsedItemWrapperDefaults,
|
|
875
|
+
backgroundColor:
|
|
876
|
+
activeItem === item.id ? desktopCollapsedItemActiveBackgroundColor : 'transparent',
|
|
877
|
+
...(desktopCollapsedItemWrapperStyle || {}),
|
|
878
|
+
}
|
|
879
|
+
: undefined
|
|
777
880
|
}
|
|
778
881
|
title={isCollapsed ? item.label : ''}
|
|
779
882
|
>
|
|
780
|
-
<
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
{
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
883
|
+
<button
|
|
884
|
+
onClick={() => onItemClick && onItemClick(item.id)}
|
|
885
|
+
className={`w-full flex items-center ${
|
|
886
|
+
isCollapsed ? 'justify-center' : 'px-4 justify-between'
|
|
887
|
+
} ${isCollapsed ? '' : 'py-2.5 rounded-lg'} transition-all duration-200 ${
|
|
888
|
+
activeItem === item.id
|
|
889
|
+
? ''
|
|
890
|
+
: 'color-gray-700 hover:bg-gray-100'
|
|
891
|
+
}`}
|
|
892
|
+
style={
|
|
893
|
+
isCollapsed
|
|
894
|
+
? {
|
|
895
|
+
width: '100%',
|
|
896
|
+
height: '100%',
|
|
897
|
+
backgroundColor: 'transparent',
|
|
898
|
+
borderRadius: '8px',
|
|
899
|
+
}
|
|
900
|
+
: activeItem === item.id
|
|
901
|
+
? { backgroundColor: '#2D5C63' }
|
|
902
|
+
: {}
|
|
903
|
+
}
|
|
904
|
+
title={isCollapsed ? item.label : ''}
|
|
905
|
+
>
|
|
906
|
+
<div className={`flex items-center ${isCollapsed ? 'relative' : ''}`} style={isCollapsed && ((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) ? { paddingRight: '16px' } : {}}>
|
|
907
|
+
<Icon
|
|
908
|
+
name={item.icon}
|
|
909
|
+
variant="24-outline"
|
|
910
|
+
size={desktopNavIconSize}
|
|
911
|
+
className={`${isCollapsed ? '' : 'mr-3'} ${
|
|
793
912
|
activeItem === item.id ? 'color-white' : 'color-gray-700'
|
|
794
913
|
}`}
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
914
|
+
style={{
|
|
915
|
+
width: `${desktopNavIconSize}px`,
|
|
916
|
+
height: `${desktopNavIconSize}px`,
|
|
917
|
+
opacity: 1,
|
|
918
|
+
transform: 'rotate(0deg)',
|
|
919
|
+
...(desktopNavIconStyle || {}),
|
|
920
|
+
}}
|
|
921
|
+
/>
|
|
922
|
+
{!isCollapsed && (
|
|
923
|
+
<Typography
|
|
924
|
+
variant="body-lg"
|
|
925
|
+
weight={activeItem === item.id ? desktopItemLabelWeightActive : desktopItemLabelWeightInactive}
|
|
926
|
+
className={activeItem === item.id ? 'color-white' : 'color-gray-700'}
|
|
927
|
+
style={{ fontSize: desktopItemLabelFontSize }}
|
|
928
|
+
>
|
|
929
|
+
{item.label}
|
|
930
|
+
</Typography>
|
|
931
|
+
)}
|
|
932
|
+
{isCollapsed && ((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
|
|
933
|
+
<span
|
|
934
|
+
className="px-2 py-0.5 min-w-[20px] h-5
|
|
935
|
+
rounded-full flex items-center justify-center
|
|
936
|
+
text-body-sm font-medium absolute"
|
|
937
|
+
style={{
|
|
938
|
+
backgroundColor: activeItem === item.id ? '#ffffff' : '#6D3856',
|
|
939
|
+
color: activeItem === item.id ? '#6D3856' : '#ffffff',
|
|
940
|
+
borderRadius: '12px',
|
|
941
|
+
top: '-4px',
|
|
942
|
+
right: '-4px',
|
|
943
|
+
zIndex: 10
|
|
944
|
+
}}
|
|
945
|
+
>
|
|
946
|
+
{item.id === 'empleados' ? 2 : (itemBadges[item.id] > 9 ? '9+' : itemBadges[item.id])}
|
|
947
|
+
</span>
|
|
948
|
+
)}
|
|
949
|
+
</div>
|
|
950
|
+
{!isCollapsed && ((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
|
|
800
951
|
<span
|
|
801
952
|
className="px-2 py-0.5 min-w-[20px] h-5
|
|
802
953
|
rounded-full flex items-center justify-center
|
|
803
|
-
text-body-sm font-medium
|
|
804
|
-
style={{
|
|
954
|
+
text-body-sm font-medium"
|
|
955
|
+
style={{
|
|
805
956
|
backgroundColor: activeItem === item.id ? '#ffffff' : '#6D3856',
|
|
806
957
|
color: activeItem === item.id ? '#6D3856' : '#ffffff',
|
|
807
|
-
borderRadius: '12px'
|
|
808
|
-
top: '-4px',
|
|
809
|
-
right: '-4px',
|
|
810
|
-
zIndex: 10
|
|
958
|
+
borderRadius: '12px'
|
|
811
959
|
}}
|
|
812
960
|
>
|
|
813
961
|
{item.id === 'empleados' ? 2 : (itemBadges[item.id] > 9 ? '9+' : itemBadges[item.id])}
|
|
814
962
|
</span>
|
|
815
963
|
)}
|
|
816
|
-
</
|
|
817
|
-
|
|
818
|
-
<span
|
|
819
|
-
className="px-2 py-0.5 min-w-[20px] h-5
|
|
820
|
-
rounded-full flex items-center justify-center
|
|
821
|
-
text-body-sm font-medium"
|
|
822
|
-
style={{
|
|
823
|
-
backgroundColor: activeItem === item.id ? '#ffffff' : '#6D3856',
|
|
824
|
-
color: activeItem === item.id ? '#6D3856' : '#ffffff',
|
|
825
|
-
borderRadius: '12px'
|
|
826
|
-
}}
|
|
827
|
-
>
|
|
828
|
-
{item.id === 'empleados' ? 2 : (itemBadges[item.id] > 9 ? '9+' : itemBadges[item.id])}
|
|
829
|
-
</span>
|
|
830
|
-
)}
|
|
831
|
-
</button>
|
|
964
|
+
</button>
|
|
965
|
+
</div>
|
|
832
966
|
</div>
|
|
833
967
|
))}
|
|
834
968
|
</div>
|
|
@@ -894,30 +1028,40 @@ export const SidebarCore = ({
|
|
|
894
1028
|
{effectiveFooterCollapsedContent && isCollapsed && (
|
|
895
1029
|
<div className="flex justify-center flex-shrink-0" style={{ zIndex: 10, paddingTop: '10px', paddingBottom: '10px' }}>
|
|
896
1030
|
<div
|
|
897
|
-
className=
|
|
1031
|
+
className={`bg-white flex items-center justify-center ${desktopCollapsedFooterContainerClassName}`}
|
|
898
1032
|
style={{
|
|
899
|
-
width: '
|
|
900
|
-
height: '
|
|
1033
|
+
width: '78px',
|
|
1034
|
+
height: '32px',
|
|
901
1035
|
borderRadius: '8px',
|
|
902
1036
|
border: '1px solid #29474C',
|
|
903
1037
|
paddingTop: '8px',
|
|
904
1038
|
paddingRight: '12px',
|
|
905
1039
|
paddingBottom: '8px',
|
|
906
|
-
paddingLeft: '12px'
|
|
1040
|
+
paddingLeft: '12px',
|
|
1041
|
+
gap: '10px',
|
|
1042
|
+
opacity: 1,
|
|
1043
|
+
transform: 'rotate(0deg)',
|
|
1044
|
+
boxSizing: 'border-box',
|
|
1045
|
+
...(desktopCollapsedFooterContainerStyle || {})
|
|
907
1046
|
}}
|
|
908
1047
|
>
|
|
909
1048
|
{typeof effectiveFooterCollapsedContent === 'string' ? (
|
|
910
1049
|
<span
|
|
1050
|
+
className={desktopCollapsedFooterTextClassName}
|
|
911
1051
|
style={{
|
|
912
|
-
color: '#
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
1052
|
+
color: '#223B40',
|
|
1053
|
+
fontFamily: 'IBM Plex Sans',
|
|
1054
|
+
fontWeight: 400,
|
|
1055
|
+
fontStyle: 'normal',
|
|
1056
|
+
fontSize: '12px',
|
|
1057
|
+
lineHeight: '100%',
|
|
1058
|
+
letterSpacing: '0%',
|
|
916
1059
|
textAlign: 'center',
|
|
917
1060
|
whiteSpace: 'nowrap',
|
|
918
1061
|
overflow: 'hidden',
|
|
919
1062
|
textOverflow: 'ellipsis',
|
|
920
|
-
maxWidth: '100%'
|
|
1063
|
+
maxWidth: '100%',
|
|
1064
|
+
...(desktopCollapsedFooterTextStyle || {})
|
|
921
1065
|
}}
|
|
922
1066
|
>
|
|
923
1067
|
{effectiveFooterCollapsedContent}
|
|
@@ -934,10 +1078,18 @@ export const SidebarCore = ({
|
|
|
934
1078
|
)}
|
|
935
1079
|
{effectiveFooterCollapsedContent.text && (
|
|
936
1080
|
<span
|
|
1081
|
+
className={desktopCollapsedFooterTextClassName}
|
|
937
1082
|
style={{
|
|
938
|
-
color: '#
|
|
1083
|
+
color: '#223B40',
|
|
1084
|
+
fontFamily: 'IBM Plex Sans',
|
|
1085
|
+
fontWeight: 400,
|
|
1086
|
+
fontStyle: 'normal',
|
|
939
1087
|
fontSize: '12px',
|
|
1088
|
+
lineHeight: '100%',
|
|
1089
|
+
letterSpacing: '0%',
|
|
1090
|
+
textAlign: 'center',
|
|
940
1091
|
marginLeft: effectiveFooterCollapsedContent.icon ? '4px' : '0'
|
|
1092
|
+
,...(desktopCollapsedFooterTextStyle || {})
|
|
941
1093
|
}}
|
|
942
1094
|
>
|
|
943
1095
|
{effectiveFooterCollapsedContent.text}
|