@hyddenlabs/hydn-ui 0.3.0-alpha.190 → 0.3.0-alpha.191

package/dist/index.d.cts

@@ -1707,12 +1707,10 @@ type LeftNavLayoutProps = {
     navWidth?: string;
     /** Width of the sidebar when collapsed */
     navWidthCollapsed?: string;
-    /** Whether sidebar is collapsible on mobile (becomes overlay) */
-    mobileCollapsible?: boolean;
-    /** Mobile menu open state (controlled) */
-    mobileMenuOpen?: boolean;
-    /** Callback when mobile menu state changes */
-    onMobileMenuOpenChange?: (open: boolean) => void;
+    /** Hide navigation on mobile (slides in as overlay when toggled) */
+    hideOnMobile?: boolean;
+    /** Auto-collapse to icon-only mode on mobile screens */
+    autoCollapseOnMobile?: boolean;
     /** Embedded demo mode (no fixed positioning, constrained height) */
     embedded?: boolean;
     /** Ref for the main content scrollable element */
@@ -1748,7 +1746,7 @@ type LeftNavLayoutProps = {
  * </LeftNavLayout>
  * ```
  */
-declare function LeftNavLayout({ nav, children, collapsed: controlledCollapsed, onCollapsedChange, showToggle, className, navClassName, contentClassName, navWidth, navWidthCollapsed, mobileCollapsible, mobileMenuOpen: controlledMobileMenuOpen, embedded, header, mainContentRef }: Readonly<LeftNavLayoutProps>): react_jsx_runtime.JSX.Element;
+declare function LeftNavLayout({ nav, children, collapsed: controlledCollapsed, onCollapsedChange, showToggle, className, navClassName, contentClassName, navWidth, navWidthCollapsed, hideOnMobile, autoCollapseOnMobile, embedded, header, mainContentRef }: Readonly<LeftNavLayoutProps>): react_jsx_runtime.JSX.Element;
 declare namespace LeftNavLayout {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -1707,12 +1707,10 @@ type LeftNavLayoutProps = {
     navWidth?: string;
     /** Width of the sidebar when collapsed */
     navWidthCollapsed?: string;
-    /** Whether sidebar is collapsible on mobile (becomes overlay) */
-    mobileCollapsible?: boolean;
-    /** Mobile menu open state (controlled) */
-    mobileMenuOpen?: boolean;
-    /** Callback when mobile menu state changes */
-    onMobileMenuOpenChange?: (open: boolean) => void;
+    /** Hide navigation on mobile (slides in as overlay when toggled) */
+    hideOnMobile?: boolean;
+    /** Auto-collapse to icon-only mode on mobile screens */
+    autoCollapseOnMobile?: boolean;
     /** Embedded demo mode (no fixed positioning, constrained height) */
     embedded?: boolean;
     /** Ref for the main content scrollable element */
@@ -1748,7 +1746,7 @@ type LeftNavLayoutProps = {
  * </LeftNavLayout>
  * ```
  */
-declare function LeftNavLayout({ nav, children, collapsed: controlledCollapsed, onCollapsedChange, showToggle, className, navClassName, contentClassName, navWidth, navWidthCollapsed, mobileCollapsible, mobileMenuOpen: controlledMobileMenuOpen, embedded, header, mainContentRef }: Readonly<LeftNavLayoutProps>): react_jsx_runtime.JSX.Element;
+declare function LeftNavLayout({ nav, children, collapsed: controlledCollapsed, onCollapsedChange, showToggle, className, navClassName, contentClassName, navWidth, navWidthCollapsed, hideOnMobile, autoCollapseOnMobile, embedded, header, mainContentRef }: Readonly<LeftNavLayoutProps>): react_jsx_runtime.JSX.Element;
 declare namespace LeftNavLayout {
     var displayName: string;
 }

package/dist/index.js

@@ -2313,17 +2313,44 @@ function LeftNavLayout({
   contentClassName = "",
   navWidth = "16rem",
   navWidthCollapsed = "4.5rem",
-  mobileCollapsible = true,
-  mobileMenuOpen: controlledMobileMenuOpen,
+  hideOnMobile = false,
+  autoCollapseOnMobile = true,
   embedded = false,
   header = "Navigation",
   mainContentRef
 }) {
   const [internalCollapsed, setInternalCollapsed] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(!hideOnMobile);
+  const [isMobile, setIsMobile] = useState(false);
+  const [mobileCollapsedOverride, setMobileCollapsedOverride] = useState(null);
+  const desktopCollapsedRef = useRef(void 0);
   const navRef = useRef(null);
   const scrollPosRef = useRef(0);
   const internalContentRef = useRef(null);
   const contentRef = mainContentRef || internalContentRef;
+  useEffect(() => {
+    const checkMobile = () => {
+      const newIsMobile = window.innerWidth < 1024;
+      if (newIsMobile !== isMobile) {
+        const wasDesktop = !isMobile;
+        const isNowDesktop = !newIsMobile;
+        setIsMobile(newIsMobile);
+        if (wasDesktop && autoCollapseOnMobile) {
+          const currentCollapsed = controlledCollapsed ?? internalCollapsed;
+          desktopCollapsedRef.current = currentCollapsed;
+        }
+        if (isNowDesktop && autoCollapseOnMobile && desktopCollapsedRef.current !== void 0) {
+          if (controlledCollapsed === void 0) {
+            setInternalCollapsed(desktopCollapsedRef.current);
+          }
+        }
+        setMobileCollapsedOverride(null);
+      }
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, [isMobile, autoCollapseOnMobile, controlledCollapsed, internalCollapsed]);
   const collapsed = controlledCollapsed ?? internalCollapsed;
   const setCollapsed = (value) => {
     if (onCollapsedChange) {
@@ -2332,8 +2359,18 @@ function LeftNavLayout({
       setInternalCollapsed(value);
     }
   };
-  const mobileMenuOpen = controlledMobileMenuOpen ?? false;
+  const effectiveCollapsed = autoCollapseOnMobile && isMobile ? mobileCollapsedOverride !== null ? mobileCollapsedOverride : true : collapsed;
   const toggleCollapsed = () => setCollapsed(!collapsed);
+  const closeMobileMenu = () => setMobileMenuOpen(false);
+  const handleToggleClick = () => {
+    if (hideOnMobile && isMobile) {
+      closeMobileMenu();
+    } else if (autoCollapseOnMobile && isMobile) {
+      setMobileCollapsedOverride(!effectiveCollapsed);
+    } else {
+      toggleCollapsed();
+    }
+  };
   useEffect(() => {
     if (navRef.current) {
       navRef.current.scrollTop = scrollPosRef.current;
@@ -2342,20 +2379,28 @@ function LeftNavLayout({
   useScrollReset_default([children], contentRef);
   const containerClasses = embedded ? "flex bg-background border border-border rounded-lg overflow-hidden" : "flex h-[calc(100vh-3.5rem)] md:h-[calc(100vh-4rem)] bg-background";
   return /* @__PURE__ */ jsxs("div", { className: `${containerClasses} ${className}`, children: [
+    !embedded && hideOnMobile && mobileMenuOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/50 z-30 lg:hidden transition-opacity duration-300",
+        onClick: closeMobileMenu,
+        "aria-hidden": "true"
+      }
+    ),
     /* @__PURE__ */ jsx(
       "aside",
       {
         className: `
-          ${embedded ? "relative flex flex-col h-full" : "fixed lg:relative top-14 md:top-16 lg:top-0 left-0 z-40 lg:z-10 h-[calc(100vh-3.5rem)] md:h-[calc(100vh-4rem)] lg:h-full"}
+          ${embedded ? "relative flex flex-col h-full" : hideOnMobile ? "fixed lg:relative top-14 md:top-16 lg:top-0 left-0 z-40 lg:z-10 h-[calc(100vh-3.5rem)] md:h-[calc(100vh-4rem)] lg:h-full" : "relative h-full"}
           flex flex-col shrink-0
           bg-background border-r border-border
           transition-all duration-300 ease-in-out
-          ${!embedded && mobileCollapsible && !mobileMenuOpen ? "-translate-x-full lg:translate-x-0" : "translate-x-0"}
-          ${collapsed ? "w-18" : "w-64"}
+          ${!embedded && hideOnMobile && !mobileMenuOpen ? "-translate-x-full lg:translate-x-0" : "translate-x-0"}
+          ${effectiveCollapsed ? "w-18" : "w-64"}
           ${navClassName}
         `,
-        style: !collapsed && navWidth !== "16rem" || collapsed && navWidthCollapsed !== "4.5rem" ? {
-          width: collapsed ? navWidthCollapsed : navWidth
+        style: !effectiveCollapsed && navWidth !== "16rem" || effectiveCollapsed && navWidthCollapsed !== "4.5rem" ? {
+          width: effectiveCollapsed ? navWidthCollapsed : navWidth
         } : void 0,
         "aria-label": "Main navigation",
         children: /* @__PURE__ */ jsxs(
@@ -2363,7 +2408,7 @@ function LeftNavLayout({
           {
             ref: navRef,
             className: "flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin",
-            "data-collapsed": collapsed,
+            "data-collapsed": effectiveCollapsed,
             onScroll: (e) => {
               scrollPosRef.current = e.currentTarget.scrollTop;
             },
@@ -2382,26 +2427,26 @@ function LeftNavLayout({
                         className: `
                 text-sm font-semibold text-foreground
                 transition-all duration-300 ease-in-out
-                ${collapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"}
+                ${effectiveCollapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"}
               `,
-                        "aria-hidden": collapsed,
+                        "aria-hidden": effectiveCollapsed,
                         children: header
                       }
                     ),
                     /* @__PURE__ */ jsx(
                       icon_button_default,
                       {
-                        icon: collapsed ? "layout-sidebar-left-expand" : "layout-sidebar-left-collapse",
-                        hoverIcon: collapsed ? "layout-sidebar-left-expand-filled" : "layout-sidebar-left-collapse-filled",
-                        ariaLabel: collapsed ? "Expand sidebar" : "Collapse sidebar",
+                        icon: effectiveCollapsed ? "layout-sidebar-left-expand" : "layout-sidebar-left-collapse",
+                        hoverIcon: effectiveCollapsed ? "layout-sidebar-left-expand-filled" : "layout-sidebar-left-collapse-filled",
+                        ariaLabel: effectiveCollapsed ? "Expand sidebar" : "Collapse sidebar",
                         buttonStyle: "ghost",
                         variant: "neutral",
                         size: "sm",
                         iconSize: "sm",
                         className: `
-                ${collapsed ? "absolute left-1/2 -translate-x-1/2" : "absolute right-0"}
+                ${effectiveCollapsed ? "absolute left-1/2 -translate-x-1/2" : "absolute right-0"}
               `,
-                        onClick: toggleCollapsed
+                        onClick: handleToggleClick
                       }
                     )
                   ]