anima-ds-nucleus 1.0.13 → 1.0.15
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,48 @@ 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
|
+
// Desktop colapsado: wrapper interno del ícono (hijo del 32x32)
|
|
485
|
+
desktopCollapsedIconInnerSize = 24,
|
|
486
|
+
desktopCollapsedIconInnerStyle,
|
|
487
|
+
desktopCollapsedIconWrapperStyle,
|
|
488
|
+
// Desktop colapsado: solapamiento icono + badge (mínimo)
|
|
489
|
+
desktopCollapsedOverlapEnabled = true,
|
|
490
|
+
desktopCollapsedOverlapIconMarginLeftPx = 3,
|
|
491
|
+
desktopCollapsedOverlapBadgeMarginLeftPx = -6,
|
|
492
|
+
desktopCollapsedOverlapColumnGapPx = 0,
|
|
493
|
+
desktopNavIconStyle,
|
|
494
|
+
// Desktop colapsado: wrapper de cada item (Inicio + opciones)
|
|
495
|
+
desktopCollapsedItemWrapperClassName = '',
|
|
496
|
+
desktopCollapsedItemWrapperStyle,
|
|
497
|
+
desktopCollapsedItemActiveBackgroundColor = '#2D5C63',
|
|
498
|
+
// Desktop colapsado: badge (globito) de notificaciones
|
|
499
|
+
desktopCollapsedBadgeClassName = '',
|
|
500
|
+
desktopCollapsedBadgeStyle,
|
|
501
|
+
desktopCollapsedBadgeWidth = '21px',
|
|
502
|
+
desktopCollapsedBadgeHeight = '20px',
|
|
503
|
+
// Desktop colapsado: ancho del sidebar
|
|
504
|
+
desktopCollapsedWidth = '118px',
|
|
505
|
+
// Desktop colapsado: footer
|
|
506
|
+
desktopCollapsedFooterContainerClassName = '',
|
|
507
|
+
desktopCollapsedFooterContainerStyle,
|
|
508
|
+
desktopCollapsedFooterTextClassName = '',
|
|
509
|
+
desktopCollapsedFooterTextStyle,
|
|
510
|
+
// Desktop colapsado: separador entre secciones
|
|
511
|
+
desktopCollapsedSectionSeparatorClassName = '',
|
|
512
|
+
desktopCollapsedSectionSeparatorStyle,
|
|
513
|
+
desktopCollapsedSectionSeparatorWrapperClassName = '',
|
|
514
|
+
desktopCollapsedSectionSeparatorWrapperStyle,
|
|
515
|
+
// Desktop colapsado: ajustes de spacing (para evitar “aire” extra)
|
|
516
|
+
desktopCollapsedInicioContainerClassName = '',
|
|
517
|
+
desktopCollapsedSectionContainerClassName = '',
|
|
518
|
+
desktopCollapsedSeparatorContainerClassName = '',
|
|
442
519
|
nucleusName = 'Nucleus AR',
|
|
443
520
|
nucleusLogo,
|
|
444
521
|
onNucleusClick,
|
|
@@ -452,6 +529,21 @@ export const SidebarCore = ({
|
|
|
452
529
|
}) => {
|
|
453
530
|
const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
|
|
454
531
|
const [isMobile, setIsMobile] = useState(false);
|
|
532
|
+
const desktopNavIconSize = isCollapsed ? desktopCollapsedIconSize : desktopExpandedIconSize;
|
|
533
|
+
const desktopNavIconGlyphSize = isCollapsed ? desktopCollapsedIconInnerSize : desktopExpandedIconSize;
|
|
534
|
+
const collapsedItemWrapperDefaults = {
|
|
535
|
+
width: '78px',
|
|
536
|
+
height: '48px',
|
|
537
|
+
paddingTop: '8px',
|
|
538
|
+
paddingRight: '12px',
|
|
539
|
+
paddingBottom: '8px',
|
|
540
|
+
paddingLeft: '12px',
|
|
541
|
+
gap: '12px',
|
|
542
|
+
opacity: 1,
|
|
543
|
+
transform: 'rotate(0deg)',
|
|
544
|
+
borderRadius: '8px',
|
|
545
|
+
boxSizing: 'border-box',
|
|
546
|
+
};
|
|
455
547
|
|
|
456
548
|
// Detectar tamaño de pantalla
|
|
457
549
|
useEffect(() => {
|
|
@@ -520,9 +612,13 @@ export const SidebarCore = ({
|
|
|
520
612
|
return (
|
|
521
613
|
<aside
|
|
522
614
|
className={`bg-white transition-all duration-300 ease-in-out h-full ${
|
|
523
|
-
isCollapsed ? '
|
|
615
|
+
isCollapsed ? '' : 'w-64'
|
|
524
616
|
} ${className}`}
|
|
525
|
-
style={{
|
|
617
|
+
style={{
|
|
618
|
+
border: '1px solid #C4C4C4',
|
|
619
|
+
borderRadius: '16px',
|
|
620
|
+
...(isCollapsed ? { width: desktopCollapsedWidth } : {}),
|
|
621
|
+
}}
|
|
526
622
|
{...props}
|
|
527
623
|
>
|
|
528
624
|
<nav className="h-full flex flex-col" style={{ overflow: 'hidden' }}>
|
|
@@ -549,8 +645,9 @@ export const SidebarCore = ({
|
|
|
549
645
|
{/* Nombre de la empresa */}
|
|
550
646
|
<Typography
|
|
551
647
|
variant="body-md"
|
|
552
|
-
className={
|
|
648
|
+
className={desktopCompanyNameClassName}
|
|
553
649
|
style={{
|
|
650
|
+
color: '#223B40',
|
|
554
651
|
fontFamily: 'IBM Plex Sans',
|
|
555
652
|
fontWeight: 600,
|
|
556
653
|
fontStyle: 'normal',
|
|
@@ -587,10 +684,10 @@ export const SidebarCore = ({
|
|
|
587
684
|
...(desktopCollapseControlWrapperStyle || {}),
|
|
588
685
|
}}
|
|
589
686
|
>
|
|
590
|
-
|
|
591
|
-
|
|
687
|
+
<button
|
|
688
|
+
onClick={toggleCollapse}
|
|
592
689
|
className={`hover:bg-gray-100 transition-colors rounded-lg ${desktopCollapseButtonClassName}`}
|
|
593
|
-
|
|
690
|
+
aria-label="Colapsar sidebar"
|
|
594
691
|
style={{
|
|
595
692
|
width: '36px',
|
|
596
693
|
height: '36px',
|
|
@@ -601,23 +698,23 @@ export const SidebarCore = ({
|
|
|
601
698
|
transform: 'rotate(0deg)',
|
|
602
699
|
...(desktopCollapseButtonStyle || {}),
|
|
603
700
|
}}
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
701
|
+
>
|
|
702
|
+
<Icon
|
|
703
|
+
name="ChevronDoubleLeftIcon"
|
|
704
|
+
variant="24-outline"
|
|
608
705
|
size={desktopCollapseIconSize}
|
|
609
706
|
strokeWidth={desktopCollapseIconStrokeWidth}
|
|
610
707
|
className={desktopCollapseIconClassName}
|
|
611
708
|
style={{
|
|
612
|
-
width:
|
|
613
|
-
height:
|
|
709
|
+
width: `${desktopCollapseIconSize}px`,
|
|
710
|
+
height: `${desktopCollapseIconSize}px`,
|
|
614
711
|
opacity: 1,
|
|
615
712
|
transform: 'rotate(0deg)',
|
|
616
713
|
color: desktopCollapseIconColor,
|
|
617
714
|
...(desktopCollapseIconStyle || {}),
|
|
618
715
|
}}
|
|
619
|
-
|
|
620
|
-
|
|
716
|
+
/>
|
|
717
|
+
</button>
|
|
621
718
|
</div>
|
|
622
719
|
</div>
|
|
623
720
|
)}
|
|
@@ -654,6 +751,10 @@ export const SidebarCore = ({
|
|
|
654
751
|
className={desktopExpandIconClassName}
|
|
655
752
|
style={{
|
|
656
753
|
color: desktopExpandIconColor,
|
|
754
|
+
width: `${desktopExpandIconSize}px`,
|
|
755
|
+
height: `${desktopExpandIconSize}px`,
|
|
756
|
+
opacity: 1,
|
|
757
|
+
transform: 'rotate(0deg)',
|
|
657
758
|
...(desktopExpandIconStyle || {}),
|
|
658
759
|
}}
|
|
659
760
|
/>
|
|
@@ -665,83 +766,216 @@ export const SidebarCore = ({
|
|
|
665
766
|
<div className="flex-1 min-h-0 flex flex-col overflow-hidden">
|
|
666
767
|
<div className={`flex-1 overflow-y-auto ${isCollapsed ? 'py-2' : 'py-4'}`} style={{ overflowX: 'hidden' }}>
|
|
667
768
|
{/* Item "Inicio" destacado */}
|
|
668
|
-
<div
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
} py-2.5 rounded-lg transition-all duration-200 ${
|
|
674
|
-
activeItem === 'inicio'
|
|
675
|
-
? ''
|
|
676
|
-
: 'color-gray-700 hover:bg-gray-100'
|
|
677
|
-
}`}
|
|
769
|
+
<div
|
|
770
|
+
className={`px-4 ${isCollapsed ? 'mb-0' : 'mb-4'} ${desktopCollapsedInicioContainerClassName}`}
|
|
771
|
+
>
|
|
772
|
+
<div
|
|
773
|
+
className={isCollapsed ? desktopCollapsedItemWrapperClassName : ''}
|
|
678
774
|
style={
|
|
679
|
-
|
|
680
|
-
? {
|
|
681
|
-
|
|
775
|
+
isCollapsed
|
|
776
|
+
? {
|
|
777
|
+
...collapsedItemWrapperDefaults,
|
|
778
|
+
backgroundColor:
|
|
779
|
+
activeItem === 'inicio' ? desktopCollapsedItemActiveBackgroundColor : 'transparent',
|
|
780
|
+
...(desktopCollapsedItemWrapperStyle || {}),
|
|
781
|
+
}
|
|
782
|
+
: undefined
|
|
682
783
|
}
|
|
683
784
|
>
|
|
684
|
-
<
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
{
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
785
|
+
<button
|
|
786
|
+
onClick={() => onItemClick && onItemClick('inicio')}
|
|
787
|
+
className={`w-full flex items-center ${
|
|
788
|
+
isCollapsed ? 'justify-center' : 'px-4 justify-between'
|
|
789
|
+
} ${isCollapsed ? '' : 'py-2.5 rounded-lg'} transition-all duration-200 ${
|
|
790
|
+
activeItem === 'inicio'
|
|
791
|
+
? ''
|
|
792
|
+
: 'color-gray-700 hover:bg-gray-100'
|
|
793
|
+
}`}
|
|
794
|
+
style={
|
|
795
|
+
isCollapsed
|
|
796
|
+
? {
|
|
797
|
+
width: '100%',
|
|
798
|
+
height: '100%',
|
|
799
|
+
backgroundColor: 'transparent',
|
|
800
|
+
borderRadius: '8px',
|
|
801
|
+
}
|
|
802
|
+
: activeItem === 'inicio'
|
|
803
|
+
? { backgroundColor: '#2D5C63' }
|
|
804
|
+
: {}
|
|
805
|
+
}
|
|
806
|
+
>
|
|
807
|
+
<div
|
|
808
|
+
className={`flex items-center ${isCollapsed ? '' : ''}`}
|
|
809
|
+
style={
|
|
810
|
+
isCollapsed
|
|
811
|
+
? {
|
|
812
|
+
justifyContent: 'center',
|
|
813
|
+
columnGap: `${desktopCollapsedOverlapColumnGapPx}px`,
|
|
814
|
+
width: '100%',
|
|
815
|
+
}
|
|
816
|
+
: {}
|
|
817
|
+
}
|
|
818
|
+
>
|
|
819
|
+
{isCollapsed ? (
|
|
820
|
+
<div
|
|
821
|
+
style={{
|
|
822
|
+
width: `${desktopNavIconSize}px`,
|
|
823
|
+
height: `${desktopNavIconSize}px`,
|
|
824
|
+
opacity: 1,
|
|
825
|
+
transform: 'rotate(0deg)',
|
|
826
|
+
display: 'flex',
|
|
827
|
+
alignItems: 'center',
|
|
828
|
+
justifyContent: 'center',
|
|
829
|
+
marginLeft:
|
|
830
|
+
desktopCollapsedOverlapEnabled &&
|
|
831
|
+
itemBadges['inicio'] !== undefined &&
|
|
832
|
+
itemBadges['inicio'] > 0
|
|
833
|
+
? `${desktopCollapsedOverlapIconMarginLeftPx}px`
|
|
834
|
+
: undefined,
|
|
835
|
+
...(desktopCollapsedIconWrapperStyle || {}),
|
|
836
|
+
}}
|
|
837
|
+
>
|
|
838
|
+
<div
|
|
839
|
+
style={{
|
|
840
|
+
width: '24px',
|
|
841
|
+
height: '24px',
|
|
842
|
+
opacity: 1,
|
|
843
|
+
transform: 'rotate(0deg)',
|
|
844
|
+
display: 'flex',
|
|
845
|
+
alignItems: 'center',
|
|
846
|
+
justifyContent: 'center',
|
|
847
|
+
...(desktopCollapsedIconInnerStyle || {}),
|
|
848
|
+
}}
|
|
849
|
+
>
|
|
850
|
+
<Icon
|
|
851
|
+
name="HomeIcon"
|
|
852
|
+
variant="24-outline"
|
|
853
|
+
size={desktopNavIconGlyphSize}
|
|
854
|
+
className={activeItem === 'inicio' ? 'color-white' : 'color-gray-700'}
|
|
855
|
+
style={{
|
|
856
|
+
width: `${desktopNavIconGlyphSize}px`,
|
|
857
|
+
height: `${desktopNavIconGlyphSize}px`,
|
|
858
|
+
opacity: 1,
|
|
859
|
+
transform: 'rotate(0deg)',
|
|
860
|
+
...(desktopNavIconStyle || {}),
|
|
861
|
+
}}
|
|
862
|
+
/>
|
|
863
|
+
</div>
|
|
864
|
+
</div>
|
|
865
|
+
) : (
|
|
866
|
+
<Icon
|
|
867
|
+
name="HomeIcon"
|
|
868
|
+
variant="24-outline"
|
|
869
|
+
size={desktopNavIconGlyphSize}
|
|
870
|
+
className={`${isCollapsed ? '' : 'mr-3'} ${
|
|
871
|
+
activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
|
|
872
|
+
}`}
|
|
873
|
+
style={{
|
|
874
|
+
width: `${desktopNavIconGlyphSize}px`,
|
|
875
|
+
height: `${desktopNavIconGlyphSize}px`,
|
|
876
|
+
opacity: 1,
|
|
877
|
+
transform: 'rotate(0deg)',
|
|
878
|
+
...(desktopNavIconStyle || {}),
|
|
879
|
+
}}
|
|
880
|
+
/>
|
|
881
|
+
)}
|
|
882
|
+
{!isCollapsed && (
|
|
883
|
+
<Typography
|
|
884
|
+
variant="body-lg"
|
|
885
|
+
weight={activeItem === 'inicio' ? desktopItemLabelWeightActive : desktopItemLabelWeightInactive}
|
|
886
|
+
className={activeItem === 'inicio' ? 'color-white' : 'color-gray-700'}
|
|
887
|
+
style={{ fontSize: desktopItemLabelFontSize }}
|
|
888
|
+
>
|
|
889
|
+
Inicio
|
|
890
|
+
</Typography>
|
|
891
|
+
)}
|
|
892
|
+
{isCollapsed && itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
|
|
893
|
+
<span
|
|
894
|
+
className={`flex items-center justify-center text-body-sm font-medium ${desktopCollapsedBadgeClassName}`}
|
|
895
|
+
style={{
|
|
896
|
+
backgroundColor: activeItem === 'inicio' ? '#ffffff' : '#6D3856',
|
|
897
|
+
color: activeItem === 'inicio' ? '#6D3856' : '#ffffff',
|
|
898
|
+
width: desktopCollapsedBadgeWidth,
|
|
899
|
+
height: desktopCollapsedBadgeHeight,
|
|
900
|
+
paddingTop: '4px',
|
|
901
|
+
paddingRight: '6px',
|
|
902
|
+
paddingBottom: '4px',
|
|
903
|
+
paddingLeft: '6px',
|
|
904
|
+
borderRadius: '16px',
|
|
905
|
+
opacity: 1,
|
|
906
|
+
transform: 'rotate(0deg)',
|
|
907
|
+
marginLeft: desktopCollapsedOverlapEnabled
|
|
908
|
+
? `${desktopCollapsedOverlapBadgeMarginLeftPx}px`
|
|
909
|
+
: undefined,
|
|
910
|
+
boxSizing: 'border-box',
|
|
911
|
+
...(desktopCollapsedBadgeStyle || {}),
|
|
912
|
+
}}
|
|
913
|
+
>
|
|
914
|
+
{itemBadges['inicio'] > 9 ? '9+' : itemBadges['inicio']}
|
|
915
|
+
</span>
|
|
916
|
+
)}
|
|
917
|
+
</div>
|
|
918
|
+
{!isCollapsed && itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
|
|
704
919
|
<span
|
|
705
920
|
className="px-2 py-0.5 min-w-[20px] h-5
|
|
706
921
|
rounded-full flex items-center justify-center
|
|
707
|
-
text-body-sm font-medium
|
|
708
|
-
style={{
|
|
922
|
+
text-body-sm font-medium"
|
|
923
|
+
style={{
|
|
709
924
|
backgroundColor: activeItem === 'inicio' ? '#ffffff' : '#6D3856',
|
|
710
925
|
color: activeItem === 'inicio' ? '#6D3856' : '#ffffff',
|
|
711
|
-
borderRadius: '12px'
|
|
712
|
-
top: '-4px',
|
|
713
|
-
right: '-4px',
|
|
714
|
-
zIndex: 10
|
|
926
|
+
borderRadius: '12px'
|
|
715
927
|
}}
|
|
716
928
|
>
|
|
717
929
|
{itemBadges['inicio'] > 9 ? '9+' : itemBadges['inicio']}
|
|
718
930
|
</span>
|
|
719
931
|
)}
|
|
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>
|
|
932
|
+
</button>
|
|
933
|
+
</div>
|
|
736
934
|
</div>
|
|
737
935
|
|
|
738
936
|
{/* Secciones */}
|
|
739
937
|
{sections.map((section, sectionIndex) => (
|
|
740
|
-
<div
|
|
938
|
+
<div
|
|
939
|
+
key={sectionIndex}
|
|
940
|
+
className={`${isCollapsed ? 'mb-0' : 'mb-6'} ${desktopCollapsedSectionContainerClassName}`}
|
|
941
|
+
>
|
|
741
942
|
{/* Línea separadora cuando está colapsado - antes de cada sección */}
|
|
742
943
|
{isCollapsed && (
|
|
743
|
-
<div className=
|
|
744
|
-
<div
|
|
944
|
+
<div className={`px-4 mb-0 ${desktopCollapsedSeparatorContainerClassName}`}>
|
|
945
|
+
<div
|
|
946
|
+
className={desktopCollapsedSectionSeparatorWrapperClassName}
|
|
947
|
+
style={{
|
|
948
|
+
width: '78px',
|
|
949
|
+
height: '32px',
|
|
950
|
+
paddingTop: '16px',
|
|
951
|
+
paddingRight: '8px',
|
|
952
|
+
paddingBottom: '16px',
|
|
953
|
+
paddingLeft: '8px',
|
|
954
|
+
opacity: 1,
|
|
955
|
+
transform: 'rotate(0deg)',
|
|
956
|
+
display: 'flex',
|
|
957
|
+
alignItems: 'center',
|
|
958
|
+
justifyContent: 'center',
|
|
959
|
+
boxSizing: 'border-box',
|
|
960
|
+
...(desktopCollapsedSectionSeparatorWrapperStyle || {}),
|
|
961
|
+
}}
|
|
962
|
+
>
|
|
963
|
+
<div
|
|
964
|
+
className={desktopCollapsedSectionSeparatorClassName}
|
|
965
|
+
style={{
|
|
966
|
+
width: '42px',
|
|
967
|
+
height: '0px',
|
|
968
|
+
opacity: 1,
|
|
969
|
+
transform: 'rotate(0deg)',
|
|
970
|
+
borderTopWidth: '1px',
|
|
971
|
+
borderTopStyle: 'solid',
|
|
972
|
+
borderTopColor: '#2D5C63',
|
|
973
|
+
marginLeft: 'auto',
|
|
974
|
+
marginRight: 'auto',
|
|
975
|
+
...(desktopCollapsedSectionSeparatorStyle || {}),
|
|
976
|
+
}}
|
|
977
|
+
/>
|
|
978
|
+
</div>
|
|
745
979
|
</div>
|
|
746
980
|
)}
|
|
747
981
|
|
|
@@ -761,74 +995,170 @@ export const SidebarCore = ({
|
|
|
761
995
|
<div className="space-y-1">
|
|
762
996
|
{section.items.map((item) => (
|
|
763
997
|
<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
|
-
}`}
|
|
998
|
+
<div
|
|
999
|
+
className={isCollapsed ? desktopCollapsedItemWrapperClassName : ''}
|
|
773
1000
|
style={
|
|
774
|
-
|
|
775
|
-
? {
|
|
776
|
-
|
|
1001
|
+
isCollapsed
|
|
1002
|
+
? {
|
|
1003
|
+
...collapsedItemWrapperDefaults,
|
|
1004
|
+
backgroundColor:
|
|
1005
|
+
activeItem === item.id ? desktopCollapsedItemActiveBackgroundColor : 'transparent',
|
|
1006
|
+
...(desktopCollapsedItemWrapperStyle || {}),
|
|
1007
|
+
}
|
|
1008
|
+
: undefined
|
|
777
1009
|
}
|
|
778
1010
|
title={isCollapsed ? item.label : ''}
|
|
779
1011
|
>
|
|
780
|
-
<
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
{
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
1012
|
+
<button
|
|
1013
|
+
onClick={() => onItemClick && onItemClick(item.id)}
|
|
1014
|
+
className={`w-full flex items-center ${
|
|
1015
|
+
isCollapsed ? 'justify-center' : 'px-4 justify-between'
|
|
1016
|
+
} ${isCollapsed ? '' : 'py-2.5 rounded-lg'} transition-all duration-200 ${
|
|
1017
|
+
activeItem === item.id
|
|
1018
|
+
? ''
|
|
1019
|
+
: 'color-gray-700 hover:bg-gray-100'
|
|
1020
|
+
}`}
|
|
1021
|
+
style={
|
|
1022
|
+
isCollapsed
|
|
1023
|
+
? {
|
|
1024
|
+
width: '100%',
|
|
1025
|
+
height: '100%',
|
|
1026
|
+
backgroundColor: 'transparent',
|
|
1027
|
+
borderRadius: '8px',
|
|
1028
|
+
}
|
|
1029
|
+
: activeItem === item.id
|
|
1030
|
+
? { backgroundColor: '#2D5C63' }
|
|
1031
|
+
: {}
|
|
1032
|
+
}
|
|
1033
|
+
title={isCollapsed ? item.label : ''}
|
|
1034
|
+
>
|
|
1035
|
+
<div
|
|
1036
|
+
className="flex items-center"
|
|
1037
|
+
style={
|
|
1038
|
+
isCollapsed
|
|
1039
|
+
? {
|
|
1040
|
+
justifyContent: 'center',
|
|
1041
|
+
columnGap: `${desktopCollapsedOverlapColumnGapPx}px`,
|
|
1042
|
+
width: '100%',
|
|
1043
|
+
}
|
|
1044
|
+
: {}
|
|
1045
|
+
}
|
|
1046
|
+
>
|
|
1047
|
+
{isCollapsed ? (
|
|
1048
|
+
<div
|
|
1049
|
+
style={{
|
|
1050
|
+
width: `${desktopNavIconSize}px`,
|
|
1051
|
+
height: `${desktopNavIconSize}px`,
|
|
1052
|
+
opacity: 1,
|
|
1053
|
+
transform: 'rotate(0deg)',
|
|
1054
|
+
display: 'flex',
|
|
1055
|
+
alignItems: 'center',
|
|
1056
|
+
justifyContent: 'center',
|
|
1057
|
+
marginLeft:
|
|
1058
|
+
desktopCollapsedOverlapEnabled &&
|
|
1059
|
+
((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) ||
|
|
1060
|
+
(item.id === 'empleados' && 2))
|
|
1061
|
+
? `${desktopCollapsedOverlapIconMarginLeftPx}px`
|
|
1062
|
+
: undefined,
|
|
1063
|
+
...(desktopCollapsedIconWrapperStyle || {}),
|
|
1064
|
+
}}
|
|
1065
|
+
>
|
|
1066
|
+
<div
|
|
1067
|
+
style={{
|
|
1068
|
+
width: '24px',
|
|
1069
|
+
height: '24px',
|
|
1070
|
+
opacity: 1,
|
|
1071
|
+
transform: 'rotate(0deg)',
|
|
1072
|
+
display: 'flex',
|
|
1073
|
+
alignItems: 'center',
|
|
1074
|
+
justifyContent: 'center',
|
|
1075
|
+
...(desktopCollapsedIconInnerStyle || {}),
|
|
1076
|
+
}}
|
|
1077
|
+
>
|
|
1078
|
+
<Icon
|
|
1079
|
+
name={item.icon}
|
|
1080
|
+
variant="24-outline"
|
|
1081
|
+
size={desktopNavIconGlyphSize}
|
|
1082
|
+
className={activeItem === item.id ? 'color-white' : 'color-gray-700'}
|
|
1083
|
+
style={{
|
|
1084
|
+
width: `${desktopNavIconGlyphSize}px`,
|
|
1085
|
+
height: `${desktopNavIconGlyphSize}px`,
|
|
1086
|
+
opacity: 1,
|
|
1087
|
+
transform: 'rotate(0deg)',
|
|
1088
|
+
...(desktopNavIconStyle || {}),
|
|
1089
|
+
}}
|
|
1090
|
+
/>
|
|
1091
|
+
</div>
|
|
1092
|
+
</div>
|
|
1093
|
+
) : (
|
|
1094
|
+
<Icon
|
|
1095
|
+
name={item.icon}
|
|
1096
|
+
variant="24-outline"
|
|
1097
|
+
size={desktopNavIconGlyphSize}
|
|
1098
|
+
className={`${isCollapsed ? '' : 'mr-3'} ${
|
|
1099
|
+
activeItem === item.id ? 'color-white' : 'color-gray-700'
|
|
1100
|
+
}`}
|
|
1101
|
+
style={{
|
|
1102
|
+
width: `${desktopNavIconGlyphSize}px`,
|
|
1103
|
+
height: `${desktopNavIconGlyphSize}px`,
|
|
1104
|
+
opacity: 1,
|
|
1105
|
+
transform: 'rotate(0deg)',
|
|
1106
|
+
...(desktopNavIconStyle || {}),
|
|
1107
|
+
}}
|
|
1108
|
+
/>
|
|
1109
|
+
)}
|
|
1110
|
+
{!isCollapsed && (
|
|
1111
|
+
<Typography
|
|
1112
|
+
variant="body-lg"
|
|
1113
|
+
weight={activeItem === item.id ? desktopItemLabelWeightActive : desktopItemLabelWeightInactive}
|
|
1114
|
+
className={activeItem === item.id ? 'color-white' : 'color-gray-700'}
|
|
1115
|
+
style={{ fontSize: desktopItemLabelFontSize }}
|
|
1116
|
+
>
|
|
1117
|
+
{item.label}
|
|
1118
|
+
</Typography>
|
|
1119
|
+
)}
|
|
1120
|
+
{isCollapsed && ((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
|
|
1121
|
+
<span
|
|
1122
|
+
className={`flex items-center justify-center text-body-sm font-medium ${desktopCollapsedBadgeClassName}`}
|
|
1123
|
+
style={{
|
|
1124
|
+
backgroundColor: activeItem === item.id ? '#ffffff' : '#6D3856',
|
|
1125
|
+
color: activeItem === item.id ? '#6D3856' : '#ffffff',
|
|
1126
|
+
width: desktopCollapsedBadgeWidth,
|
|
1127
|
+
height: desktopCollapsedBadgeHeight,
|
|
1128
|
+
paddingTop: '4px',
|
|
1129
|
+
paddingRight: '6px',
|
|
1130
|
+
paddingBottom: '4px',
|
|
1131
|
+
paddingLeft: '6px',
|
|
1132
|
+
borderRadius: '16px',
|
|
1133
|
+
opacity: 1,
|
|
1134
|
+
transform: 'rotate(0deg)',
|
|
1135
|
+
marginLeft: desktopCollapsedOverlapEnabled
|
|
1136
|
+
? `${desktopCollapsedOverlapBadgeMarginLeftPx}px`
|
|
1137
|
+
: undefined,
|
|
1138
|
+
boxSizing: 'border-box',
|
|
1139
|
+
...(desktopCollapsedBadgeStyle || {}),
|
|
1140
|
+
}}
|
|
1141
|
+
>
|
|
1142
|
+
{item.id === 'empleados' ? 2 : (itemBadges[item.id] > 9 ? '9+' : itemBadges[item.id])}
|
|
1143
|
+
</span>
|
|
1144
|
+
)}
|
|
1145
|
+
</div>
|
|
1146
|
+
{!isCollapsed && ((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
|
|
800
1147
|
<span
|
|
801
1148
|
className="px-2 py-0.5 min-w-[20px] h-5
|
|
802
1149
|
rounded-full flex items-center justify-center
|
|
803
|
-
text-body-sm font-medium
|
|
804
|
-
style={{
|
|
1150
|
+
text-body-sm font-medium"
|
|
1151
|
+
style={{
|
|
805
1152
|
backgroundColor: activeItem === item.id ? '#ffffff' : '#6D3856',
|
|
806
1153
|
color: activeItem === item.id ? '#6D3856' : '#ffffff',
|
|
807
|
-
borderRadius: '12px'
|
|
808
|
-
top: '-4px',
|
|
809
|
-
right: '-4px',
|
|
810
|
-
zIndex: 10
|
|
1154
|
+
borderRadius: '12px'
|
|
811
1155
|
}}
|
|
812
1156
|
>
|
|
813
1157
|
{item.id === 'empleados' ? 2 : (itemBadges[item.id] > 9 ? '9+' : itemBadges[item.id])}
|
|
814
1158
|
</span>
|
|
815
1159
|
)}
|
|
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>
|
|
1160
|
+
</button>
|
|
1161
|
+
</div>
|
|
832
1162
|
</div>
|
|
833
1163
|
))}
|
|
834
1164
|
</div>
|
|
@@ -894,30 +1224,40 @@ export const SidebarCore = ({
|
|
|
894
1224
|
{effectiveFooterCollapsedContent && isCollapsed && (
|
|
895
1225
|
<div className="flex justify-center flex-shrink-0" style={{ zIndex: 10, paddingTop: '10px', paddingBottom: '10px' }}>
|
|
896
1226
|
<div
|
|
897
|
-
className=
|
|
1227
|
+
className={`bg-white flex items-center justify-center ${desktopCollapsedFooterContainerClassName}`}
|
|
898
1228
|
style={{
|
|
899
|
-
width: '
|
|
900
|
-
height: '
|
|
1229
|
+
width: '78px',
|
|
1230
|
+
height: '32px',
|
|
901
1231
|
borderRadius: '8px',
|
|
902
1232
|
border: '1px solid #29474C',
|
|
903
1233
|
paddingTop: '8px',
|
|
904
1234
|
paddingRight: '12px',
|
|
905
1235
|
paddingBottom: '8px',
|
|
906
|
-
paddingLeft: '12px'
|
|
1236
|
+
paddingLeft: '12px',
|
|
1237
|
+
gap: '10px',
|
|
1238
|
+
opacity: 1,
|
|
1239
|
+
transform: 'rotate(0deg)',
|
|
1240
|
+
boxSizing: 'border-box',
|
|
1241
|
+
...(desktopCollapsedFooterContainerStyle || {})
|
|
907
1242
|
}}
|
|
908
1243
|
>
|
|
909
1244
|
{typeof effectiveFooterCollapsedContent === 'string' ? (
|
|
910
1245
|
<span
|
|
1246
|
+
className={desktopCollapsedFooterTextClassName}
|
|
911
1247
|
style={{
|
|
912
|
-
color: '#
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
1248
|
+
color: '#223B40',
|
|
1249
|
+
fontFamily: 'IBM Plex Sans',
|
|
1250
|
+
fontWeight: 400,
|
|
1251
|
+
fontStyle: 'normal',
|
|
1252
|
+
fontSize: '12px',
|
|
1253
|
+
lineHeight: '100%',
|
|
1254
|
+
letterSpacing: '0%',
|
|
916
1255
|
textAlign: 'center',
|
|
917
1256
|
whiteSpace: 'nowrap',
|
|
918
1257
|
overflow: 'hidden',
|
|
919
1258
|
textOverflow: 'ellipsis',
|
|
920
|
-
maxWidth: '100%'
|
|
1259
|
+
maxWidth: '100%',
|
|
1260
|
+
...(desktopCollapsedFooterTextStyle || {})
|
|
921
1261
|
}}
|
|
922
1262
|
>
|
|
923
1263
|
{effectiveFooterCollapsedContent}
|
|
@@ -934,10 +1274,18 @@ export const SidebarCore = ({
|
|
|
934
1274
|
)}
|
|
935
1275
|
{effectiveFooterCollapsedContent.text && (
|
|
936
1276
|
<span
|
|
1277
|
+
className={desktopCollapsedFooterTextClassName}
|
|
937
1278
|
style={{
|
|
938
|
-
color: '#
|
|
1279
|
+
color: '#223B40',
|
|
1280
|
+
fontFamily: 'IBM Plex Sans',
|
|
1281
|
+
fontWeight: 400,
|
|
1282
|
+
fontStyle: 'normal',
|
|
939
1283
|
fontSize: '12px',
|
|
1284
|
+
lineHeight: '100%',
|
|
1285
|
+
letterSpacing: '0%',
|
|
1286
|
+
textAlign: 'center',
|
|
940
1287
|
marginLeft: effectiveFooterCollapsedContent.icon ? '4px' : '0'
|
|
1288
|
+
,...(desktopCollapsedFooterTextStyle || {})
|
|
941
1289
|
}}
|
|
942
1290
|
>
|
|
943
1291
|
{effectiveFooterCollapsedContent.text}
|