gov-layout 1.0.0 → 1.1.0

package/dist/index.mjs

@@ -1,8 +1,39 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// src/sidebar/SidebarHeader.tsx
-function SidebarHeader({ orgLogo, orgName, orgSubtitle }) {
+// src/sidebar/StaffSidebar.tsx
+function SidebarHeader({ orgLogo, orgName, orgSubtitle, collapsed }) {
+  if (collapsed) {
+    return /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "20px 8px"
+    }, children: orgLogo ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: orgLogo,
+        alt: orgName,
+        style: {
+          width: "36px",
+          height: "36px",
+          borderRadius: "50%",
+          objectFit: "cover"
+        }
+      }
+    ) : /* @__PURE__ */ jsx("div", { style: {
+      width: "36px",
+      height: "36px",
+      borderRadius: "50%",
+      background: "var(--color-alias-color-brand-primary, #1e7d55)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "#fff",
+      fontWeight: 700,
+      fontSize: "14px"
+    }, children: orgName.charAt(0) }) });
+  }
   return /* @__PURE__ */ jsxs("div", { style: {
     display: "flex",
     alignItems: "center",
@@ -50,8 +81,8 @@ function ChevronDownIcon({ isOpen }) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
-      width: "20",
-      height: "20",
+      width: "16",
+      height: "16",
       viewBox: "0 0 20 20",
       fill: "none",
       stroke: "currentColor",
@@ -71,7 +102,8 @@ function MenuItemComponent({
   item,
   onItemClick,
   currentPath,
-  depth = 0
+  depth = 0,
+  collapsed = false
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const hasChildren = item.children && item.children.length > 0;
@@ -87,20 +119,58 @@ function MenuItemComponent({
   };
   const activeColor = "var(--color-alias-color-brand-primary, #1e7d55)";
   const hoverBg = "var(--color-foundations-fuji-pallet-light, #ebedf5)";
+  if (collapsed && depth === 0) {
+    return /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleClick,
+          title: item.title,
+          onMouseEnter: (e) => {
+            if (!isActive) e.currentTarget.style.backgroundColor = hoverBg;
+          },
+          onMouseLeave: (e) => {
+            if (!isActive) e.currentTarget.style.backgroundColor = "transparent";
+          },
+          style: {
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "12px 0",
+            borderRadius: "8px",
+            border: "none",
+            background: isActive || isChildActive ? `color-mix(in srgb, ${activeColor} 10%, transparent)` : "transparent",
+            color: isActive || isChildActive ? activeColor : "var(--color-alias-text-colors-tertiary, #475272)",
+            cursor: "pointer",
+            transition: "background-color 0.15s ease"
+          },
+          children: item.icon && /* @__PURE__ */ jsx("span", { style: {
+            width: "24px",
+            height: "24px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }, children: item.icon })
+        }
+      ),
+      item.dividerAfter && /* @__PURE__ */ jsx("hr", { style: {
+        border: "none",
+        borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
+        margin: "8px 4px"
+      } })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
       "button",
       {
         onClick: handleClick,
         onMouseEnter: (e) => {
-          if (!isActive) {
-            e.currentTarget.style.backgroundColor = hoverBg;
-          }
+          if (!isActive) e.currentTarget.style.backgroundColor = hoverBg;
         },
         onMouseLeave: (e) => {
-          if (!isActive) {
-            e.currentTarget.style.backgroundColor = "transparent";
-          }
+          if (!isActive) e.currentTarget.style.backgroundColor = "transparent";
         },
         style: {
           width: "100%",
@@ -120,21 +190,15 @@ function MenuItemComponent({
           lineHeight: "22px"
         },
         children: [
-          item.icon && /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                width: "24px",
-                height: "24px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                flexShrink: 0,
-                color: isActive ? activeColor : "var(--color-alias-text-colors-tertiary, #475272)"
-              },
-              children: item.icon
-            }
-          ),
+          item.icon && /* @__PURE__ */ jsx("span", { style: {
+            width: "24px",
+            height: "24px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            color: isActive ? activeColor : "var(--color-alias-text-colors-tertiary, #475272)"
+          }, children: item.icon }),
           /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: item.title }),
           hasChildren && /* @__PURE__ */ jsx(ChevronDownIcon, { isOpen: expanded })
         ]
@@ -150,25 +214,32 @@ function MenuItemComponent({
       },
       child.id
     )) }),
-    item.dividerAfter && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-      "hr",
-      {
-        style: {
-          border: "none",
-          borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
-          margin: "8px 0"
-        }
-      }
-    ) })
+    item.dividerAfter && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("hr", { style: {
+      border: "none",
+      borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
+      margin: "8px 0"
+    } }) })
   ] });
 }
-function SidebarMenu({ menuItems, onItemClick, currentPath }) {
-  return /* @__PURE__ */ jsx("nav", { style: { flex: 1, padding: "8px 12px", overflowY: "auto" }, children: /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "2px" }, children: menuItems.map((item) => /* @__PURE__ */ jsx(
+function SidebarMenu({ menuItems, onItemClick, currentPath, collapsed }) {
+  return /* @__PURE__ */ jsx("nav", { style: {
+    flex: collapsed ? void 0 : 1,
+    padding: collapsed ? "8px 8px" : "8px 12px",
+    overflowY: "auto"
+  }, children: /* @__PURE__ */ jsx("ul", { style: {
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px"
+  }, children: menuItems.map((item) => /* @__PURE__ */ jsx(
     MenuItemComponent,
     {
       item,
       onItemClick,
-      currentPath
+      currentPath,
+      collapsed
     },
     item.id
   )) }) });
@@ -196,7 +267,8 @@ function LogoutIcon() {
 function SidebarUserProfile({
   user,
   roleLabel,
-  onLogout
+  onLogout,
+  collapsed
 }) {
   if (!user) return null;
   const getFullName = () => {
@@ -208,6 +280,76 @@ function SidebarUserProfile({
   const getInitial = () => {
     return user.firstName?.charAt(0) || user.lastName?.charAt(0) || "?";
   };
+  if (collapsed) {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      padding: "12px 8px",
+      borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "12px"
+    }, children: [
+      user.pictureUrl ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: user.pictureUrl,
+          alt: getFullName(),
+          title: getFullName(),
+          style: {
+            width: "36px",
+            height: "36px",
+            borderRadius: "50%",
+            objectFit: "cover"
+          }
+        }
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          title: getFullName(),
+          style: {
+            width: "36px",
+            height: "36px",
+            borderRadius: "50%",
+            background: "var(--color-alias-color-brand-primary, #1e7d55)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "#fff",
+            fontWeight: 700,
+            fontSize: "14px"
+          },
+          children: getInitial()
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onLogout,
+          title: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E23\u0E30\u0E1A\u0E1A",
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--color-foundations-fuan-pallet-light, #ffd2d2)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+          },
+          style: {
+            width: "36px",
+            height: "36px",
+            borderRadius: "8px",
+            border: "none",
+            background: "transparent",
+            color: "var(--color-alias-semantic-critical, #f21515)",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: "background-color 0.15s ease"
+          },
+          children: /* @__PURE__ */ jsx(LogoutIcon, {})
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -252,34 +394,22 @@ function SidebarUserProfile({
           }
         ),
         /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx(
-            "p",
-            {
-              style: {
-                fontWeight: 600,
-                fontSize: "14px",
-                lineHeight: "20px",
-                color: "var(--color-alias-text-colors-primary, #060d26)",
-                margin: 0,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: getFullName()
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "p",
-            {
-              style: {
-                fontSize: "12px",
-                lineHeight: "16px",
-                color: "var(--color-alias-text-colors-tertiary, #475272)",
-                margin: 0
-              },
-              children: roleLabel
-            }
-          )
+          /* @__PURE__ */ jsx("p", { style: {
+            fontWeight: 600,
+            fontSize: "14px",
+            lineHeight: "20px",
+            color: "var(--color-alias-text-colors-primary, #060d26)",
+            margin: 0,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }, children: getFullName() }),
+          /* @__PURE__ */ jsx("p", { style: {
+            fontSize: "12px",
+            lineHeight: "16px",
+            color: "var(--color-alias-text-colors-tertiary, #475272)",
+            margin: 0
+          }, children: roleLabel })
         ] }),
         /* @__PURE__ */ jsx(
           "button",
@@ -315,6 +445,26 @@ function SidebarUserProfile({
     }
   );
 }
+function ToggleIcon({ isOpen }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: {
+        transition: "transform 0.2s ease",
+        transform: isOpen ? "rotate(0deg)" : "rotate(180deg)"
+      },
+      children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" })
+    }
+  );
+}
 function StaffSidebar({
   orgLogo,
   orgName,
@@ -327,61 +477,117 @@ function StaffSidebar({
   onLogout,
   currentPath,
   width = "280px",
-  className
+  className,
+  collapsible = false,
+  isOpen: controlledIsOpen,
+  onToggle
 }) {
-  return /* @__PURE__ */ jsxs(
-    "aside",
-    {
-      className,
-      style: {
-        position: "fixed",
-        top: 0,
-        left: 0,
-        height: "100vh",
-        width,
-        background: "#fff",
-        borderRight: "1px solid var(--color-border-colors-neutral, #c8cedd)",
-        display: "flex",
-        flexDirection: "column",
-        zIndex: 40,
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          SidebarHeader,
-          {
-            orgLogo,
-            orgName,
-            orgSubtitle
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          SidebarMenu,
-          {
-            menuItems,
-            onItemClick: onNavigate,
-            currentPath
-          }
-        ),
-        bottomMenuItems && bottomMenuItems.length > 0 && /* @__PURE__ */ jsx(
-          SidebarMenu,
-          {
-            menuItems: bottomMenuItems,
-            onItemClick: onNavigate,
-            currentPath
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          SidebarUserProfile,
-          {
-            user,
-            roleLabel,
-            onLogout
-          }
-        )
-      ]
+  const [internalOpen, setInternalOpen] = useState(true);
+  const sidebarOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalOpen;
+  const collapsed = collapsible && !sidebarOpen;
+  const collapsedWidth = "64px";
+  const currentWidth = collapsed ? collapsedWidth : width;
+  const handleToggle = () => {
+    if (onToggle) {
+      onToggle();
+    } else {
+      setInternalOpen(!internalOpen);
     }
-  );
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        className,
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          height: "100vh",
+          width: currentWidth,
+          background: "#fff",
+          borderRight: "1px solid var(--color-border-colors-neutral, #c8cedd)",
+          display: "flex",
+          flexDirection: "column",
+          zIndex: 40,
+          overflow: "hidden",
+          transition: "width 0.3s ease"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            SidebarHeader,
+            {
+              orgLogo,
+              orgName,
+              orgSubtitle,
+              collapsed
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SidebarMenu,
+            {
+              menuItems,
+              onItemClick: onNavigate,
+              currentPath,
+              collapsed
+            }
+          ),
+          bottomMenuItems && bottomMenuItems.length > 0 && /* @__PURE__ */ jsx(
+            SidebarMenu,
+            {
+              menuItems: bottomMenuItems,
+              onItemClick: onNavigate,
+              currentPath,
+              collapsed
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SidebarUserProfile,
+            {
+              user,
+              roleLabel,
+              onLogout,
+              collapsed
+            }
+          )
+        ]
+      }
+    ),
+    collapsible && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleToggle,
+        title: sidebarOpen ? "\u0E22\u0E48\u0E2D Sidebar" : "\u0E02\u0E22\u0E32\u0E22 Sidebar",
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "#f3f4f6";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "#fff";
+        },
+        style: {
+          position: "fixed",
+          top: "50%",
+          left: currentWidth,
+          transform: "translateY(-50%)",
+          zIndex: 41,
+          width: "24px",
+          height: "48px",
+          borderRadius: "0 6px 6px 0",
+          border: "1px solid var(--color-border-colors-neutral, #c8cedd)",
+          borderLeft: "none",
+          background: "#fff",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          boxShadow: "2px 0 8px rgba(0,0,0,0.06)",
+          transition: "left 0.3s ease",
+          color: "var(--color-alias-text-colors-tertiary, #475272)"
+        },
+        children: /* @__PURE__ */ jsx(ToggleIcon, { isOpen: sidebarOpen })
+      }
+    )
+  ] });
 }
 function BellIcon() {
   return /* @__PURE__ */ jsx("svg", { width: "22", height: "24", viewBox: "0 0 22 24", fill: "none", children: /* @__PURE__ */ jsx(
@@ -956,64 +1162,13 @@ function UserSidebar({
               ] })
             }
           ),
-          /* @__PURE__ */ jsx("nav", { style: { flex: 1, padding: "20px", overflowY: "auto" }, children: /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "4px" }, children: menuItems.map((item) => /* @__PURE__ */ jsxs("li", { children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => item.path && handleMenuClick(item.path),
-                onMouseEnter: (e) => {
-                  e.currentTarget.style.backgroundColor = "#f9fafb";
-                },
-                onMouseLeave: (e) => {
-                  e.currentTarget.style.backgroundColor = "transparent";
-                },
-                style: {
-                  width: "100%",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "16px",
-                  padding: "14px 16px",
-                  borderRadius: "8px",
-                  border: "none",
-                  background: "transparent",
-                  color: "var(--color-alias-text-colors-primary, #374151)",
-                  cursor: "pointer",
-                  transition: "background-color 0.15s ease",
-                  fontSize: "15px",
-                  fontWeight: 500,
-                  textAlign: "left"
-                },
-                children: [
-                  item.icon && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      style: {
-                        width: "28px",
-                        height: "28px",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        color: "var(--color-alias-text-colors-tertiary, #6b7280)",
-                        flexShrink: 0
-                      },
-                      children: item.icon
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: item.title })
-                ]
-              }
-            ),
-            item.dividerAfter && /* @__PURE__ */ jsx(
-              "hr",
-              {
-                style: {
-                  border: "none",
-                  borderTop: "1px solid var(--color-border-colors-neutral, #e5e7eb)",
-                  margin: "8px 0"
-                }
-              }
-            )
-          ] }, item.id)) }) }),
+          /* @__PURE__ */ jsx(
+            SidebarMenu,
+            {
+              menuItems,
+              onItemClick: handleMenuClick
+            }
+          ),
           /* @__PURE__ */ jsx(
             "div",
             {