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

package/dist/index.mjs

@@ -21930,6 +21930,7 @@ function NavigationLayout({
   defaultMode = "headbar",
   defaultSidebarCollapsed = false,
   expandedSidebarWidth = NAVIGATION_LAYOUT_SIDEBAR_EXPANDED_WIDTH,
+  expandSidebarLabel = "Expand sidebar",
   flush = false,
   headbarActions,
   headbarLayout,
@@ -21940,6 +21941,8 @@ function NavigationLayout({
   onNavigate,
   onSidebarCollapsedChange,
   renderHeadbarExtra,
+  collapseSidebarLabel = "Collapse sidebar",
+  sidebarCollapsed: controlledSidebarCollapsed,
   sidebarAccountMenu,
   sidebarFooter,
   sidebarHeader,
@@ -21947,10 +21950,12 @@ function NavigationLayout({
   switchToSidebarLabel = "Switch to sidebar"
 }) {
   const [uncontrolledMode, setUncontrolledMode] = useState(defaultMode);
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultSidebarCollapsed);
+  const [uncontrolledSidebarCollapsed, setUncontrolledSidebarCollapsed] = useState(defaultSidebarCollapsed);
   const [revealRequest, setRevealRequest] = 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;
   useEffect(() => {
@@ -21958,6 +21963,11 @@ function NavigationLayout({
       setUncontrolledMode(defaultMode);
     }
   }, [defaultMode, isModeControlled]);
+  useEffect(() => {
+    if (!isSidebarCollapsedControlled) {
+      setUncontrolledSidebarCollapsed(defaultSidebarCollapsed);
+    }
+  }, [defaultSidebarCollapsed, isSidebarCollapsedControlled]);
   const setNavigationMode = (nextMode) => {
     if (!isModeControlled) {
       setUncontrolledMode(nextMode);
@@ -21965,7 +21975,9 @@ function NavigationLayout({
     onModeChange?.(nextMode);
   };
   const setCollapsed = (collapsed) => {
-    setSidebarCollapsed(collapsed);
+    if (!isSidebarCollapsedControlled) {
+      setUncontrolledSidebarCollapsed(collapsed);
+    }
     onSidebarCollapsedChange?.(collapsed);
   };
   const navigationActions = [];
@@ -21982,7 +21994,7 @@ function NavigationLayout({
   }
   navigationActions.push({
     id: "toggle-sidebar",
-    label: sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar",
+    label: sidebarCollapsed ? expandSidebarLabel : collapseSidebarLabel,
     onClick: () => setCollapsed(!sidebarCollapsed),
     icon: /* @__PURE__ */ 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__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
@@ -21993,7 +22005,10 @@ function NavigationLayout({
   const sidebar = isHeadbarMode ? null : /* @__PURE__ */ 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__ */ jsx(
         Sidebar,