@hyddenlabs/hydn-ui 0.3.16 → 0.3.18

package/dist/components/feedback/error-page/error-400.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Icon } from "../../system/icon/icon.js";
 import Button from "../../forms/button/button.js";
 import Text from "../../typography/text/text.js";
 import Heading from "../../typography/heading/heading.js";
 import Stack from "../../layout/stack/stack.js";
+import { Icon } from "../../system/icon/icon.js";
 function Error400({
   title = "Bad Request",
   description = "We couldn't process your request. Please check your input and try again.",

package/dist/components/feedback/error-page/error-401.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Icon } from "../../system/icon/icon.js";
 import Button from "../../forms/button/button.js";
 import Text from "../../typography/text/text.js";
 import Heading from "../../typography/heading/heading.js";
 import Stack from "../../layout/stack/stack.js";
+import { Icon } from "../../system/icon/icon.js";
 function Error401({
   title = "Unauthorized",
   description = "You need to sign in to access this page. Please log in with your credentials.",

package/dist/components/feedback/error-page/error-403.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Icon } from "../../system/icon/icon.js";
 import Button from "../../forms/button/button.js";
 import Text from "../../typography/text/text.js";
 import Heading from "../../typography/heading/heading.js";
 import Stack from "../../layout/stack/stack.js";
+import { Icon } from "../../system/icon/icon.js";
 function Error403({
   title = "Access Forbidden",
   description = "You don't have permission to access this resource. If you believe this is a mistake, please contact support.",

package/dist/components/feedback/error-page/error-404.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Icon } from "../../system/icon/icon.js";
 import Button from "../../forms/button/button.js";
 import Text from "../../typography/text/text.js";
 import Heading from "../../typography/heading/heading.js";
 import Stack from "../../layout/stack/stack.js";
+import { Icon } from "../../system/icon/icon.js";
 function Error404({
   title = "Page Not Found",
   description = "The page you're looking for doesn't exist or has been moved. Please check the URL or return to the homepage.",

package/dist/components/forms/button/button-with-icon.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { Icon } from "../../system/icon/icon.js";
 import Button from "./button.js";
+import { Icon } from "../../system/icon/icon.js";
 const ButtonWithIcon = React.forwardRef(
   ({
     icon,

package/dist/components/forms/button/icon-button.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useCallback, useEffect } from "react";
-import { Icon } from "../../system/icon/icon.js";
 import Button from "./button.js";
+import { Icon } from "../../system/icon/icon.js";
 const IconButton = React.forwardRef(
   ({
     icon,

package/dist/components/layout/left-nav-layout/left-nav-item.d.ts

@@ -1,8 +1,11 @@
 import { ReactNode, MouseEvent } from 'react';
+import { Size } from '../../../theme/size-tokens';
 export type LeftNavItemProps = {
     /** Icon identifier string to display (uses Icon component) */
     icon?: string;
-    /** Link label text */
+    /** Icon size from unified size system */
+    iconSize?: Size;
+    /** Link label text (visible when expanded, hidden when collapsed) */
     children: ReactNode;
     /** Whether this item is currently active (highlighted state) */
     active?: boolean;
@@ -12,7 +15,7 @@ export type LeftNavItemProps = {
     badge?: ReactNode;
     /** Destination URL for the navigation link (required for link mode) */
     href?: string;
-    /** Accessible label override */
+    /** Accessible label override (used for tooltip in collapsed mode) */
     title?: string;
     /** Prevent actual navigation for demo/showcase mode (deprecated: use onClick instead) */
     preventNavigation?: boolean;
@@ -45,7 +48,7 @@ export type LeftNavItemProps = {
  * </LeftNavItem>
  * ```
  */
-declare function LeftNavItem({ icon, children, active, className, badge, href, title, preventNavigation, onClick, disableActiveState }: Readonly<LeftNavItemProps>): import("react/jsx-runtime").JSX.Element | null;
+declare function LeftNavItem({ icon, iconSize, children, active, className, badge, href, title, preventNavigation, onClick, disableActiveState }: Readonly<LeftNavItemProps>): import("react/jsx-runtime").JSX.Element | null;
 declare namespace LeftNavItem {
     var displayName: string;
 }

package/dist/components/layout/left-nav-layout/left-nav-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"left-nav-item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/left-nav-layout/left-nav-item.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAwC,MAAM,OAAO,CAAC;AAGpF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yFAAyF;IACzF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uEAAuE;IACvE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7E,8FAA8F;IAC9F,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,MAAc,EACd,SAAc,EACd,KAAK,EACL,IAAI,EACJ,KAAK,EACL,iBAAyB,EACzB,OAAO,EACP,kBAA0B,EAC3B,EAAE,QAAQ,CAAC,gBAAgB,CAAC,kDAuF5B;kBAlGQ,WAAW;;;AAsGpB,eAAe,WAAW,CAAC"}
+{"version":3,"file":"left-nav-item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/left-nav-layout/left-nav-item.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,UAAU,EAA6D,MAAM,OAAO,CAAC;AAIzG,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,qEAAqE;IACrE,QAAQ,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yFAAyF;IACzF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uEAAuE;IACvE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7E,8FAA8F;IAC9F,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,QAAe,EACf,QAAQ,EACR,MAAc,EACd,SAAc,EACd,KAAK,EACL,IAAI,EACJ,KAAK,EACL,iBAAyB,EACzB,OAAO,EACP,kBAA0B,EAC3B,EAAE,QAAQ,CAAC,gBAAgB,CAAC,kDA0H5B;kBAtIQ,WAAW;;;AA0IpB,eAAe,WAAW,CAAC"}

package/dist/components/layout/left-nav-layout/left-nav-item.js

@@ -1,9 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Icon } from "../../system/icon/icon.js";
-import { useRef, isValidElement, cloneElement } from "react";
+import { useRef, useState, useEffect, isValidElement, cloneElement } from "react";
 import { NavLink } from "react-router-dom";
+import Tooltip from "../../feedback/tooltip/tooltip.js";
 function LeftNavItem({
   icon,
+  iconSize = "sm",
   children,
   active = false,
   className = "",
@@ -15,25 +17,40 @@ function LeftNavItem({
   disableActiveState = false
 }) {
   const navRef = useRef(null);
+  const [isCollapsed, setIsCollapsed] = useState(() => {
+    if (typeof window !== "undefined") {
+      const navElement = document.querySelector("nav[data-collapsed]");
+      return navElement?.getAttribute("data-collapsed") === "true";
+    }
+    return false;
+  });
+  useEffect(() => {
+    const checkCollapsed = () => {
+      const navElement2 = navRef.current?.closest("nav");
+      if (navElement2) {
+        setIsCollapsed(navElement2.getAttribute("data-collapsed") === "true");
+      }
+    };
+    checkCollapsed();
+    const navElement = navRef.current?.closest("nav");
+    if (navElement) {
+      const observer = new MutationObserver(checkCollapsed);
+      observer.observe(navElement, {
+        attributes: true,
+        attributeFilter: ["data-collapsed"]
+      });
+      return () => observer.disconnect();
+    }
+    return void 0;
+  }, []);
   const itemTitle = title || (typeof children === "string" ? children : void 0);
   const isButtonMode = !!onClick;
   const isLinkMode = !isButtonMode && !!href;
-  const getBaseClasses = (isActive) => `group relative block w-full py-4 transition-colors ${!disableActiveState && (isActive || active) ? "bg-[#0C0E14] text-[#FBFBFF]" : "text-[#FBFBFF]/80 hover:text-[#FBFBFF] hover:bg-[#2e3148]"} ${className}`;
+  const getBaseClasses = (isActive) => `group relative flex items-center gap-1 px-2 py-1.5 rounded-lg mx-2 [nav[data-collapsed='true']_&]:mx-2 [nav[data-collapsed='true']_&]:px-0 [nav[data-collapsed='true']_&]:w-12 [nav[data-collapsed='true']_&]:justify-center text-sm font-medium transition-colors duration-200 ${!disableActiveState && (isActive || active) ? "bg-primary text-primary-foreground shadow-sm" : "text-foreground hover:bg-muted-hover hover:text-foreground"} ${className}`;
   const renderContent = (isActive) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    !disableActiveState && (isActive || active) && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute left-0 top-0 bottom-0 w-0.75",
-        style: {
-          background: "radial-gradient(70.52% 85.16% at 0% 53.3%, #B44F8C 28.85%, #3E4BA5 100%)"
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1.5 px-3", children: [
-      icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: "md" }),
-      /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wide leading-none text-center select-none", children }),
-      badge && /* @__PURE__ */ jsx("span", { children: isValidElement(badge) && !disableActiveState && (isActive || active) ? cloneElement(badge, { inverted: true }) : badge })
-    ] })
+    icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize }),
+    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate [nav[data-collapsed='true']_&]:hidden", children }),
+    badge && /* @__PURE__ */ jsx("span", { className: "shrink-0 [nav[data-collapsed='true']_&]:hidden", children: isValidElement(badge) && !disableActiveState && (isActive || active) ? cloneElement(badge, { inverted: true }) : badge })
   ] });
   const buttonElement = isButtonMode ? (
     // eslint-disable-next-line jsx-a11y/anchor-is-valid
@@ -72,7 +89,11 @@ function LeftNavItem({
     }
   ) : null;
   const element = isButtonMode ? buttonElement : navLink;
-  return element;
+  if (!isCollapsed) {
+    return element;
+  }
+  const tooltipContent = typeof children === "string" ? children : itemTitle || "Menu Item";
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent, position: "right", variant: "neutral", className: "w-fit", children: element });
 }
 LeftNavItem.displayName = "LeftNavItem";
 export {

package/dist/components/layout/left-nav-layout/left-nav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"left-nav-item.js","sources":["../../../../src/components/layout/left-nav-layout/left-nav-item.tsx"],"sourcesContent":["import Icon from '../../system/icon/icon';\nimport { ReactNode, MouseEvent, useRef, cloneElement, isValidElement } from 'react';\nimport { NavLink } from 'react-router-dom';\n\nexport type LeftNavItemProps = {\n  /** Icon identifier string to display (uses Icon component) */\n  icon?: string;\n  /** Link label text */\n  children: ReactNode;\n  /** Whether this item is currently active (highlighted state) */\n  active?: boolean;\n  /** Additional CSS classes applied to the navigation link */\n  className?: string;\n  /** Badge or count component to display on the right side */\n  badge?: ReactNode;\n  /** Destination URL for the navigation link (required for link mode) */\n  href?: string;\n  /** Accessible label override */\n  title?: string;\n  /** Prevent actual navigation for demo/showcase mode (deprecated: use onClick instead) */\n  preventNavigation?: boolean;\n  /** Click handler - when provided, renders as button instead of link */\n  onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** Disable active state highlighting (useful for non-navigation items like header buttons) */\n  disableActiveState?: boolean;\n};\n\n/**\n * LeftNavItem - Navigation link or button item for LeftNavLayout\n *\n * Features:\n * - Polymorphic: renders as link (with href) or button (with onClick)\n * - Icon support with proper alignment\n * - Optional active state styling\n * - Tooltip on hover in collapsed mode (using Tooltip component with Portal)\n * - Badge/count support\n * - Accessible keyboard navigation\n *\n * @example\n * ```tsx\n * // Link mode\n * <LeftNavItem icon=\"home\" href=\"/\" active>\n *   Home\n * </LeftNavItem>\n *\n * // Button mode\n * <LeftNavItem icon=\"settings\" onClick={() => console.log('clicked')} disableActiveState>\n *   Settings\n * </LeftNavItem>\n * ```\n */\nfunction LeftNavItem({\n  icon,\n  children,\n  active = false,\n  className = '',\n  badge,\n  href,\n  title,\n  preventNavigation = false,\n  onClick,\n  disableActiveState = false\n}: Readonly<LeftNavItemProps>) {\n  const navRef = useRef<HTMLAnchorElement | HTMLButtonElement>(null);\n\n  // Use children as fallback title for accessibility\n  const itemTitle = title || (typeof children === 'string' ? children : undefined);\n\n  // Determine mode: button (onClick present) or link (href present)\n  const isButtonMode = !!onClick;\n  const isLinkMode = !isButtonMode && !!href;\n\n  // Shared base classes for both button and link modes\n  const getBaseClasses = (isActive: boolean) =>\n    `group relative block w-full py-4 transition-colors ${\n      !disableActiveState && (isActive || active)\n        ? 'bg-[#0C0E14] text-[#FBFBFF]'\n        : 'text-[#FBFBFF]/80 hover:text-[#FBFBFF] hover:bg-[#2e3148]'\n    } ${className}`;\n\n  // Shared content renderer\n  const renderContent = (isActive: boolean) => (\n    <>\n      {/* Gradient left-border active indicator */}\n      {!disableActiveState && (isActive || active) && (\n        <div\n          className=\"absolute left-0 top-0 bottom-0 w-0.75\"\n          style={{\n            background: 'radial-gradient(70.52% 85.16% at 0% 53.3%, #B44F8C 28.85%, #3E4BA5 100%)'\n          }}\n        />\n      )}\n      <div className=\"flex flex-col items-center justify-center gap-1.5 px-3\">\n        {icon && <Icon name={icon} size=\"md\" />}\n        <span className=\"text-[10px] font-semibold uppercase tracking-wide leading-none text-center select-none\">\n          {children}\n        </span>\n        {badge && (\n          <span>\n            {isValidElement(badge) && !disableActiveState && (isActive || active)\n              ? cloneElement(badge, { inverted: true } as { inverted: boolean })\n              : badge}\n          </span>\n        )}\n      </div>\n    </>\n  );\n\n  // Button mode rendering\n  const buttonElement = isButtonMode ? (\n    // eslint-disable-next-line jsx-a11y/anchor-is-valid\n    <a\n      ref={navRef as React.RefObject<HTMLAnchorElement>}\n      href=\"#\"\n      onClick={(e) => {\n        e.preventDefault();\n        onClick?.(e as unknown as MouseEvent<HTMLAnchorElement>);\n      }}\n      className={getBaseClasses(active)}\n      aria-current={!disableActiveState && active ? 'page' : undefined}\n      aria-label={itemTitle}\n      role=\"button\"\n    >\n      {renderContent(active)}\n    </a>\n  ) : null;\n\n  // Link mode rendering\n  const navLink = isLinkMode ? (\n    <NavLink\n      ref={navRef as React.RefObject<HTMLAnchorElement>}\n      to={href!}\n      onClick={(e: MouseEvent<HTMLAnchorElement>) => {\n        if (preventNavigation) {\n          e.preventDefault();\n        }\n      }}\n      className={({ isActive }) => getBaseClasses(isActive)}\n      aria-current={!disableActiveState && active ? 'page' : undefined}\n      aria-label={itemTitle}\n      end\n    >\n      {({ isActive }) => renderContent(isActive)}\n    </NavLink>\n  ) : null;\n\n  const element = isButtonMode ? buttonElement : navLink;\n\n  return element;\n}\n\nLeftNavItem.displayName = 'LeftNavItem';\n\nexport default LeftNavItem;\n"],"names":[],"mappings":";;;;AAmDA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB;AAAA,EACA,qBAAqB;AACvB,GAA+B;AAC7B,QAAM,SAAS,OAA8C,IAAI;AAGjE,QAAM,YAAY,UAAU,OAAO,aAAa,WAAW,WAAW;AAGtE,QAAM,eAAe,CAAC,CAAC;AACvB,QAAM,aAAa,CAAC,gBAAgB,CAAC,CAAC;AAGtC,QAAM,iBAAiB,CAAC,aACtB,sDACE,CAAC,uBAAuB,YAAY,UAChC,gCACA,2DACN,IAAI,SAAS;AAGf,QAAM,gBAAgB,CAAC,aACrB,qBAAA,UAAA,EAEG,UAAA;AAAA,IAAA,CAAC,uBAAuB,YAAY,WACnC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,YAAY;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,IAGJ,qBAAC,OAAA,EAAI,WAAU,0DACZ,UAAA;AAAA,MAAA,QAAQ,oBAAC,MAAA,EAAK,MAAM,MAAM,MAAK,MAAK;AAAA,MACrC,oBAAC,QAAA,EAAK,WAAU,0FACb,SAAA,CACH;AAAA,MACC,SACC,oBAAC,QAAA,EACE,UAAA,eAAe,KAAK,KAAK,CAAC,uBAAuB,YAAY,UAC1D,aAAa,OAAO,EAAE,UAAU,KAAA,CAA+B,IAC/D,MAAA,CACN;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAIF,QAAM,gBAAgB;AAAA;AAAA,IAEpB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAS,CAAC,MAAM;AACd,YAAE,eAAA;AACF,oBAAU,CAA6C;AAAA,QACzD;AAAA,QACA,WAAW,eAAe,MAAM;AAAA,QAChC,gBAAc,CAAC,sBAAsB,SAAS,SAAS;AAAA,QACvD,cAAY;AAAA,QACZ,MAAK;AAAA,QAEJ,wBAAc,MAAM;AAAA,MAAA;AAAA,IAAA;AAAA,MAErB;AAGJ,QAAM,UAAU,aACd;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,SAAS,CAAC,MAAqC;AAC7C,YAAI,mBAAmB;AACrB,YAAE,eAAA;AAAA,QACJ;AAAA,MACF;AAAA,MACA,WAAW,CAAC,EAAE,eAAe,eAAe,QAAQ;AAAA,MACpD,gBAAc,CAAC,sBAAsB,SAAS,SAAS;AAAA,MACvD,cAAY;AAAA,MACZ,KAAG;AAAA,MAEF,UAAA,CAAC,EAAE,SAAA,MAAe,cAAc,QAAQ;AAAA,IAAA;AAAA,EAAA,IAEzC;AAEJ,QAAM,UAAU,eAAe,gBAAgB;AAE/C,SAAO;AACT;AAEA,YAAY,cAAc;"}
+{"version":3,"file":"left-nav-item.js","sources":["../../../../src/components/layout/left-nav-layout/left-nav-item.tsx"],"sourcesContent":["import Icon from '../../system/icon/icon';\nimport { ReactNode, MouseEvent, useRef, useState, useEffect, cloneElement, isValidElement } from 'react';\nimport { NavLink } from 'react-router-dom';\n\nimport Tooltip from '../../feedback/tooltip/tooltip';\nimport { Size } from '@/theme/size-tokens';\n\nexport type LeftNavItemProps = {\n  /** Icon identifier string to display (uses Icon component) */\n  icon?: string;\n  /** Icon size from unified size system */\n  iconSize?: Size;\n  /** Link label text (visible when expanded, hidden when collapsed) */\n  children: ReactNode;\n  /** Whether this item is currently active (highlighted state) */\n  active?: boolean;\n  /** Additional CSS classes applied to the navigation link */\n  className?: string;\n  /** Badge or count component to display on the right side */\n  badge?: ReactNode;\n  /** Destination URL for the navigation link (required for link mode) */\n  href?: string;\n  /** Accessible label override (used for tooltip in collapsed mode) */\n  title?: string;\n  /** Prevent actual navigation for demo/showcase mode (deprecated: use onClick instead) */\n  preventNavigation?: boolean;\n  /** Click handler - when provided, renders as button instead of link */\n  onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** Disable active state highlighting (useful for non-navigation items like header buttons) */\n  disableActiveState?: boolean;\n};\n\n/**\n * LeftNavItem - Navigation link or button item for LeftNavLayout\n *\n * Features:\n * - Polymorphic: renders as link (with href) or button (with onClick)\n * - Icon support with proper alignment\n * - Optional active state styling\n * - Tooltip on hover in collapsed mode (using Tooltip component with Portal)\n * - Badge/count support\n * - Accessible keyboard navigation\n *\n * @example\n * ```tsx\n * // Link mode\n * <LeftNavItem icon=\"home\" href=\"/\" active>\n *   Home\n * </LeftNavItem>\n *\n * // Button mode\n * <LeftNavItem icon=\"settings\" onClick={() => console.log('clicked')} disableActiveState>\n *   Settings\n * </LeftNavItem>\n * ```\n */\nfunction LeftNavItem({\n  icon,\n  iconSize = 'sm',\n  children,\n  active = false,\n  className = '',\n  badge,\n  href,\n  title,\n  preventNavigation = false,\n  onClick,\n  disableActiveState = false\n}: Readonly<LeftNavItemProps>) {\n  const navRef = useRef<HTMLAnchorElement | HTMLButtonElement>(null);\n  const [isCollapsed, setIsCollapsed] = useState(() => {\n    // Try to get initial collapsed state from nav element if it exists\n    if (typeof window !== 'undefined') {\n      const navElement = document.querySelector('nav[data-collapsed]');\n      return navElement?.getAttribute('data-collapsed') === 'true';\n    }\n    return false;\n  });\n\n  // Check if nav is collapsed by looking at parent nav element\n  useEffect(() => {\n    const checkCollapsed = () => {\n      const navElement = navRef.current?.closest('nav');\n      if (navElement) {\n        setIsCollapsed(navElement.getAttribute('data-collapsed') === 'true');\n      }\n    };\n\n    checkCollapsed();\n\n    // Create observer to watch for attribute changes\n    const navElement = navRef.current?.closest('nav');\n    if (navElement) {\n      const observer = new MutationObserver(checkCollapsed);\n      observer.observe(navElement, {\n        attributes: true,\n        attributeFilter: ['data-collapsed']\n      });\n      return () => observer.disconnect();\n    }\n\n    return undefined;\n  }, []);\n\n  // Use children as fallback title for accessibility\n  const itemTitle = title || (typeof children === 'string' ? children : undefined);\n\n  // Determine mode: button (onClick present) or link (href present)\n  const isButtonMode = !!onClick;\n  const isLinkMode = !isButtonMode && !!href;\n\n  // Shared base classes for both button and link modes\n  const getBaseClasses = (isActive: boolean) =>\n    `group relative flex items-center gap-1 px-2 py-1.5 rounded-lg mx-2 [nav[data-collapsed='true']_&]:mx-2 [nav[data-collapsed='true']_&]:px-0 [nav[data-collapsed='true']_&]:w-12 [nav[data-collapsed='true']_&]:justify-center text-sm font-medium transition-colors duration-200 ${\n      !disableActiveState && (isActive || active)\n        ? 'bg-primary text-primary-foreground shadow-sm'\n        : 'text-foreground hover:bg-muted-hover hover:text-foreground'\n    } ${className}`;\n\n  // Shared content renderer\n  const renderContent = (isActive: boolean) => (\n    <>\n      {icon && <Icon name={icon} size={iconSize} />}\n\n      <span className=\"flex-1 truncate [nav[data-collapsed='true']_&]:hidden\">{children}</span>\n\n      {badge && (\n        <span className=\"shrink-0 [nav[data-collapsed='true']_&]:hidden\">\n          {/* Auto-inject inverted prop when nav item is active */}\n          {isValidElement(badge) && !disableActiveState && (isActive || active)\n            ? cloneElement(badge, { inverted: true } as { inverted: boolean })\n            : badge}\n        </span>\n      )}\n    </>\n  );\n\n  // Button mode rendering\n  const buttonElement = isButtonMode ? (\n    // eslint-disable-next-line jsx-a11y/anchor-is-valid\n    <a\n      ref={navRef as React.RefObject<HTMLAnchorElement>}\n      href=\"#\"\n      onClick={(e) => {\n        e.preventDefault();\n        onClick?.(e as unknown as MouseEvent<HTMLAnchorElement>);\n      }}\n      className={getBaseClasses(active)}\n      aria-current={!disableActiveState && active ? 'page' : undefined}\n      aria-label={itemTitle}\n      role=\"button\"\n    >\n      {renderContent(active)}\n    </a>\n  ) : null;\n\n  // Link mode rendering\n  const navLink = isLinkMode ? (\n    <NavLink\n      ref={navRef as React.RefObject<HTMLAnchorElement>}\n      to={href!}\n      onClick={(e: MouseEvent<HTMLAnchorElement>) => {\n        if (preventNavigation) {\n          e.preventDefault();\n        }\n      }}\n      className={({ isActive }) => getBaseClasses(isActive)}\n      aria-current={!disableActiveState && active ? 'page' : undefined}\n      aria-label={itemTitle}\n      end\n    >\n      {({ isActive }) => renderContent(isActive)}\n    </NavLink>\n  ) : null;\n\n  const element = isButtonMode ? buttonElement : navLink;\n\n  // Only show tooltip when collapsed\n  if (!isCollapsed) {\n    return element;\n  }\n\n  // Get tooltip content\n  const tooltipContent = typeof children === 'string' ? children : itemTitle || 'Menu Item';\n\n  return (\n    <Tooltip content={tooltipContent} position=\"right\" variant=\"neutral\" className=\"w-fit\">\n      {element}\n    </Tooltip>\n  );\n}\n\nLeftNavItem.displayName = 'LeftNavItem';\n\nexport default LeftNavItem;\n"],"names":["navElement"],"mappings":"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"}

package/dist/components/layout/left-nav-layout/left-nav-layout.d.ts

@@ -4,56 +4,62 @@ export type LeftNavLayoutProps = {
     nav: ReactNode;
     /** Main content area */
     children: ReactNode;
+    /** Whether sidebar is collapsed (icon-only mode) */
+    collapsed?: boolean;
+    /** Callback when collapse state changes */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Whether to show collapse toggle button */
+    showToggle?: boolean;
     /** Custom className for the layout container */
     className?: string;
     /** Custom className for the nav sidebar */
     navClassName?: string;
     /** Custom className for the content area */
     contentClassName?: string;
-    /** Width of the sidebar */
+    /** Width of the sidebar when expanded */
     navWidth?: string;
+    /** Width of the sidebar when collapsed */
+    navWidthCollapsed?: string;
     /** 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 */
     mainContentRef?: React.RefObject<HTMLDivElement>;
-    /** Logo or brand content rendered in the sidebar header */
-    logo?: ReactNode;
-    /** Content pinned to the bottom of the sidebar (e.g. profile, logout actions) */
-    bottomContent?: ReactNode;
-    /** Optional bar rendered above the main content area, to the right of the sidebar */
-    topbar?: ReactNode;
+    /** Optional header text for the navigation sidebar */
+    header?: string;
 };
 /**
- * LeftNavLayout - Fixed-width left navigation sidebar layout
+ * LeftNavLayout - Full-featured responsive left navigation layout
  *
- * Provides a sidebar navigation with:
- * - Fixed width (always visible, no collapse)
- * - Logo/brand header slot
- * - Scrollable nav area
- * - Pinned bottom content slot
- * - Optional mobile overlay mode
+ * Provides a robust sidebar navigation with:
+ * - Full and collapsed (icon-only) states
+ * - Smooth transitions without janky spacing
+ * - Proper scroll handling
+ * - Responsive mobile behavior
+ * - Accessible keyboard navigation
  *
  * @example
  * ```tsx
  * <LeftNavLayout
- *   logo={<img src="/logo.png" alt="Logo" className="h-8" />}
+ *   collapsed={isCollapsed}
+ *   onCollapsedChange={setIsCollapsed}
  *   nav={
  *     <>
- *       <LeftNavItem icon="home" href="/">Home</LeftNavItem>
- *       <LeftNavItem icon="dashboard" href="/dashboard">Dashboard</LeftNavItem>
+ *       <LeftNavSection>
+ *         <LeftNavItem icon={<HomeIcon />} href="/" active>Home</LeftNavItem>
+ *         <LeftNavItem icon={<DashboardIcon />} href="/dashboard">Dashboard</LeftNavItem>
+ *       </LeftNavSection>
  *     </>
  *   }
- *   bottomContent={
- *     <LeftNavItem icon="logout" onClick={logout}>Logout</LeftNavItem>
- *   }
  * >
  *   <main>Your content here</main>
  * </LeftNavLayout>
  * ```
  */
-declare function LeftNavLayout({ nav, children, className, navClassName, contentClassName, navWidth, hideOnMobile, embedded, mainContentRef, logo, bottomContent, topbar }: Readonly<LeftNavLayoutProps>): import("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>): import("react/jsx-runtime").JSX.Element;
 declare namespace LeftNavLayout {
     var displayName: string;
 }

package/dist/components/layout/left-nav-layout/left-nav-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"left-nav-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/left-nav-layout/left-nav-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAI/D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,iCAAiC;IACjC,GAAG,EAAE,SAAS,CAAC;IACf,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACjD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iFAAiF;IACjF,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,qFAAqF;IACrF,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,aAAa,CAAC,EACrB,GAAG,EACH,QAAQ,EACR,SAAc,EACd,YAAiB,EACjB,gBAAqB,EACrB,QAAiB,EACjB,YAAoB,EACpB,QAAgB,EAChB,cAAc,EACd,IAAI,EACJ,aAAa,EACb,MAAM,EACP,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CAsJ9B;kBAnKQ,aAAa;;;AAuKtB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"left-nav-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/left-nav-layout/left-nav-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgD,MAAM,OAAO,CAAC;AAIhF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,iCAAiC;IACjC,GAAG,EAAE,SAAS,CAAC;IACf,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wDAAwD;IACxD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACjD,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,aAAa,CAAC,EACrB,GAAG,EACH,QAAQ,EACR,SAAS,EAAE,mBAAmB,EAC9B,iBAAiB,EACjB,UAAiB,EACjB,SAAc,EACd,YAAiB,EACjB,gBAAqB,EACrB,QAAkB,EAClB,iBAA4B,EAC5B,YAAoB,EACpB,oBAA2B,EAC3B,QAAgB,EAChB,MAAqB,EACrB,cAAc,EACf,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CAwN9B;kBAxOQ,aAAa;;;AA4OtB,eAAe,aAAa,CAAC"}

package/dist/components/layout/left-nav-layout/left-nav-layout.js

@@ -1,63 +1,123 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useLayoutEffect, useEffect } from "react";
 import useScrollReset from "../../../hooks/useScrollReset.js";
-import { Icon } from "../../system/icon/icon.js";
+import LeftNavItem from "./left-nav-item.js";
 function LeftNavLayout({
   nav,
   children,
+  collapsed: controlledCollapsed,
+  onCollapsedChange,
+  showToggle = true,
   className = "",
   navClassName = "",
   contentClassName = "",
-  navWidth = "w-26",
+  navWidth = "16rem",
+  navWidthCollapsed = "4.5rem",
   hideOnMobile = false,
+  autoCollapseOnMobile = true,
   embedded = false,
-  mainContentRef,
-  logo,
-  bottomContent,
-  topbar
+  header = "Navigation",
+  mainContentRef
 }) {
+  const STORAGE_KEY_DESKTOP = "left-nav-desktop-collapsed";
+  const STORAGE_KEY_MOBILE = "left-nav-mobile-collapsed";
+  const [internalCollapsed, setInternalCollapsed] = useState(() => {
+    if (typeof window === "undefined") return false;
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY_DESKTOP);
+      return saved !== null ? saved === "true" : false;
+    } catch (error) {
+      console.warn("Failed to read desktop collapsed state from localStorage:", error);
+      return false;
+    }
+  });
   const [mobileMenuOpen, setMobileMenuOpen] = useState(!hideOnMobile);
-  const [showScrollDown, setShowScrollDown] = useState(false);
-  const [showScrollUp, setShowScrollUp] = useState(false);
-  const closeMobileMenu = () => setMobileMenuOpen(false);
+  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 1024);
+  const [mobileCollapsedOverride, setMobileCollapsedOverride] = useState(() => {
+    if (typeof window === "undefined") return null;
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY_MOBILE);
+      return saved !== null ? saved === "true" : null;
+    } catch (error) {
+      console.warn("Failed to read mobile collapsed state from localStorage:", error);
+      return null;
+    }
+  });
+  const desktopCollapsedRef = useRef(void 0);
   const navRef = useRef(null);
   const scrollPosRef = useRef(0);
   const internalContentRef = useRef(null);
   const contentRef = mainContentRef || internalContentRef;
+  useLayoutEffect(() => {
+    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);
+          }
+        }
+        if (!isNowDesktop && autoCollapseOnMobile) {
+          try {
+            const savedMobile = localStorage.getItem(STORAGE_KEY_MOBILE);
+            setMobileCollapsedOverride(savedMobile !== null ? savedMobile === "true" : null);
+          } catch {
+            setMobileCollapsedOverride(null);
+          }
+        } else if (isNowDesktop) {
+          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) {
+      onCollapsedChange(value);
+    } else {
+      setInternalCollapsed(value);
+      try {
+        localStorage.setItem(STORAGE_KEY_DESKTOP, String(value));
+      } catch (error) {
+        console.warn("Failed to save desktop collapsed state to localStorage:", error);
+      }
+    }
+  };
+  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) {
+      const newMobileState = !effectiveCollapsed;
+      setMobileCollapsedOverride(newMobileState);
+      try {
+        localStorage.setItem(STORAGE_KEY_MOBILE, String(newMobileState));
+      } catch {
+        console.warn("Failed to save mobile collapsed state to localStorage:");
+      }
+    } else {
+      toggleCollapsed();
+    }
+  };
   useEffect(() => {
     if (navRef.current) {
       navRef.current.scrollTop = scrollPosRef.current;
     }
   }, [children]);
   useScrollReset([children], contentRef);
-  const updateScrollDirection = () => {
-    const el = navRef.current;
-    if (!el) return;
-    setShowScrollDown(el.scrollHeight > el.clientHeight && el.scrollTop < el.scrollHeight - el.clientHeight - 4);
-    setShowScrollUp(el.scrollTop > 50);
-  };
-  const scrollDown = () => {
-    const el = navRef.current;
-    if (!el) return;
-    el.scrollBy({ top: el.clientHeight * 0.75, behavior: "smooth" });
-  };
-  const scrollUp = () => {
-    const el = navRef.current;
-    if (!el) return;
-    el.scrollBy({ top: -el.clientHeight * 0.75, behavior: "smooth" });
-  };
-  useEffect(() => {
-    updateScrollDirection();
-    const el = navRef.current;
-    if (!el) return;
-    const ro = new ResizeObserver(updateScrollDirection);
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [nav]);
-  useEffect(() => {
-    updateScrollDirection();
-  }, []);
-  const containerClasses = embedded ? "flex bg-background border border-border rounded-lg overflow-hidden" : "fixed inset-0 flex overflow-hidden bg-background";
+  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",
@@ -67,66 +127,52 @@ function LeftNavLayout({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "aside",
       {
-        className: `${embedded ? "relative flex flex-col h-full" : hideOnMobile ? "fixed lg:relative top-0 left-0 z-40 lg:z-10 h-screen lg:h-full" : "relative h-full"} flex flex-col shrink-0 bg-[#24273D] ${!embedded && hideOnMobile && !mobileMenuOpen ? "-translate-x-full lg:translate-x-0" : "translate-x-0"} ${navWidth} ${navClassName}`,
+        className: `${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 && hideOnMobile && !mobileMenuOpen ? "-translate-x-full lg:translate-x-0" : "translate-x-0"} ${effectiveCollapsed ? "w-18" : "w-64"} ${navClassName}`,
+        style: !effectiveCollapsed && navWidth !== "16rem" || effectiveCollapsed && navWidthCollapsed !== "4.5rem" ? {
+          width: effectiveCollapsed ? navWidthCollapsed : navWidth
+        } : void 0,
         "aria-label": "Main navigation",
-        children: [
-          logo && /* @__PURE__ */ jsx("div", { className: "h-16 bg-[#151823] flex items-center justify-center border-b border-[#2e3148] shadow-sm shrink-0 px-4", children: logo }),
-          /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-h-0 flex flex-col", children: [
-            /* @__PURE__ */ jsx(
-              "nav",
-              {
-                ref: navRef,
-                className: "flex-1 overflow-y-auto divide-y divide-muted-foreground  scrollbar-dark",
-                onScroll: (e) => {
-                  scrollPosRef.current = e.currentTarget.scrollTop;
-                  updateScrollDirection();
-                },
-                children: nav
-              }
-            ),
-            showScrollDown && /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: scrollDown,
-                className: "group absolute bottom-0 left-0 right-0 h-16 flex items-end justify-center pb-2 cursor-pointer z-10",
-                "aria-label": "Scroll down",
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-t from-[#24273D] via-[#24273D]/90 to-transparent" }),
-                  /* @__PURE__ */ jsx("div", { className: "relative transition-transform duration-150 group-hover:translate-y-0.5 pr-2.5", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "md", color: "neutral" }) })
-                ]
-              }
-            ),
-            showScrollUp && /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: scrollUp,
-                className: "group absolute top-0 left-0 right-0 h-16 flex items-start justify-center pt-2 cursor-pointer z-10",
-                "aria-label": "Scroll up",
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-b from-[#24273D] via-[#24273D]/90 to-transparent" }),
-                  /* @__PURE__ */ jsx("div", { className: "relative transition-transform duration-150 group-hover:-translate-y-0.5 pr-2.5", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-up", size: "md", color: "neutral" }) })
-                ]
-              }
-            )
-          ] }),
-          bottomContent && /* @__PURE__ */ jsx("div", { className: "border-t border-[#2e3148] shrink-0", children: bottomContent })
-        ]
+        children: /* @__PURE__ */ jsxs(
+          "nav",
+          {
+            ref: navRef,
+            className: "flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin",
+            "data-collapsed": effectiveCollapsed,
+            onScroll: (e) => {
+              scrollPosRef.current = e.currentTarget.scrollTop;
+            },
+            children: [
+              showToggle && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "py-2", children: [
+                /* @__PURE__ */ jsx(
+                  LeftNavItem,
+                  {
+                    icon: effectiveCollapsed ? "layout-sidebar-left-expand" : "layout-sidebar-left-collapse",
+                    iconSize: "md",
+                    onClick: handleToggleClick,
+                    disableActiveState: true,
+                    title: effectiveCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                    children: header
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "h-px bg-border mx-3 mt-1.5", "aria-hidden": "true" })
+              ] }) }),
+              nav
+            ]
+          }
+        )
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
-      topbar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: topbar }),
-      /* @__PURE__ */ jsx(
-        "main",
-        {
-          ref: contentRef,
-          className: `flex-1 overflow-y-auto ${embedded ? "h-60" : ""} ${contentClassName}`,
-          children
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsx(
+      "main",
+      {
+        ref: contentRef,
+        className: `flex-1 overflow-y-auto ${embedded ? "h-60" : ""} ${contentClassName}`,
+        children
+      }
+    )
   ] });
 }
 LeftNavLayout.displayName = "LeftNavLayout";