gov-layout 1.2.0 → 1.2.2

package/dist/index.d.mts

@@ -47,9 +47,11 @@ interface StaffSidebarProps {
     isOpen?: boolean;
     /** callback เมื่อกดเปิด/ปิด */
     onToggle?: () => void;
+    /** callback เมื่อกดเมนูที่มี children ขณะ sidebar ย่อ — ใช้สั่งกาง sidebar */
+    onExpandRequest?: () => void;
 }
 
-declare function StaffSidebar({ orgLogo, orgName, orgSubtitle, menuItems, bottomMenuItems, user, roleLabel, onNavigate, onLogout, currentPath, width, className, collapsible, isOpen: controlledIsOpen, onToggle, }: StaffSidebarProps): react_jsx_runtime.JSX.Element;
+declare function StaffSidebar({ orgLogo, orgName, orgSubtitle, menuItems, bottomMenuItems, user, roleLabel, onNavigate, onLogout, currentPath, width, className, collapsible, isOpen: controlledIsOpen, onToggle, onExpandRequest, }: StaffSidebarProps): react_jsx_runtime.JSX.Element;
 
 interface SidebarHeaderProps {
     orgLogo?: string;
@@ -64,8 +66,9 @@ interface SidebarMenuProps {
     onItemClick: (path: string) => void;
     currentPath?: string;
     collapsed?: boolean;
+    onExpandRequest?: () => void;
 }
-declare function SidebarMenu({ menuItems, onItemClick, currentPath, collapsed }: SidebarMenuProps): react_jsx_runtime.JSX.Element;
+declare function SidebarMenu({ menuItems, onItemClick, currentPath, collapsed, onExpandRequest }: SidebarMenuProps): react_jsx_runtime.JSX.Element;
 
 interface SidebarUserProfileProps {
     user: User | null;

package/dist/index.d.ts

@@ -47,9 +47,11 @@ interface StaffSidebarProps {
     isOpen?: boolean;
     /** callback เมื่อกดเปิด/ปิด */
     onToggle?: () => void;
+    /** callback เมื่อกดเมนูที่มี children ขณะ sidebar ย่อ — ใช้สั่งกาง sidebar */
+    onExpandRequest?: () => void;
 }
 
-declare function StaffSidebar({ orgLogo, orgName, orgSubtitle, menuItems, bottomMenuItems, user, roleLabel, onNavigate, onLogout, currentPath, width, className, collapsible, isOpen: controlledIsOpen, onToggle, }: StaffSidebarProps): react_jsx_runtime.JSX.Element;
+declare function StaffSidebar({ orgLogo, orgName, orgSubtitle, menuItems, bottomMenuItems, user, roleLabel, onNavigate, onLogout, currentPath, width, className, collapsible, isOpen: controlledIsOpen, onToggle, onExpandRequest, }: StaffSidebarProps): react_jsx_runtime.JSX.Element;
 
 interface SidebarHeaderProps {
     orgLogo?: string;
@@ -64,8 +66,9 @@ interface SidebarMenuProps {
     onItemClick: (path: string) => void;
     currentPath?: string;
     collapsed?: boolean;
+    onExpandRequest?: () => void;
 }
-declare function SidebarMenu({ menuItems, onItemClick, currentPath, collapsed }: SidebarMenuProps): react_jsx_runtime.JSX.Element;
+declare function SidebarMenu({ menuItems, onItemClick, currentPath, collapsed, onExpandRequest }: SidebarMenuProps): react_jsx_runtime.JSX.Element;
 
 interface SidebarUserProfileProps {
     user: User | null;

package/dist/index.js

@@ -417,7 +417,8 @@ function MenuItemComponent({
   onItemClick,
   currentPath,
   depth = 0,
-  collapsed = false
+  collapsed = false,
+  onExpandRequest
 }) {
   const hasChildren = item.children && item.children.length > 0;
   const isActive = item.path ? currentPath === item.path : false;
@@ -428,8 +429,12 @@ function MenuItemComponent({
   const expanded = userToggled ? isOpen : isOpen || isChildActive;
   const handleClick = () => {
     if (hasChildren) {
-      setUserToggled(true);
-      setIsOpen(!expanded);
+      if (collapsed) {
+        onExpandRequest?.();
+      } else {
+        setUserToggled(true);
+        setIsOpen(!expanded);
+      }
     } else if (item.path) {
       onItemClick(item.path);
     }
@@ -538,7 +543,7 @@ function MenuItemComponent({
     } }) })
   ] });
 }
-function SidebarMenu({ menuItems, onItemClick, currentPath, collapsed }) {
+function SidebarMenu({ menuItems, onItemClick, currentPath, collapsed, onExpandRequest }) {
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { style: {
     padding: collapsed ? "8px 8px" : "8px 12px",
     overflowY: "auto"
@@ -555,7 +560,8 @@ function SidebarMenu({ menuItems, onItemClick, currentPath, collapsed }) {
       item,
       onItemClick,
       currentPath,
-      collapsed
+      collapsed,
+      onExpandRequest
     },
     item.id
   )) }) });
@@ -813,7 +819,8 @@ function StaffSidebar({
   className,
   collapsible = false,
   isOpen: controlledIsOpen,
-  onToggle
+  onToggle,
+  onExpandRequest
 }) {
   const [internalOpen, setInternalOpen] = react.useState(true);
   const sidebarOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalOpen;
@@ -828,6 +835,17 @@ function StaffSidebar({
       setInternalOpen(!internalOpen);
     }
   };
+  const handleExpandRequest = () => {
+    if (onExpandRequest) {
+      onExpandRequest();
+    } else {
+      if (onToggle) {
+        onToggle();
+      } else {
+        setInternalOpen(true);
+      }
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "aside",
@@ -857,34 +875,44 @@ function StaffSidebar({
               collapsed
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
             SidebarMenu,
             {
               menuItems,
               onItemClick: onNavigate,
               currentPath,
-              collapsed
-            }
-          ),
-          resolvedBottomMenu && resolvedBottomMenu.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            SidebarMenu,
-            {
-              menuItems: resolvedBottomMenu,
-              onItemClick: onNavigate,
-              currentPath,
-              collapsed
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SidebarUserProfile,
-            {
-              user,
-              roleLabel,
-              onLogout,
-              collapsed
+              collapsed,
+              onExpandRequest: handleExpandRequest
             }
-          )
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flexShrink: 0 }, children: [
+            resolvedBottomMenu && resolvedBottomMenu.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("hr", { style: {
+                border: "none",
+                borderTop: "1px solid var(--color-border-colors-neutral, #c8cedd)",
+                margin: "4px 12px"
+              } }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarMenu,
+                {
+                  menuItems: resolvedBottomMenu,
+                  onItemClick: onNavigate,
+                  currentPath,
+                  collapsed,
+                  onExpandRequest: handleExpandRequest
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SidebarUserProfile,
+              {
+                user,
+                roleLabel,
+                onLogout,
+                collapsed
+              }
+            )
+          ] })
         ]
       }
     ),