anima-ds-nucleus 1.0.17 → 1.0.19
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-nucleus.css +1 -1
- package/dist/anima-ds.cjs.js +111 -95
- package/dist/anima-ds.esm.js +3812 -3025
- package/package.json +1 -1
- package/src/components/DataDisplay/Card/CardTituloCorto.jsx +23 -2
- package/src/components/DataDisplay/Card/CardTituloCortoMasEstado.jsx +23 -2
- package/src/components/DataDisplay/Card/CardTituloLargo.jsx +23 -2
- package/src/components/DataDisplay/Card/CardTituloLargoMasEstado.jsx +23 -2
- package/src/components/Inputs/PasswordInput/PasswordInput.jsx +85 -0
- package/src/components/Layout/Header/HeaderConBuscador.stories.jsx +1 -0
- package/src/components/Layout/Header/HeaderCore.jsx +12 -12
- package/src/components/Layout/Header/HeaderGeneral.jsx +28 -2
- package/src/components/Layout/Header/HeaderPoint.jsx +3 -3
- package/src/components/Layout/NavPoint/NavPoint.jsx +36 -21
- package/src/components/Layout/SaludoConFechaDashboard/SaludoConFechaDashboard.jsx +0 -1
- package/src/components/Layout/Sidebar/SidebarCore.jsx +227 -219
- package/src/components/Views/ForgotPassword/ForgotPassword.jsx +341 -0
- package/src/components/Views/ForgotPassword/ForgotPassword.stories.jsx +186 -0
- package/src/components/Views/LoginForm/LoginForm.jsx +332 -43
- package/src/components/Views/LoginForm/LoginForm.stories.jsx +182 -4
- package/src/i18n/config.js +12 -0
- package/src/index.js +1 -0
|
@@ -308,7 +308,7 @@ const SidebarCoreMobile = ({
|
|
|
308
308
|
</div>
|
|
309
309
|
|
|
310
310
|
{/* Items de la sección */}
|
|
311
|
-
<div
|
|
311
|
+
<div>
|
|
312
312
|
{section.items.map((item) => (
|
|
313
313
|
<div key={item.id} className="px-4">
|
|
314
314
|
<button
|
|
@@ -524,6 +524,7 @@ export const SidebarCore = ({
|
|
|
524
524
|
footerCollapsedContent, // Contenido a mostrar en el footer cuando está colapsado (puede ser string, ReactNode, o objeto con icon y text)
|
|
525
525
|
coreContainerStyle, // Estilos personalizados para el contenedor de LogoHexa y "Core" (solo mobile)
|
|
526
526
|
coreTextStyle, // Estilos personalizados para el texto "Core" (solo mobile)
|
|
527
|
+
fluidWidth = false, // Si es true, el root respeta el ancho del contenedor (grid/flex) en lugar de usar anchos fijos
|
|
527
528
|
className = '',
|
|
528
529
|
...props
|
|
529
530
|
}) => {
|
|
@@ -532,7 +533,7 @@ export const SidebarCore = ({
|
|
|
532
533
|
const desktopNavIconSize = isCollapsed ? desktopCollapsedIconSize : desktopExpandedIconSize;
|
|
533
534
|
const desktopNavIconGlyphSize = isCollapsed ? desktopCollapsedIconInnerSize : desktopExpandedIconSize;
|
|
534
535
|
const collapsedItemWrapperDefaults = {
|
|
535
|
-
width: '
|
|
536
|
+
width: '100%',
|
|
536
537
|
height: '48px',
|
|
537
538
|
paddingTop: '8px',
|
|
538
539
|
paddingRight: '12px',
|
|
@@ -609,15 +610,31 @@ export const SidebarCore = ({
|
|
|
609
610
|
);
|
|
610
611
|
}
|
|
611
612
|
|
|
613
|
+
// Determinar estilos del root según fluidWidth
|
|
614
|
+
const rootWidthStyles = fluidWidth
|
|
615
|
+
? {
|
|
616
|
+
width: '100%',
|
|
617
|
+
maxWidth: '100%',
|
|
618
|
+
minWidth: 0,
|
|
619
|
+
boxSizing: 'border-box',
|
|
620
|
+
}
|
|
621
|
+
: isCollapsed
|
|
622
|
+
? { width: desktopCollapsedWidth }
|
|
623
|
+
: {};
|
|
624
|
+
|
|
625
|
+
const rootClassName = fluidWidth
|
|
626
|
+
? `bg-white transition-all duration-300 ease-in-out h-full ${className}`
|
|
627
|
+
: `bg-white transition-all duration-300 ease-in-out h-full ${
|
|
628
|
+
isCollapsed ? '' : 'w-64'
|
|
629
|
+
} ${className}`;
|
|
630
|
+
|
|
612
631
|
return (
|
|
613
632
|
<aside
|
|
614
|
-
className={
|
|
615
|
-
isCollapsed ? '' : 'w-64'
|
|
616
|
-
} ${className}`}
|
|
633
|
+
className={rootClassName}
|
|
617
634
|
style={{
|
|
618
635
|
border: '1px solid #C4C4C4',
|
|
619
636
|
borderRadius: '16px',
|
|
620
|
-
...
|
|
637
|
+
...rootWidthStyles,
|
|
621
638
|
}}
|
|
622
639
|
{...props}
|
|
623
640
|
>
|
|
@@ -631,21 +648,21 @@ export const SidebarCore = ({
|
|
|
631
648
|
flex items-center justify-between hover:bg-gray-50 transition-colors ${desktopCompanyButtonClassName}`}
|
|
632
649
|
style={desktopCompanyButtonStyle}
|
|
633
650
|
>
|
|
634
|
-
<div className="flex items-center space-x-3">
|
|
651
|
+
<div className="flex items-center space-x-3 min-w-0 flex-1">
|
|
635
652
|
{/* Logo hexagonal */}
|
|
636
653
|
{companyLogo ? (
|
|
637
654
|
<img
|
|
638
655
|
src={companyLogo}
|
|
639
656
|
alt={companyName}
|
|
640
|
-
className="w-8 h-8 rounded"
|
|
657
|
+
className="w-8 h-8 rounded flex-shrink-0"
|
|
641
658
|
/>
|
|
642
659
|
) : (
|
|
643
|
-
<LogoHexa width={36} height={40} />
|
|
660
|
+
<LogoHexa width={36} height={40} className="flex-shrink-0" />
|
|
644
661
|
)}
|
|
645
662
|
{/* Nombre de la empresa */}
|
|
646
663
|
<Typography
|
|
647
664
|
variant="body-md"
|
|
648
|
-
className={desktopCompanyNameClassName}
|
|
665
|
+
className={`${desktopCompanyNameClassName} min-w-0`}
|
|
649
666
|
style={{
|
|
650
667
|
color: '#223B40',
|
|
651
668
|
fontFamily: 'IBM Plex Sans',
|
|
@@ -656,6 +673,9 @@ export const SidebarCore = ({
|
|
|
656
673
|
letterSpacing: '0px',
|
|
657
674
|
opacity: 1,
|
|
658
675
|
transform: 'rotate(0deg)',
|
|
676
|
+
overflow: 'hidden',
|
|
677
|
+
textOverflow: 'ellipsis',
|
|
678
|
+
whiteSpace: 'nowrap',
|
|
659
679
|
...(desktopCompanyNameStyle || {}),
|
|
660
680
|
}}
|
|
661
681
|
>
|
|
@@ -767,56 +787,36 @@ export const SidebarCore = ({
|
|
|
767
787
|
<div className={`flex-1 overflow-y-auto ${isCollapsed ? 'py-2' : 'py-4'}`} style={{ overflowX: 'hidden' }}>
|
|
768
788
|
{/* Item "Inicio" destacado */}
|
|
769
789
|
<div
|
|
770
|
-
className={
|
|
790
|
+
className={`${isCollapsed ? 'px-2' : 'px-4'} ${isCollapsed ? 'mb-0' : 'mb-4'} ${desktopCollapsedInicioContainerClassName}`}
|
|
771
791
|
>
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
}
|
|
782
|
-
: undefined
|
|
783
|
-
}
|
|
784
|
-
>
|
|
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
|
-
}
|
|
792
|
+
{isCollapsed ? (
|
|
793
|
+
<div
|
|
794
|
+
className={desktopCollapsedItemWrapperClassName}
|
|
795
|
+
style={{
|
|
796
|
+
...collapsedItemWrapperDefaults,
|
|
797
|
+
backgroundColor:
|
|
798
|
+
activeItem === 'inicio' ? desktopCollapsedItemActiveBackgroundColor : 'transparent',
|
|
799
|
+
...(desktopCollapsedItemWrapperStyle || {}),
|
|
800
|
+
}}
|
|
806
801
|
>
|
|
807
|
-
<
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
: {}
|
|
817
|
-
}
|
|
802
|
+
<button
|
|
803
|
+
onClick={() => onItemClick && onItemClick('inicio')}
|
|
804
|
+
className="flex items-center justify-center transition-all duration-200"
|
|
805
|
+
style={{
|
|
806
|
+
width: '100%',
|
|
807
|
+
height: '100%',
|
|
808
|
+
backgroundColor: 'transparent',
|
|
809
|
+
borderRadius: '8px',
|
|
810
|
+
}}
|
|
818
811
|
>
|
|
819
|
-
|
|
812
|
+
<div
|
|
813
|
+
className="flex items-center"
|
|
814
|
+
style={{
|
|
815
|
+
justifyContent: 'center',
|
|
816
|
+
columnGap: `${desktopCollapsedOverlapColumnGapPx}px`,
|
|
817
|
+
width: '100%',
|
|
818
|
+
}}
|
|
819
|
+
>
|
|
820
820
|
<div
|
|
821
821
|
style={{
|
|
822
822
|
width: `${desktopNavIconSize}px`,
|
|
@@ -862,60 +862,74 @@ export const SidebarCore = ({
|
|
|
862
862
|
/>
|
|
863
863
|
</div>
|
|
864
864
|
</div>
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
865
|
+
{itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
|
|
866
|
+
<span
|
|
867
|
+
className={`flex items-center justify-center text-body-sm font-medium ${desktopCollapsedBadgeClassName}`}
|
|
868
|
+
style={{
|
|
869
|
+
backgroundColor: activeItem === 'inicio' ? '#ffffff' : '#6D3856',
|
|
870
|
+
color: activeItem === 'inicio' ? '#6D3856' : '#ffffff',
|
|
871
|
+
width: desktopCollapsedBadgeWidth,
|
|
872
|
+
height: desktopCollapsedBadgeHeight,
|
|
873
|
+
paddingTop: '4px',
|
|
874
|
+
paddingRight: '6px',
|
|
875
|
+
paddingBottom: '4px',
|
|
876
|
+
paddingLeft: '6px',
|
|
877
|
+
borderRadius: '16px',
|
|
878
|
+
opacity: 1,
|
|
879
|
+
transform: 'rotate(0deg)',
|
|
880
|
+
marginLeft: desktopCollapsedOverlapEnabled
|
|
881
|
+
? `${desktopCollapsedOverlapBadgeMarginLeftPx}px`
|
|
882
|
+
: undefined,
|
|
883
|
+
boxSizing: 'border-box',
|
|
884
|
+
...(desktopCollapsedBadgeStyle || {}),
|
|
885
|
+
}}
|
|
886
|
+
>
|
|
887
|
+
{itemBadges['inicio'] > 9 ? '9+' : itemBadges['inicio']}
|
|
888
|
+
</span>
|
|
889
|
+
)}
|
|
890
|
+
</div>
|
|
891
|
+
</button>
|
|
892
|
+
</div>
|
|
893
|
+
) : (
|
|
894
|
+
<button
|
|
895
|
+
onClick={() => onItemClick && onItemClick('inicio')}
|
|
896
|
+
className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
|
|
897
|
+
activeItem === 'inicio'
|
|
898
|
+
? ''
|
|
899
|
+
: 'color-gray-700 hover:bg-gray-100'
|
|
900
|
+
}`}
|
|
901
|
+
style={
|
|
902
|
+
activeItem === 'inicio'
|
|
903
|
+
? { backgroundColor: '#2D5C63' }
|
|
904
|
+
: {}
|
|
905
|
+
}
|
|
906
|
+
>
|
|
907
|
+
<div className="flex items-center">
|
|
908
|
+
<Icon
|
|
909
|
+
name="HomeIcon"
|
|
910
|
+
variant="24-outline"
|
|
911
|
+
size={desktopNavIconGlyphSize}
|
|
912
|
+
className={`mr-3 ${
|
|
913
|
+
activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
|
|
914
|
+
}`}
|
|
915
|
+
/>
|
|
916
|
+
<Typography
|
|
917
|
+
variant="body-lg"
|
|
918
|
+
weight={activeItem === 'inicio' ? desktopItemLabelWeightActive : desktopItemLabelWeightInactive}
|
|
919
|
+
className={`${
|
|
920
|
+
activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
|
|
921
|
+
} min-w-0`}
|
|
922
|
+
style={{
|
|
923
|
+
fontSize: desktopItemLabelFontSize,
|
|
924
|
+
overflow: 'hidden',
|
|
925
|
+
textOverflow: 'ellipsis',
|
|
926
|
+
whiteSpace: 'nowrap',
|
|
927
|
+
}}
|
|
928
|
+
>
|
|
929
|
+
Inicio
|
|
930
|
+
</Typography>
|
|
917
931
|
</div>
|
|
918
|
-
{
|
|
932
|
+
{itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
|
|
919
933
|
<span
|
|
920
934
|
className="px-2 py-0.5 min-w-[20px] h-5
|
|
921
935
|
rounded-full flex items-center justify-center
|
|
@@ -930,7 +944,7 @@ export const SidebarCore = ({
|
|
|
930
944
|
</span>
|
|
931
945
|
)}
|
|
932
946
|
</button>
|
|
933
|
-
|
|
947
|
+
)}
|
|
934
948
|
</div>
|
|
935
949
|
|
|
936
950
|
{/* Secciones */}
|
|
@@ -941,11 +955,11 @@ export const SidebarCore = ({
|
|
|
941
955
|
>
|
|
942
956
|
{/* Línea separadora cuando está colapsado - antes de cada sección */}
|
|
943
957
|
{isCollapsed && (
|
|
944
|
-
<div className={`px-
|
|
958
|
+
<div className={`px-2 mb-0 ${desktopCollapsedSeparatorContainerClassName}`}>
|
|
945
959
|
<div
|
|
946
960
|
className={desktopCollapsedSectionSeparatorWrapperClassName}
|
|
947
961
|
style={{
|
|
948
|
-
width: '
|
|
962
|
+
width: '100%',
|
|
949
963
|
height: '32px',
|
|
950
964
|
paddingTop: '16px',
|
|
951
965
|
paddingRight: '8px',
|
|
@@ -992,59 +1006,39 @@ export const SidebarCore = ({
|
|
|
992
1006
|
)}
|
|
993
1007
|
|
|
994
1008
|
{/* Items de la sección */}
|
|
995
|
-
<div
|
|
1009
|
+
<div>
|
|
996
1010
|
{section.items.map((item) => (
|
|
997
|
-
<div key={item.id} className=
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
: undefined
|
|
1009
|
-
}
|
|
1010
|
-
title={isCollapsed ? item.label : ''}
|
|
1011
|
-
>
|
|
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 : ''}
|
|
1011
|
+
<div key={item.id} className={isCollapsed ? 'px-2' : 'px-4'}>
|
|
1012
|
+
{isCollapsed ? (
|
|
1013
|
+
<div
|
|
1014
|
+
className={desktopCollapsedItemWrapperClassName}
|
|
1015
|
+
style={{
|
|
1016
|
+
...collapsedItemWrapperDefaults,
|
|
1017
|
+
backgroundColor:
|
|
1018
|
+
activeItem === item.id ? desktopCollapsedItemActiveBackgroundColor : 'transparent',
|
|
1019
|
+
...(desktopCollapsedItemWrapperStyle || {}),
|
|
1020
|
+
}}
|
|
1021
|
+
title={item.label}
|
|
1034
1022
|
>
|
|
1035
|
-
<
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
}
|
|
1023
|
+
<button
|
|
1024
|
+
onClick={() => onItemClick && onItemClick(item.id)}
|
|
1025
|
+
className="flex items-center justify-center transition-all duration-200"
|
|
1026
|
+
style={{
|
|
1027
|
+
width: '100%',
|
|
1028
|
+
height: '100%',
|
|
1029
|
+
backgroundColor: 'transparent',
|
|
1030
|
+
borderRadius: '8px',
|
|
1031
|
+
}}
|
|
1032
|
+
title={item.label}
|
|
1046
1033
|
>
|
|
1047
|
-
|
|
1034
|
+
<div
|
|
1035
|
+
className="flex items-center"
|
|
1036
|
+
style={{
|
|
1037
|
+
justifyContent: 'center',
|
|
1038
|
+
columnGap: `${desktopCollapsedOverlapColumnGapPx}px`,
|
|
1039
|
+
width: '100%',
|
|
1040
|
+
}}
|
|
1041
|
+
>
|
|
1048
1042
|
<div
|
|
1049
1043
|
style={{
|
|
1050
1044
|
width: `${desktopNavIconSize}px`,
|
|
@@ -1090,60 +1084,74 @@ export const SidebarCore = ({
|
|
|
1090
1084
|
/>
|
|
1091
1085
|
</div>
|
|
1092
1086
|
</div>
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1087
|
+
{((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
|
|
1088
|
+
<span
|
|
1089
|
+
className={`flex items-center justify-center text-body-sm font-medium ${desktopCollapsedBadgeClassName}`}
|
|
1090
|
+
style={{
|
|
1091
|
+
backgroundColor: activeItem === item.id ? '#ffffff' : '#6D3856',
|
|
1092
|
+
color: activeItem === item.id ? '#6D3856' : '#ffffff',
|
|
1093
|
+
width: desktopCollapsedBadgeWidth,
|
|
1094
|
+
height: desktopCollapsedBadgeHeight,
|
|
1095
|
+
paddingTop: '4px',
|
|
1096
|
+
paddingRight: '6px',
|
|
1097
|
+
paddingBottom: '4px',
|
|
1098
|
+
paddingLeft: '6px',
|
|
1099
|
+
borderRadius: '16px',
|
|
1100
|
+
opacity: 1,
|
|
1101
|
+
transform: 'rotate(0deg)',
|
|
1102
|
+
marginLeft: desktopCollapsedOverlapEnabled
|
|
1103
|
+
? `${desktopCollapsedOverlapBadgeMarginLeftPx}px`
|
|
1104
|
+
: undefined,
|
|
1105
|
+
boxSizing: 'border-box',
|
|
1106
|
+
...(desktopCollapsedBadgeStyle || {}),
|
|
1107
|
+
}}
|
|
1108
|
+
>
|
|
1109
|
+
{item.id === 'empleados' ? 2 : (itemBadges[item.id] > 9 ? '9+' : itemBadges[item.id])}
|
|
1110
|
+
</span>
|
|
1111
|
+
)}
|
|
1112
|
+
</div>
|
|
1113
|
+
</button>
|
|
1114
|
+
</div>
|
|
1115
|
+
) : (
|
|
1116
|
+
<button
|
|
1117
|
+
onClick={() => onItemClick && onItemClick(item.id)}
|
|
1118
|
+
className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
|
|
1119
|
+
activeItem === item.id
|
|
1120
|
+
? ''
|
|
1121
|
+
: 'color-gray-700 hover:bg-gray-100'
|
|
1122
|
+
}`}
|
|
1123
|
+
style={
|
|
1124
|
+
activeItem === item.id
|
|
1125
|
+
? { backgroundColor: '#2D5C63' }
|
|
1126
|
+
: {}
|
|
1127
|
+
}
|
|
1128
|
+
>
|
|
1129
|
+
<div className="flex items-center">
|
|
1130
|
+
<Icon
|
|
1131
|
+
name={item.icon}
|
|
1132
|
+
variant="24-outline"
|
|
1133
|
+
size={desktopNavIconGlyphSize}
|
|
1134
|
+
className={`mr-3 ${
|
|
1135
|
+
activeItem === item.id ? 'color-white' : 'color-gray-700'
|
|
1136
|
+
}`}
|
|
1137
|
+
/>
|
|
1138
|
+
<Typography
|
|
1139
|
+
variant="body-lg"
|
|
1140
|
+
weight={activeItem === item.id ? desktopItemLabelWeightActive : desktopItemLabelWeightInactive}
|
|
1141
|
+
className={`${
|
|
1142
|
+
activeItem === item.id ? 'color-white' : 'color-gray-700'
|
|
1143
|
+
} min-w-0`}
|
|
1144
|
+
style={{
|
|
1145
|
+
fontSize: desktopItemLabelFontSize,
|
|
1146
|
+
overflow: 'hidden',
|
|
1147
|
+
textOverflow: 'ellipsis',
|
|
1148
|
+
whiteSpace: 'nowrap',
|
|
1149
|
+
}}
|
|
1150
|
+
>
|
|
1151
|
+
{item.label}
|
|
1152
|
+
</Typography>
|
|
1145
1153
|
</div>
|
|
1146
|
-
{
|
|
1154
|
+
{((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
|
|
1147
1155
|
<span
|
|
1148
1156
|
className="px-2 py-0.5 min-w-[20px] h-5
|
|
1149
1157
|
rounded-full flex items-center justify-center
|
|
@@ -1158,7 +1166,7 @@ export const SidebarCore = ({
|
|
|
1158
1166
|
</span>
|
|
1159
1167
|
)}
|
|
1160
1168
|
</button>
|
|
1161
|
-
|
|
1169
|
+
)}
|
|
1162
1170
|
</div>
|
|
1163
1171
|
))}
|
|
1164
1172
|
</div>
|
|
@@ -1222,11 +1230,11 @@ export const SidebarCore = ({
|
|
|
1222
1230
|
|
|
1223
1231
|
{/* Footer cuando está colapsado */}
|
|
1224
1232
|
{effectiveFooterCollapsedContent && isCollapsed && (
|
|
1225
|
-
<div className="flex justify-center flex-shrink-0" style={{ zIndex: 10
|
|
1233
|
+
<div className="px-2 pt-2 pb-2 flex justify-center flex-shrink-0" style={{ zIndex: 10 }}>
|
|
1226
1234
|
<div
|
|
1227
1235
|
className={`bg-white flex items-center justify-center ${desktopCollapsedFooterContainerClassName}`}
|
|
1228
1236
|
style={{
|
|
1229
|
-
width: '
|
|
1237
|
+
width: '100%',
|
|
1230
1238
|
height: '32px',
|
|
1231
1239
|
borderRadius: '8px',
|
|
1232
1240
|
border: '1px solid #29474C',
|