gov-layout 1.2.4 → 1.2.6
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/README.md +8 -0
- package/dist/index.d.mts +12 -4
- package/dist/index.d.ts +12 -4
- package/dist/index.js +400 -202
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +400 -202
- package/dist/index.mjs.map +1 -1
- package/package.json +43 -43
package/dist/index.js
CHANGED
|
@@ -61,7 +61,7 @@ function SidebarHeader({ orgLogo, orgName, orgSubtitle, collapsed }) {
|
|
|
61
61
|
fontWeight: 700,
|
|
62
62
|
fontSize: "16px",
|
|
63
63
|
lineHeight: "22px",
|
|
64
|
-
color: "var(--
|
|
64
|
+
color: "var(--color-alias-color-brand-text-dark, #05010e)",
|
|
65
65
|
margin: 0,
|
|
66
66
|
overflow: "hidden",
|
|
67
67
|
textOverflow: "ellipsis",
|
|
@@ -588,11 +588,31 @@ function LogoutIcon() {
|
|
|
588
588
|
}
|
|
589
589
|
);
|
|
590
590
|
}
|
|
591
|
+
function ProfileIcon() {
|
|
592
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
593
|
+
"svg",
|
|
594
|
+
{
|
|
595
|
+
width: "18",
|
|
596
|
+
height: "18",
|
|
597
|
+
viewBox: "0 0 24 24",
|
|
598
|
+
fill: "none",
|
|
599
|
+
stroke: "currentColor",
|
|
600
|
+
strokeWidth: "2",
|
|
601
|
+
strokeLinecap: "round",
|
|
602
|
+
strokeLinejoin: "round",
|
|
603
|
+
children: [
|
|
604
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
|
|
605
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4" })
|
|
606
|
+
]
|
|
607
|
+
}
|
|
608
|
+
);
|
|
609
|
+
}
|
|
591
610
|
function SidebarUserProfile({
|
|
592
611
|
user,
|
|
593
612
|
roleLabel,
|
|
594
613
|
onLogout,
|
|
595
|
-
collapsed
|
|
614
|
+
collapsed,
|
|
615
|
+
onProfile
|
|
596
616
|
}) {
|
|
597
617
|
if (!user) return null;
|
|
598
618
|
const getFullName = () => {
|
|
@@ -613,36 +633,69 @@ function SidebarUserProfile({
|
|
|
613
633
|
alignItems: "center",
|
|
614
634
|
gap: "12px"
|
|
615
635
|
}, children: [
|
|
616
|
-
|
|
617
|
-
"
|
|
636
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
637
|
+
"div",
|
|
618
638
|
{
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
639
|
+
onClick: onProfile,
|
|
640
|
+
title: onProfile ? "\u0E14\u0E39\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C" : getFullName(),
|
|
641
|
+
style: { cursor: onProfile ? "pointer" : "default" },
|
|
642
|
+
children: user.pictureUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
643
|
+
"img",
|
|
644
|
+
{
|
|
645
|
+
src: user.pictureUrl,
|
|
646
|
+
alt: getFullName(),
|
|
647
|
+
style: {
|
|
648
|
+
width: "36px",
|
|
649
|
+
height: "36px",
|
|
650
|
+
borderRadius: "50%",
|
|
651
|
+
objectFit: "cover"
|
|
652
|
+
}
|
|
653
|
+
}
|
|
654
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
655
|
+
"div",
|
|
656
|
+
{
|
|
657
|
+
style: {
|
|
658
|
+
width: "36px",
|
|
659
|
+
height: "36px",
|
|
660
|
+
borderRadius: "50%",
|
|
661
|
+
background: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
662
|
+
display: "flex",
|
|
663
|
+
alignItems: "center",
|
|
664
|
+
justifyContent: "center",
|
|
665
|
+
color: "#fff",
|
|
666
|
+
fontWeight: 700,
|
|
667
|
+
fontSize: "14px"
|
|
668
|
+
},
|
|
669
|
+
children: getInitial()
|
|
670
|
+
}
|
|
671
|
+
)
|
|
628
672
|
}
|
|
629
|
-
)
|
|
630
|
-
|
|
673
|
+
),
|
|
674
|
+
onProfile && /* @__PURE__ */ jsxRuntime.jsx(
|
|
675
|
+
"button",
|
|
631
676
|
{
|
|
632
|
-
|
|
677
|
+
onClick: onProfile,
|
|
678
|
+
title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
|
|
679
|
+
onMouseEnter: (e) => {
|
|
680
|
+
e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
|
|
681
|
+
},
|
|
682
|
+
onMouseLeave: (e) => {
|
|
683
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
684
|
+
},
|
|
633
685
|
style: {
|
|
634
686
|
width: "36px",
|
|
635
687
|
height: "36px",
|
|
636
|
-
borderRadius: "
|
|
637
|
-
|
|
688
|
+
borderRadius: "8px",
|
|
689
|
+
border: "none",
|
|
690
|
+
background: "transparent",
|
|
691
|
+
color: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
692
|
+
cursor: "pointer",
|
|
638
693
|
display: "flex",
|
|
639
694
|
alignItems: "center",
|
|
640
695
|
justifyContent: "center",
|
|
641
|
-
|
|
642
|
-
fontWeight: 700,
|
|
643
|
-
fontSize: "14px"
|
|
696
|
+
transition: "background-color 0.15s ease"
|
|
644
697
|
},
|
|
645
|
-
children:
|
|
698
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ProfileIcon, {})
|
|
646
699
|
}
|
|
647
700
|
),
|
|
648
701
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -685,56 +738,107 @@ function SidebarUserProfile({
|
|
|
685
738
|
gap: "12px"
|
|
686
739
|
},
|
|
687
740
|
children: [
|
|
688
|
-
|
|
689
|
-
"
|
|
741
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
742
|
+
"div",
|
|
690
743
|
{
|
|
691
|
-
|
|
692
|
-
|
|
744
|
+
onClick: onProfile,
|
|
745
|
+
onMouseEnter: (e) => {
|
|
746
|
+
if (onProfile) e.currentTarget.style.opacity = "0.8";
|
|
747
|
+
},
|
|
748
|
+
onMouseLeave: (e) => {
|
|
749
|
+
if (onProfile) e.currentTarget.style.opacity = "1";
|
|
750
|
+
},
|
|
693
751
|
style: {
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
752
|
+
display: "flex",
|
|
753
|
+
alignItems: "center",
|
|
754
|
+
gap: "12px",
|
|
755
|
+
flex: 1,
|
|
756
|
+
minWidth: 0,
|
|
757
|
+
cursor: onProfile ? "pointer" : "default",
|
|
758
|
+
transition: "opacity 0.15s ease"
|
|
759
|
+
},
|
|
760
|
+
children: [
|
|
761
|
+
user.pictureUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
762
|
+
"img",
|
|
763
|
+
{
|
|
764
|
+
src: user.pictureUrl,
|
|
765
|
+
alt: getFullName(),
|
|
766
|
+
style: {
|
|
767
|
+
width: "40px",
|
|
768
|
+
height: "40px",
|
|
769
|
+
borderRadius: "50%",
|
|
770
|
+
objectFit: "cover",
|
|
771
|
+
flexShrink: 0
|
|
772
|
+
}
|
|
773
|
+
}
|
|
774
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
775
|
+
"div",
|
|
776
|
+
{
|
|
777
|
+
style: {
|
|
778
|
+
width: "40px",
|
|
779
|
+
height: "40px",
|
|
780
|
+
borderRadius: "50%",
|
|
781
|
+
background: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
782
|
+
display: "flex",
|
|
783
|
+
alignItems: "center",
|
|
784
|
+
justifyContent: "center",
|
|
785
|
+
color: "#fff",
|
|
786
|
+
fontWeight: 700,
|
|
787
|
+
fontSize: "16px",
|
|
788
|
+
flexShrink: 0
|
|
789
|
+
},
|
|
790
|
+
children: getInitial()
|
|
791
|
+
}
|
|
792
|
+
),
|
|
793
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
794
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: {
|
|
795
|
+
fontWeight: 600,
|
|
796
|
+
fontSize: "14px",
|
|
797
|
+
lineHeight: "20px",
|
|
798
|
+
color: "var(--color-alias-text-colors-primary, #060d26)",
|
|
799
|
+
margin: 0,
|
|
800
|
+
overflow: "hidden",
|
|
801
|
+
textOverflow: "ellipsis",
|
|
802
|
+
whiteSpace: "nowrap"
|
|
803
|
+
}, children: getFullName() }),
|
|
804
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: {
|
|
805
|
+
fontSize: "12px",
|
|
806
|
+
lineHeight: "16px",
|
|
807
|
+
color: "var(--color-alias-text-colors-tertiary, #475272)",
|
|
808
|
+
margin: 0
|
|
809
|
+
}, children: roleLabel })
|
|
810
|
+
] })
|
|
811
|
+
]
|
|
700
812
|
}
|
|
701
|
-
)
|
|
702
|
-
|
|
813
|
+
),
|
|
814
|
+
onProfile && /* @__PURE__ */ jsxRuntime.jsx(
|
|
815
|
+
"button",
|
|
703
816
|
{
|
|
817
|
+
onClick: onProfile,
|
|
818
|
+
title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
|
|
819
|
+
onMouseEnter: (e) => {
|
|
820
|
+
e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
|
|
821
|
+
},
|
|
822
|
+
onMouseLeave: (e) => {
|
|
823
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
824
|
+
},
|
|
704
825
|
style: {
|
|
705
|
-
width: "
|
|
706
|
-
height: "
|
|
707
|
-
borderRadius: "
|
|
708
|
-
|
|
826
|
+
width: "36px",
|
|
827
|
+
height: "36px",
|
|
828
|
+
borderRadius: "8px",
|
|
829
|
+
border: "none",
|
|
830
|
+
background: "transparent",
|
|
831
|
+
color: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
832
|
+
cursor: "pointer",
|
|
709
833
|
display: "flex",
|
|
710
834
|
alignItems: "center",
|
|
711
835
|
justifyContent: "center",
|
|
712
|
-
|
|
713
|
-
fontWeight: 700,
|
|
714
|
-
fontSize: "16px",
|
|
836
|
+
transition: "background-color 0.15s ease",
|
|
715
837
|
flexShrink: 0
|
|
716
838
|
},
|
|
717
|
-
children:
|
|
839
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ProfileIcon, {})
|
|
718
840
|
}
|
|
719
841
|
),
|
|
720
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
721
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: {
|
|
722
|
-
fontWeight: 600,
|
|
723
|
-
fontSize: "14px",
|
|
724
|
-
lineHeight: "20px",
|
|
725
|
-
color: "var(--color-alias-text-colors-primary, #060d26)",
|
|
726
|
-
margin: 0,
|
|
727
|
-
overflow: "hidden",
|
|
728
|
-
textOverflow: "ellipsis",
|
|
729
|
-
whiteSpace: "nowrap"
|
|
730
|
-
}, children: getFullName() }),
|
|
731
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: {
|
|
732
|
-
fontSize: "12px",
|
|
733
|
-
lineHeight: "16px",
|
|
734
|
-
color: "var(--color-alias-text-colors-tertiary, #475272)",
|
|
735
|
-
margin: 0
|
|
736
|
-
}, children: roleLabel })
|
|
737
|
-
] }),
|
|
738
842
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
739
843
|
"button",
|
|
740
844
|
{
|
|
@@ -816,6 +920,7 @@ function StaffSidebar({
|
|
|
816
920
|
roleLabel,
|
|
817
921
|
onNavigate,
|
|
818
922
|
onLogout,
|
|
923
|
+
onProfile,
|
|
819
924
|
currentPath,
|
|
820
925
|
width = "280px",
|
|
821
926
|
className,
|
|
@@ -859,7 +964,7 @@ function StaffSidebar({
|
|
|
859
964
|
left: 0,
|
|
860
965
|
height: "100vh",
|
|
861
966
|
width: currentWidth,
|
|
862
|
-
background: "
|
|
967
|
+
background: "#fff",
|
|
863
968
|
borderRight: "1px solid var(--color-border-colors-neutral, #c8cedd)",
|
|
864
969
|
display: "flex",
|
|
865
970
|
flexDirection: "column",
|
|
@@ -911,6 +1016,7 @@ function StaffSidebar({
|
|
|
911
1016
|
user,
|
|
912
1017
|
roleLabel,
|
|
913
1018
|
onLogout,
|
|
1019
|
+
onProfile,
|
|
914
1020
|
collapsed
|
|
915
1021
|
}
|
|
916
1022
|
)
|
|
@@ -927,7 +1033,7 @@ function StaffSidebar({
|
|
|
927
1033
|
e.currentTarget.style.backgroundColor = "#f3f4f6";
|
|
928
1034
|
},
|
|
929
1035
|
onMouseLeave: (e) => {
|
|
930
|
-
e.currentTarget.style.backgroundColor = "";
|
|
1036
|
+
e.currentTarget.style.backgroundColor = "#fff";
|
|
931
1037
|
},
|
|
932
1038
|
style: {
|
|
933
1039
|
position: "fixed",
|
|
@@ -939,7 +1045,7 @@ function StaffSidebar({
|
|
|
939
1045
|
borderRadius: "0 6px 6px 0",
|
|
940
1046
|
border: "1px solid var(--color-border-colors-neutral, #c8cedd)",
|
|
941
1047
|
borderLeft: "none",
|
|
942
|
-
background: "
|
|
1048
|
+
background: "#fff",
|
|
943
1049
|
cursor: "pointer",
|
|
944
1050
|
display: "flex",
|
|
945
1051
|
alignItems: "center",
|
|
@@ -958,7 +1064,7 @@ function BellIcon2() {
|
|
|
958
1064
|
"path",
|
|
959
1065
|
{
|
|
960
1066
|
d: "M21.2321 13.4463L19.3618 6.71712C18.8136 4.74574 17.6222 3.01418 15.9769 1.79767C14.3316 0.581165 12.3269 -0.0504751 10.2814 0.00315377C8.23593 0.0567826 6.26708 0.792603 4.6878 2.09365C3.10852 3.3947 2.00945 5.18632 1.5653 7.18371L0.11728 13.6954C-0.0426654 14.4149 -0.0389674 15.1611 0.128101 15.879C0.29517 16.5969 0.621344 17.2681 1.08254 17.8431C1.54374 18.418 2.12818 18.8821 2.79272 19.2009C3.45727 19.5198 4.18494 19.6853 4.92202 19.6853H6.01861C6.24454 20.7979 6.84817 21.7982 7.72723 22.5167C8.60629 23.2352 9.70671 23.6277 10.842 23.6277C11.9774 23.6277 13.0778 23.2352 13.9569 22.5167C14.8359 21.7982 15.4396 20.7979 15.6655 19.6853H16.4904C17.2492 19.6853 17.9977 19.5099 18.6774 19.1728C19.3572 18.8357 19.9498 18.346 20.409 17.742C20.8682 17.1379 21.1815 16.4359 21.3245 15.6907C21.4674 14.9455 21.4352 14.1774 21.2321 13.4463ZM10.842 21.654C10.2334 21.6515 9.64049 21.461 9.1443 21.1086C8.6481 20.7562 8.27291 20.2591 8.07005 19.6853H13.614C13.4112 20.2591 13.036 20.7562 12.5398 21.1086C12.0436 21.461 11.4506 21.6515 10.842 21.654ZM18.8411 16.55C18.5668 16.9139 18.2114 17.2088 17.8032 17.4113C17.3949 17.6138 16.9451 17.7183 16.4894 17.7165H4.92202C4.47982 17.7164 4.04328 17.6171 3.64463 17.4257C3.24598 17.2344 2.89539 16.9559 2.61874 16.611C2.34208 16.266 2.14643 15.8633 2.04622 15.4326C1.94602 15.0019 1.94381 14.5542 2.03977 14.1226L3.4868 7.60994C3.83561 6.04105 4.69886 4.63379 5.93932 3.61186C7.17978 2.58992 8.72625 2.01197 10.3329 1.96988C11.9395 1.92779 13.5142 2.42398 14.8064 3.37956C16.0987 4.33515 17.0344 5.69528 17.4649 7.24376L19.3352 13.9729C19.4588 14.4114 19.4785 14.8725 19.3927 15.3199C19.3069 15.7672 19.1181 16.1884 18.8411 16.55Z",
|
|
961
|
-
fill: "var(--
|
|
1067
|
+
fill: "var(--color-alias-color-brand-text-dark, #05010e)"
|
|
962
1068
|
}
|
|
963
1069
|
) });
|
|
964
1070
|
}
|
|
@@ -967,7 +1073,7 @@ function HamburgerIcon() {
|
|
|
967
1073
|
"path",
|
|
968
1074
|
{
|
|
969
1075
|
d: "M1.1875 17.8426C0.851042 17.8426 0.569077 17.7287 0.341604 17.501C0.113868 17.2735 0 16.9914 0 16.6547C0 16.3182 0.113868 16.0363 0.341604 15.8088C0.569077 15.5816 0.851042 15.468 1.1875 15.468H25.7292C26.0656 15.468 26.3476 15.5817 26.5751 15.8092C26.8028 16.0369 26.9167 16.3192 26.9167 16.6559C26.9167 16.9923 26.8028 17.2743 26.5751 17.5018C26.3476 17.729 26.0656 17.8426 25.7292 17.8426H1.1875ZM1.1875 10.1088C0.851042 10.1088 0.569077 9.99492 0.341604 9.76719C0.113868 9.53945 0 9.25735 0 8.9209C0 8.58417 0.113868 8.30221 0.341604 8.075C0.569077 7.84753 0.851042 7.73379 1.1875 7.73379H25.7292C26.0656 7.73379 26.3476 7.84766 26.5751 8.0754C26.8028 8.30313 26.9167 8.58523 26.9167 8.92169C26.9167 9.25841 26.8028 9.54037 26.5751 9.76758C26.3476 9.99506 26.0656 10.1088 25.7292 10.1088H1.1875ZM1.1875 2.3746C0.851042 2.3746 0.569077 2.26087 0.341604 2.0334C0.113868 1.80566 0 1.52343 0 1.18671C0 0.850249 0.113868 0.568284 0.341604 0.340812C0.569077 0.113604 0.851042 0 1.1875 0H25.7292C26.0656 0 26.3476 0.113868 26.5751 0.341604C26.8028 0.569077 26.9167 0.851174 26.9167 1.1879C26.9167 1.52435 26.8028 1.80632 26.5751 2.03379C26.3476 2.261 26.0656 2.3746 25.7292 2.3746H1.1875Z",
|
|
970
|
-
fill: "var(--
|
|
1076
|
+
fill: "var(--color-alias-color-brand-text-dark, #05010e)"
|
|
971
1077
|
}
|
|
972
1078
|
) });
|
|
973
1079
|
}
|
|
@@ -998,6 +1104,7 @@ function UserHeader({
|
|
|
998
1104
|
notificationBell,
|
|
999
1105
|
onMarkAllRead,
|
|
1000
1106
|
onViewAll,
|
|
1107
|
+
onProfile,
|
|
1001
1108
|
className
|
|
1002
1109
|
}) {
|
|
1003
1110
|
const displayName = `${user?.firstName || ""} ${user?.lastName || ""}`.trim() || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
|
|
@@ -1019,7 +1126,7 @@ function UserHeader({
|
|
|
1019
1126
|
{
|
|
1020
1127
|
className,
|
|
1021
1128
|
style: {
|
|
1022
|
-
background: "
|
|
1129
|
+
background: "#fff",
|
|
1023
1130
|
boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
|
|
1024
1131
|
position: "sticky",
|
|
1025
1132
|
top: 0,
|
|
@@ -1035,67 +1142,88 @@ function UserHeader({
|
|
|
1035
1142
|
padding: "14px 20px"
|
|
1036
1143
|
},
|
|
1037
1144
|
children: [
|
|
1038
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
display: "flex",
|
|
1061
|
-
alignItems: "center",
|
|
1062
|
-
justifyContent: "center",
|
|
1063
|
-
boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
|
|
1064
|
-
},
|
|
1065
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1066
|
-
"span",
|
|
1145
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1146
|
+
"div",
|
|
1147
|
+
{
|
|
1148
|
+
onClick: onProfile,
|
|
1149
|
+
onMouseEnter: (e) => {
|
|
1150
|
+
if (onProfile) e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
|
|
1151
|
+
},
|
|
1152
|
+
onMouseLeave: (e) => {
|
|
1153
|
+
if (onProfile) e.currentTarget.style.backgroundColor = "transparent";
|
|
1154
|
+
},
|
|
1155
|
+
style: {
|
|
1156
|
+
display: "flex",
|
|
1157
|
+
alignItems: "center",
|
|
1158
|
+
gap: "12px",
|
|
1159
|
+
cursor: onProfile ? "pointer" : "default",
|
|
1160
|
+
padding: "4px 8px",
|
|
1161
|
+
borderRadius: "10px",
|
|
1162
|
+
transition: "background-color 0.15s ease"
|
|
1163
|
+
},
|
|
1164
|
+
children: [
|
|
1165
|
+
user?.pictureUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1166
|
+
"img",
|
|
1067
1167
|
{
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
{
|
|
1077
|
-
style: {
|
|
1078
|
-
fontSize: "14px",
|
|
1079
|
-
fontWeight: 600,
|
|
1080
|
-
color: "var(--gov-text-primary, #05010e)",
|
|
1081
|
-
margin: 0
|
|
1082
|
-
},
|
|
1083
|
-
children: [
|
|
1084
|
-
"\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35,",
|
|
1085
|
-
" ",
|
|
1086
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1087
|
-
"span",
|
|
1088
|
-
{
|
|
1089
|
-
style: {
|
|
1090
|
-
color: "var(--color-alias-color-brand-primary, #1e7d55)"
|
|
1091
|
-
},
|
|
1092
|
-
children: displayName
|
|
1168
|
+
src: user.pictureUrl,
|
|
1169
|
+
alt: displayName,
|
|
1170
|
+
style: {
|
|
1171
|
+
width: "44px",
|
|
1172
|
+
height: "44px",
|
|
1173
|
+
borderRadius: "50%",
|
|
1174
|
+
objectFit: "cover",
|
|
1175
|
+
border: "2px solid var(--color-alias-color-brand-surface, #faf9e5)"
|
|
1093
1176
|
}
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1177
|
+
}
|
|
1178
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1179
|
+
"div",
|
|
1180
|
+
{
|
|
1181
|
+
style: {
|
|
1182
|
+
width: "44px",
|
|
1183
|
+
height: "44px",
|
|
1184
|
+
borderRadius: "50%",
|
|
1185
|
+
background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
|
|
1186
|
+
display: "flex",
|
|
1187
|
+
alignItems: "center",
|
|
1188
|
+
justifyContent: "center",
|
|
1189
|
+
boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
|
|
1190
|
+
},
|
|
1191
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1192
|
+
"span",
|
|
1193
|
+
{
|
|
1194
|
+
style: { color: "#fff", fontSize: "18px", fontWeight: 600 },
|
|
1195
|
+
children: firstChar
|
|
1196
|
+
}
|
|
1197
|
+
)
|
|
1198
|
+
}
|
|
1199
|
+
),
|
|
1200
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1201
|
+
"p",
|
|
1202
|
+
{
|
|
1203
|
+
style: {
|
|
1204
|
+
fontSize: "14px",
|
|
1205
|
+
fontWeight: 600,
|
|
1206
|
+
color: "var(--color-alias-color-brand-text-dark, #05010e)",
|
|
1207
|
+
margin: 0
|
|
1208
|
+
},
|
|
1209
|
+
children: [
|
|
1210
|
+
"\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35,",
|
|
1211
|
+
" ",
|
|
1212
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1213
|
+
"span",
|
|
1214
|
+
{
|
|
1215
|
+
style: {
|
|
1216
|
+
color: "var(--color-alias-color-brand-primary, #1e7d55)"
|
|
1217
|
+
},
|
|
1218
|
+
children: displayName
|
|
1219
|
+
}
|
|
1220
|
+
)
|
|
1221
|
+
]
|
|
1222
|
+
}
|
|
1223
|
+
) })
|
|
1224
|
+
]
|
|
1225
|
+
}
|
|
1226
|
+
),
|
|
1099
1227
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
|
|
1100
1228
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, ref: notifRef, children: [
|
|
1101
1229
|
notificationBell || /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -1149,12 +1277,12 @@ function UserHeader({
|
|
|
1149
1277
|
right: 0,
|
|
1150
1278
|
marginTop: "8px",
|
|
1151
1279
|
width: "360px",
|
|
1152
|
-
background: "
|
|
1280
|
+
background: "#fff",
|
|
1153
1281
|
borderRadius: "12px",
|
|
1154
1282
|
boxShadow: "0 10px 40px rgba(0,0,0,0.12)",
|
|
1155
1283
|
zIndex: 50,
|
|
1156
1284
|
overflow: "hidden",
|
|
1157
|
-
border: "1px solid
|
|
1285
|
+
border: "1px solid #e5e7eb"
|
|
1158
1286
|
},
|
|
1159
1287
|
children: [
|
|
1160
1288
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -1166,10 +1294,10 @@ function UserHeader({
|
|
|
1166
1294
|
display: "flex",
|
|
1167
1295
|
alignItems: "center",
|
|
1168
1296
|
justifyContent: "space-between",
|
|
1169
|
-
background: "
|
|
1297
|
+
background: "#fafafa"
|
|
1170
1298
|
},
|
|
1171
1299
|
children: [
|
|
1172
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: "14px", color: "
|
|
1300
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: "14px", color: "#111" }, children: "\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19" }),
|
|
1173
1301
|
onMarkAllRead && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1174
1302
|
"button",
|
|
1175
1303
|
{
|
|
@@ -1258,7 +1386,7 @@ function UserHeader({
|
|
|
1258
1386
|
style: {
|
|
1259
1387
|
fontSize: "13px",
|
|
1260
1388
|
fontWeight: !item.isRead ? 600 : 500,
|
|
1261
|
-
color: "
|
|
1389
|
+
color: "#111",
|
|
1262
1390
|
margin: "0 0 2px"
|
|
1263
1391
|
},
|
|
1264
1392
|
children: item.title
|
|
@@ -1300,7 +1428,7 @@ function UserHeader({
|
|
|
1300
1428
|
padding: "10px",
|
|
1301
1429
|
borderTop: "1px solid #f3f4f6",
|
|
1302
1430
|
textAlign: "center",
|
|
1303
|
-
background: "
|
|
1431
|
+
background: "#fafafa"
|
|
1304
1432
|
},
|
|
1305
1433
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1306
1434
|
"button",
|
|
@@ -1362,6 +1490,12 @@ function LogoutIcon2() {
|
|
|
1362
1490
|
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
|
|
1363
1491
|
] });
|
|
1364
1492
|
}
|
|
1493
|
+
function ProfileIcon2() {
|
|
1494
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
1495
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
|
|
1496
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4" })
|
|
1497
|
+
] });
|
|
1498
|
+
}
|
|
1365
1499
|
function UserSidebar({
|
|
1366
1500
|
user,
|
|
1367
1501
|
roleLabel,
|
|
@@ -1370,7 +1504,8 @@ function UserSidebar({
|
|
|
1370
1504
|
onLogout,
|
|
1371
1505
|
isOpen,
|
|
1372
1506
|
onClose,
|
|
1373
|
-
roleColor = "var(--color-alias-semantic-warning, orange)"
|
|
1507
|
+
roleColor = "var(--color-alias-semantic-warning, orange)",
|
|
1508
|
+
onProfile
|
|
1374
1509
|
}) {
|
|
1375
1510
|
react.useEffect(() => {
|
|
1376
1511
|
if (isOpen) {
|
|
@@ -1423,7 +1558,7 @@ function UserSidebar({
|
|
|
1423
1558
|
height: "100%",
|
|
1424
1559
|
width: "80vw",
|
|
1425
1560
|
maxWidth: "320px",
|
|
1426
|
-
background: "
|
|
1561
|
+
background: "#fff",
|
|
1427
1562
|
boxShadow: "-4px 0 24px rgba(0,0,0,0.12)",
|
|
1428
1563
|
zIndex: 50,
|
|
1429
1564
|
transform: isOpen ? "translateX(0)" : "translateX(100%)",
|
|
@@ -1432,92 +1567,155 @@ function UserSidebar({
|
|
|
1432
1567
|
flexDirection: "column"
|
|
1433
1568
|
},
|
|
1434
1569
|
children: [
|
|
1435
|
-
user && /* @__PURE__ */ jsxRuntime.
|
|
1570
|
+
user && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1436
1571
|
"div",
|
|
1437
1572
|
{
|
|
1438
1573
|
style: {
|
|
1439
1574
|
padding: "20px",
|
|
1440
1575
|
borderBottom: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
|
|
1441
1576
|
},
|
|
1442
|
-
children:
|
|
1443
|
-
|
|
1444
|
-
"img",
|
|
1445
|
-
{
|
|
1446
|
-
src: user.pictureUrl,
|
|
1447
|
-
alt: getFullName(),
|
|
1448
|
-
style: {
|
|
1449
|
-
width: "56px",
|
|
1450
|
-
height: "56px",
|
|
1451
|
-
borderRadius: "50%",
|
|
1452
|
-
objectFit: "cover",
|
|
1453
|
-
boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
|
|
1454
|
-
}
|
|
1455
|
-
}
|
|
1456
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1577
|
+
children: [
|
|
1578
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1457
1579
|
"div",
|
|
1458
1580
|
{
|
|
1581
|
+
onClick: () => {
|
|
1582
|
+
if (onProfile) {
|
|
1583
|
+
onProfile();
|
|
1584
|
+
onClose();
|
|
1585
|
+
}
|
|
1586
|
+
},
|
|
1587
|
+
onMouseEnter: (e) => {
|
|
1588
|
+
if (onProfile) e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
|
|
1589
|
+
},
|
|
1590
|
+
onMouseLeave: (e) => {
|
|
1591
|
+
if (onProfile) e.currentTarget.style.backgroundColor = "transparent";
|
|
1592
|
+
},
|
|
1459
1593
|
style: {
|
|
1460
|
-
width: "56px",
|
|
1461
|
-
height: "56px",
|
|
1462
|
-
borderRadius: "50%",
|
|
1463
|
-
background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
|
|
1464
1594
|
display: "flex",
|
|
1465
1595
|
alignItems: "center",
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1596
|
+
gap: "12px",
|
|
1597
|
+
cursor: onProfile ? "pointer" : "default",
|
|
1598
|
+
padding: "8px",
|
|
1599
|
+
borderRadius: "12px",
|
|
1600
|
+
transition: "background-color 0.15s ease"
|
|
1471
1601
|
},
|
|
1472
|
-
children:
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1602
|
+
children: [
|
|
1603
|
+
user.pictureUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1604
|
+
"img",
|
|
1605
|
+
{
|
|
1606
|
+
src: user.pictureUrl,
|
|
1607
|
+
alt: getFullName(),
|
|
1608
|
+
style: {
|
|
1609
|
+
width: "56px",
|
|
1610
|
+
height: "56px",
|
|
1611
|
+
borderRadius: "50%",
|
|
1612
|
+
objectFit: "cover",
|
|
1613
|
+
boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
|
|
1614
|
+
}
|
|
1615
|
+
}
|
|
1616
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1617
|
+
"div",
|
|
1618
|
+
{
|
|
1619
|
+
style: {
|
|
1620
|
+
width: "56px",
|
|
1621
|
+
height: "56px",
|
|
1622
|
+
borderRadius: "50%",
|
|
1623
|
+
background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
|
|
1624
|
+
display: "flex",
|
|
1625
|
+
alignItems: "center",
|
|
1626
|
+
justifyContent: "center",
|
|
1627
|
+
color: "#fff",
|
|
1628
|
+
fontWeight: 700,
|
|
1629
|
+
fontSize: "20px",
|
|
1630
|
+
boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
|
|
1631
|
+
},
|
|
1632
|
+
children: getInitial()
|
|
1633
|
+
}
|
|
1634
|
+
),
|
|
1635
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1503
1636
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1504
|
-
"
|
|
1637
|
+
"p",
|
|
1505
1638
|
{
|
|
1506
1639
|
style: {
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1640
|
+
fontWeight: 700,
|
|
1641
|
+
fontSize: "16px",
|
|
1642
|
+
color: "var(--color-alias-text-colors-primary, #060d26)",
|
|
1643
|
+
margin: 0,
|
|
1644
|
+
overflow: "hidden",
|
|
1645
|
+
textOverflow: "ellipsis",
|
|
1646
|
+
whiteSpace: "nowrap"
|
|
1647
|
+
},
|
|
1648
|
+
children: getFullName()
|
|
1513
1649
|
}
|
|
1514
1650
|
),
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1651
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1652
|
+
"p",
|
|
1653
|
+
{
|
|
1654
|
+
style: {
|
|
1655
|
+
fontSize: "13px",
|
|
1656
|
+
color: "var(--color-alias-text-colors-tertiary, #6b7280)",
|
|
1657
|
+
margin: "2px 0 0",
|
|
1658
|
+
display: "flex",
|
|
1659
|
+
alignItems: "center",
|
|
1660
|
+
gap: "6px"
|
|
1661
|
+
},
|
|
1662
|
+
children: [
|
|
1663
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1664
|
+
"span",
|
|
1665
|
+
{
|
|
1666
|
+
style: {
|
|
1667
|
+
width: "8px",
|
|
1668
|
+
height: "8px",
|
|
1669
|
+
borderRadius: "50%",
|
|
1670
|
+
background: roleColor,
|
|
1671
|
+
display: "inline-block"
|
|
1672
|
+
}
|
|
1673
|
+
}
|
|
1674
|
+
),
|
|
1675
|
+
roleLabel
|
|
1676
|
+
]
|
|
1677
|
+
}
|
|
1678
|
+
)
|
|
1679
|
+
] })
|
|
1680
|
+
]
|
|
1681
|
+
}
|
|
1682
|
+
),
|
|
1683
|
+
onProfile && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1684
|
+
"button",
|
|
1685
|
+
{
|
|
1686
|
+
onClick: () => {
|
|
1687
|
+
onProfile();
|
|
1688
|
+
onClose();
|
|
1689
|
+
},
|
|
1690
|
+
onMouseEnter: (e) => {
|
|
1691
|
+
e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
|
|
1692
|
+
},
|
|
1693
|
+
onMouseLeave: (e) => {
|
|
1694
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
1695
|
+
},
|
|
1696
|
+
style: {
|
|
1697
|
+
width: "100%",
|
|
1698
|
+
display: "flex",
|
|
1699
|
+
alignItems: "center",
|
|
1700
|
+
gap: "12px",
|
|
1701
|
+
padding: "10px 12px",
|
|
1702
|
+
marginTop: "8px",
|
|
1703
|
+
borderRadius: "8px",
|
|
1704
|
+
border: "none",
|
|
1705
|
+
background: "transparent",
|
|
1706
|
+
color: "var(--color-alias-color-brand-primary, #1e7d55)",
|
|
1707
|
+
cursor: "pointer",
|
|
1708
|
+
transition: "background-color 0.15s ease",
|
|
1709
|
+
fontSize: "14px",
|
|
1710
|
+
fontWeight: 500
|
|
1711
|
+
},
|
|
1712
|
+
children: [
|
|
1713
|
+
/* @__PURE__ */ jsxRuntime.jsx(ProfileIcon2, {}),
|
|
1714
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19" })
|
|
1715
|
+
]
|
|
1716
|
+
}
|
|
1717
|
+
)
|
|
1718
|
+
]
|
|
1521
1719
|
}
|
|
1522
1720
|
),
|
|
1523
1721
|
/* @__PURE__ */ jsxRuntime.jsx(
|