anima-ds-nucleus 1.0.14 → 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.
- package/dist/anima-ds.cjs.js +37 -41
- package/dist/anima-ds.esm.js +1019 -819
- package/package.json +1 -1
- package/src/components/Layout/Sidebar/SidebarCore.jsx +246 -50
package/package.json
CHANGED
|
@@ -481,11 +481,25 @@ export const SidebarCore = ({
|
|
|
481
481
|
// Desktop: íconos de navegación (items)
|
|
482
482
|
desktopExpandedIconSize = 24,
|
|
483
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,
|
|
484
493
|
desktopNavIconStyle,
|
|
485
494
|
// Desktop colapsado: wrapper de cada item (Inicio + opciones)
|
|
486
495
|
desktopCollapsedItemWrapperClassName = '',
|
|
487
496
|
desktopCollapsedItemWrapperStyle,
|
|
488
497
|
desktopCollapsedItemActiveBackgroundColor = '#2D5C63',
|
|
498
|
+
// Desktop colapsado: badge (globito) de notificaciones
|
|
499
|
+
desktopCollapsedBadgeClassName = '',
|
|
500
|
+
desktopCollapsedBadgeStyle,
|
|
501
|
+
desktopCollapsedBadgeWidth = '21px',
|
|
502
|
+
desktopCollapsedBadgeHeight = '20px',
|
|
489
503
|
// Desktop colapsado: ancho del sidebar
|
|
490
504
|
desktopCollapsedWidth = '118px',
|
|
491
505
|
// Desktop colapsado: footer
|
|
@@ -493,6 +507,15 @@ export const SidebarCore = ({
|
|
|
493
507
|
desktopCollapsedFooterContainerStyle,
|
|
494
508
|
desktopCollapsedFooterTextClassName = '',
|
|
495
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 = '',
|
|
496
519
|
nucleusName = 'Nucleus AR',
|
|
497
520
|
nucleusLogo,
|
|
498
521
|
onNucleusClick,
|
|
@@ -507,6 +530,7 @@ export const SidebarCore = ({
|
|
|
507
530
|
const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
|
|
508
531
|
const [isMobile, setIsMobile] = useState(false);
|
|
509
532
|
const desktopNavIconSize = isCollapsed ? desktopCollapsedIconSize : desktopExpandedIconSize;
|
|
533
|
+
const desktopNavIconGlyphSize = isCollapsed ? desktopCollapsedIconInnerSize : desktopExpandedIconSize;
|
|
510
534
|
const collapsedItemWrapperDefaults = {
|
|
511
535
|
width: '78px',
|
|
512
536
|
height: '48px',
|
|
@@ -742,7 +766,9 @@ export const SidebarCore = ({
|
|
|
742
766
|
<div className="flex-1 min-h-0 flex flex-col overflow-hidden">
|
|
743
767
|
<div className={`flex-1 overflow-y-auto ${isCollapsed ? 'py-2' : 'py-4'}`} style={{ overflowX: 'hidden' }}>
|
|
744
768
|
{/* Item "Inicio" destacado */}
|
|
745
|
-
<div
|
|
769
|
+
<div
|
|
770
|
+
className={`px-4 ${isCollapsed ? 'mb-0' : 'mb-4'} ${desktopCollapsedInicioContainerClassName}`}
|
|
771
|
+
>
|
|
746
772
|
<div
|
|
747
773
|
className={isCollapsed ? desktopCollapsedItemWrapperClassName : ''}
|
|
748
774
|
style={
|
|
@@ -778,22 +804,81 @@ export const SidebarCore = ({
|
|
|
778
804
|
: {}
|
|
779
805
|
}
|
|
780
806
|
>
|
|
781
|
-
<div
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
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
|
+
)}
|
|
797
882
|
{!isCollapsed && (
|
|
798
883
|
<Typography
|
|
799
884
|
variant="body-lg"
|
|
@@ -806,16 +891,24 @@ export const SidebarCore = ({
|
|
|
806
891
|
)}
|
|
807
892
|
{isCollapsed && itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
|
|
808
893
|
<span
|
|
809
|
-
className=
|
|
810
|
-
rounded-full flex items-center justify-center
|
|
811
|
-
text-body-sm font-medium absolute"
|
|
894
|
+
className={`flex items-center justify-center text-body-sm font-medium ${desktopCollapsedBadgeClassName}`}
|
|
812
895
|
style={{
|
|
813
896
|
backgroundColor: activeItem === 'inicio' ? '#ffffff' : '#6D3856',
|
|
814
897
|
color: activeItem === 'inicio' ? '#6D3856' : '#ffffff',
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
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 || {}),
|
|
819
912
|
}}
|
|
820
913
|
>
|
|
821
914
|
{itemBadges['inicio'] > 9 ? '9+' : itemBadges['inicio']}
|
|
@@ -842,11 +935,47 @@ export const SidebarCore = ({
|
|
|
842
935
|
|
|
843
936
|
{/* Secciones */}
|
|
844
937
|
{sections.map((section, sectionIndex) => (
|
|
845
|
-
<div
|
|
938
|
+
<div
|
|
939
|
+
key={sectionIndex}
|
|
940
|
+
className={`${isCollapsed ? 'mb-0' : 'mb-6'} ${desktopCollapsedSectionContainerClassName}`}
|
|
941
|
+
>
|
|
846
942
|
{/* Línea separadora cuando está colapsado - antes de cada sección */}
|
|
847
943
|
{isCollapsed && (
|
|
848
|
-
<div className=
|
|
849
|
-
<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>
|
|
850
979
|
</div>
|
|
851
980
|
)}
|
|
852
981
|
|
|
@@ -903,22 +1032,81 @@ export const SidebarCore = ({
|
|
|
903
1032
|
}
|
|
904
1033
|
title={isCollapsed ? item.label : ''}
|
|
905
1034
|
>
|
|
906
|
-
<div
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
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
|
+
)}
|
|
922
1110
|
{!isCollapsed && (
|
|
923
1111
|
<Typography
|
|
924
1112
|
variant="body-lg"
|
|
@@ -931,16 +1119,24 @@ export const SidebarCore = ({
|
|
|
931
1119
|
)}
|
|
932
1120
|
{isCollapsed && ((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
|
|
933
1121
|
<span
|
|
934
|
-
className=
|
|
935
|
-
rounded-full flex items-center justify-center
|
|
936
|
-
text-body-sm font-medium absolute"
|
|
1122
|
+
className={`flex items-center justify-center text-body-sm font-medium ${desktopCollapsedBadgeClassName}`}
|
|
937
1123
|
style={{
|
|
938
1124
|
backgroundColor: activeItem === item.id ? '#ffffff' : '#6D3856',
|
|
939
1125
|
color: activeItem === item.id ? '#6D3856' : '#ffffff',
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
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 || {}),
|
|
944
1140
|
}}
|
|
945
1141
|
>
|
|
946
1142
|
{item.id === 'empleados' ? 2 : (itemBadges[item.id] > 9 ? '9+' : itemBadges[item.id])}
|