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

package/dist/components/layout/index.mjs

@@ -4078,6 +4078,7 @@ function NavigationLayout({
   defaultMode = "headbar",
   defaultSidebarCollapsed = false,
   expandedSidebarWidth = NAVIGATION_LAYOUT_SIDEBAR_EXPANDED_WIDTH,
+  expandSidebarLabel = "Expand sidebar",
   flush = false,
   headbarActions,
   headbarLayout,
@@ -4088,6 +4089,8 @@ function NavigationLayout({
   onNavigate,
   onSidebarCollapsedChange,
   renderHeadbarExtra,
+  collapseSidebarLabel = "Collapse sidebar",
+  sidebarCollapsed: controlledSidebarCollapsed,
   sidebarAccountMenu,
   sidebarFooter,
   sidebarHeader,
@@ -4095,10 +4098,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(() => {
@@ -4106,6 +4111,11 @@ function NavigationLayout({
       setUncontrolledMode(defaultMode);
     }
   }, [defaultMode, isModeControlled]);
+  useEffect(() => {
+    if (!isSidebarCollapsedControlled) {
+      setUncontrolledSidebarCollapsed(defaultSidebarCollapsed);
+    }
+  }, [defaultSidebarCollapsed, isSidebarCollapsedControlled]);
   const setNavigationMode = (nextMode) => {
     if (!isModeControlled) {
       setUncontrolledMode(nextMode);
@@ -4113,7 +4123,9 @@ function NavigationLayout({
     onModeChange?.(nextMode);
   };
   const setCollapsed = (collapsed) => {
-    setSidebarCollapsed(collapsed);
+    if (!isSidebarCollapsedControlled) {
+      setUncontrolledSidebarCollapsed(collapsed);
+    }
     onSidebarCollapsedChange?.(collapsed);
   };
   const navigationActions = [];
@@ -4130,7 +4142,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" }),
@@ -4141,7 +4153,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: cn2(
+        "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,