@inf-monkeys-tech/monkeys-design 0.4.47 → 0.4.49

package/dist/index.js

@@ -21957,6 +21957,7 @@ function NavigationLayout({
   defaultMode = "headbar",
   defaultSidebarCollapsed = false,
   expandedSidebarWidth = NAVIGATION_LAYOUT_SIDEBAR_EXPANDED_WIDTH,
+  expandSidebarLabel = "Expand sidebar",
   flush = false,
   headbarActions,
   headbarLayout,
@@ -21967,6 +21968,8 @@ function NavigationLayout({
   onNavigate,
   onSidebarCollapsedChange,
   renderHeadbarExtra,
+  collapseSidebarLabel = "Collapse sidebar",
+  sidebarCollapsed: controlledSidebarCollapsed,
   sidebarAccountMenu,
   sidebarFooter,
   sidebarHeader,
@@ -21974,10 +21977,12 @@ function NavigationLayout({
   switchToSidebarLabel = "Switch to sidebar"
 }) {
   const [uncontrolledMode, setUncontrolledMode] = React.useState(defaultMode);
-  const [sidebarCollapsed, setSidebarCollapsed] = React.useState(defaultSidebarCollapsed);
+  const [uncontrolledSidebarCollapsed, setUncontrolledSidebarCollapsed] = React.useState(defaultSidebarCollapsed);
   const [revealRequest, setRevealRequest] = React.useState(null);
   const isModeControlled = mode !== void 0;
+  const isSidebarCollapsedControlled = controlledSidebarCollapsed !== void 0;
   const navigationMode = isModeControlled ? mode : uncontrolledMode;
+  const sidebarCollapsed = isSidebarCollapsedControlled ? controlledSidebarCollapsed : uncontrolledSidebarCollapsed;
   const isHeadbarMode = navigationMode === "headbar";
   const sidebarWidth = sidebarCollapsed ? collapsedSidebarWidth : expandedSidebarWidth;
   React.useEffect(() => {
@@ -21985,6 +21990,11 @@ function NavigationLayout({
       setUncontrolledMode(defaultMode);
     }
   }, [defaultMode, isModeControlled]);
+  React.useEffect(() => {
+    if (!isSidebarCollapsedControlled) {
+      setUncontrolledSidebarCollapsed(defaultSidebarCollapsed);
+    }
+  }, [defaultSidebarCollapsed, isSidebarCollapsedControlled]);
   const setNavigationMode = (nextMode) => {
     if (!isModeControlled) {
       setUncontrolledMode(nextMode);
@@ -21992,7 +22002,9 @@ function NavigationLayout({
     onModeChange?.(nextMode);
   };
   const setCollapsed = (collapsed) => {
-    setSidebarCollapsed(collapsed);
+    if (!isSidebarCollapsedControlled) {
+      setUncontrolledSidebarCollapsed(collapsed);
+    }
     onSidebarCollapsedChange?.(collapsed);
   };
   const navigationActions = [];
@@ -22009,7 +22021,7 @@ function NavigationLayout({
   }
   navigationActions.push({
     id: "toggle-sidebar",
-    label: sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar",
+    label: sidebarCollapsed ? expandSidebarLabel : collapseSidebarLabel,
     onClick: () => setCollapsed(!sidebarCollapsed),
     icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-[18px] w-[18px]", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
       /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
@@ -22020,7 +22032,10 @@ function NavigationLayout({
   const sidebar = isHeadbarMode ? null : /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "relative h-full min-h-0 shrink-0 overflow-hidden transition-[width] duration-260",
+      className: cn3(
+        "relative h-full min-h-0 shrink-0 transition-[width] duration-260",
+        sidebarCollapsed ? "z-20 overflow-visible" : "z-10 overflow-hidden"
+      ),
       style: { width: sidebarWidth, transitionTimingFunction: NAVIGATION_LAYOUT_TRANSITION_TIMING },
       children: /* @__PURE__ */ jsxRuntime.jsx(
         Sidebar,