@inf-monkeys-tech/monkeys-design 2.0.2 → 2.0.3

package/dist/components/layout/index.mjs

@@ -1,5 +1,5 @@
 import { forwardRef, useState, useEffect, useContext, useMemo, isValidElement, Fragment, createContext, useRef } from 'react';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import * as DropdownMenu2 from '@radix-ui/react-dropdown-menu';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import 'react-dom';
@@ -2629,9 +2629,9 @@ function UserAccountMenuSelector({
   if (selector.visible === false || selector.options.length === 0) return null;
   const radiusClass = radiusClassNames[menuRadius];
   const currentLabel = getCurrentOptionLabel(selector);
-  return /* @__PURE__ */ jsxs(DropdownMenu.Sub, { children: [
+  return /* @__PURE__ */ jsxs(DropdownMenu2.Sub, { children: [
     /* @__PURE__ */ jsxs(
-      DropdownMenu.SubTrigger,
+      DropdownMenu2.SubTrigger,
       {
         disabled: selector.disabled,
         className: cn(
@@ -2646,8 +2646,8 @@ function UserAccountMenuSelector({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu.SubContent,
+    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu2.SubContent,
       {
         sideOffset: 8,
         className: cn(
@@ -2656,8 +2656,8 @@ function UserAccountMenuSelector({
           selector.contentWidthClassName,
           classNames?.subContent
         ),
-        children: /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value: selector.value, onValueChange: selector.onChange, children: selector.options.map((option) => /* @__PURE__ */ jsxs(
-          DropdownMenu.RadioItem,
+        children: /* @__PURE__ */ jsx(DropdownMenu2.RadioGroup, { value: selector.value, onValueChange: selector.onChange, children: selector.options.map((option) => /* @__PURE__ */ jsxs(
+          DropdownMenu2.RadioItem,
           {
             value: option.value,
             disabled: option.disabled,
@@ -2667,7 +2667,7 @@ function UserAccountMenuSelector({
               classNames?.item
             ),
             children: [
-              /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { className: "absolute left-2 inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+              /* @__PURE__ */ jsx(DropdownMenu2.ItemIndicator, { className: "absolute left-2 inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
               renderIcon(option.icon, classNames?.itemIcon),
               /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label })
             ]
@@ -2716,8 +2716,8 @@ function UserAccountMenu({
     }
   );
   const isProfileTrigger = triggerVariant === "profile";
-  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
-    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
       BaseButton,
       {
         appearance,
@@ -2743,8 +2743,8 @@ function UserAccountMenu({
         tone: "muted"
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(
-      DropdownMenu.Content,
+    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs(
+      DropdownMenu2.Content,
       {
         align,
         side,
@@ -2756,7 +2756,7 @@ function UserAccountMenu({
           classNames?.content
         ),
         children: [
-          /* @__PURE__ */ jsx(DropdownMenu.Label, { className: cn("px-2 py-1.5 font-normal", classNames?.label), children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsx(DropdownMenu2.Label, { className: cn("px-2 py-1.5 font-normal", classNames?.label), children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
             avatar,
             /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
               /* @__PURE__ */ jsx("span", { className: cn("truncate text-sm font-medium leading-none", classNames?.userName), children: displayName }),
@@ -2773,7 +2773,7 @@ function UserAccountMenu({
             ] })
           ] }) }),
           hasMenuBody ? /* @__PURE__ */ jsx(
-            DropdownMenu.Separator,
+            DropdownMenu2.Separator,
             {
               className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
             }
@@ -2788,20 +2788,20 @@ function UserAccountMenu({
             selector.id ?? `selector-${index}`
           )),
           visibleSelectors.length > 0 && visibleItems.length > 0 ? /* @__PURE__ */ jsx(
-            DropdownMenu.Separator,
+            DropdownMenu2.Separator,
             {
               className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
             }
           ) : null,
           visibleItems.map((item) => /* @__PURE__ */ jsxs("div", { children: [
             item.separatorBefore ? /* @__PURE__ */ jsx(
-              DropdownMenu.Separator,
+              DropdownMenu2.Separator,
               {
                 className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
               }
             ) : null,
             /* @__PURE__ */ jsxs(
-              DropdownMenu.Item,
+              DropdownMenu2.Item,
               {
                 disabled: item.disabled,
                 onSelect: item.disabled ? void 0 : item.onSelect,
@@ -2925,8 +2925,8 @@ function AppHeader({
         (!tabs || tabs.length === 0) && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
         /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-4", children: [
           extra,
-          user && /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
-            /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "flex h-8 w-8 items-center justify-center rounded-full hover:ring-2 hover:ring-[hsl(var(--ring))]/20 transition-all overflow-hidden focus-visible:outline-none", children: user.photo ? /* @__PURE__ */ jsx(
+          user && /* @__PURE__ */ jsxs(DropdownMenu2.Root, { children: [
+            /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "flex h-8 w-8 items-center justify-center rounded-full hover:ring-2 hover:ring-[hsl(var(--ring))]/20 transition-all overflow-hidden focus-visible:outline-none", children: user.photo ? /* @__PURE__ */ jsx(
               "img",
               {
                 src: user.photo,
@@ -2934,14 +2934,14 @@ function AppHeader({
                 className: "h-8 w-8 rounded-full object-cover"
               }
             ) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-xs font-medium", children: user.name ? getUserInitials(user.name) : "U" }) }) }),
-            /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(
-              DropdownMenu.Content,
+            /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs(
+              DropdownMenu2.Content,
               {
                 className: "z-50 w-52 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1 text-[hsl(var(--popover-foreground))] shadow-md animate-in fade-in-0 zoom-in-95",
                 sideOffset: 5,
                 align: "end",
                 children: [
-                  /* @__PURE__ */ jsxs(DropdownMenu.Label, { className: "flex items-center gap-2 px-2 py-1.5 font-normal", children: [
+                  /* @__PURE__ */ jsxs(DropdownMenu2.Label, { className: "flex items-center gap-2 px-2 py-1.5 font-normal", children: [
                     user.photo ? /* @__PURE__ */ jsx(
                       "img",
                       {
@@ -2955,11 +2955,11 @@ function AppHeader({
                       user.email && /* @__PURE__ */ jsx("span", { className: "text-xs text-[hsl(var(--muted-foreground))] leading-none mt-1", children: user.email })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx(DropdownMenu.Separator, { className: "h-px bg-[hsl(var(--border))] my-1" }),
-                  /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
+                  /* @__PURE__ */ jsx(DropdownMenu2.Separator, { className: "h-px bg-[hsl(var(--border))] my-1" }),
+                  /* @__PURE__ */ jsxs(DropdownMenu2.Group, { children: [
                     userMenuItems,
                     /* @__PURE__ */ jsxs(
-                      DropdownMenu.Item,
+                      DropdownMenu2.Item,
                       {
                         className: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-[hsl(var(--destructive))] outline-none transition-colors hover:bg-[hsl(var(--accent))]",
                         onSelect: () => onLogout?.(),
@@ -3236,6 +3236,7 @@ function AppLayout({
 }
 var NAVIGATION_LAYOUT_SIDEBAR_EXPANDED_WIDTH = "13.7rem";
 var NAVIGATION_LAYOUT_SIDEBAR_COLLAPSED_WIDTH = "4.25rem";
+var NAVIGATION_LAYOUT_CONTEXTUAL_SIDEBAR_WIDTH = "15rem";
 var NAVIGATION_LAYOUT_TRANSITION_TIMING = "cubic-bezier(0.22, 1, 0.36, 1)";
 var NAVIGATION_LAYOUT_HEADBAR_DEFAULT_HEIGHT_PX = 72;
 var NAVIGATION_LAYOUT_HEADBAR_MIN_HEIGHT_PX = 56;
@@ -3363,11 +3364,18 @@ function getHeadbarCompoundStyle(active, useTokenRadius = true) {
 function findNavigationRootId(items, activeItemId) {
   for (const item of items) {
     if (item.id === activeItemId) return item.id;
-    if (item.children?.some((child) => child.id === activeItemId))
-      return item.id;
+    if (containsNavigationItem(item, activeItemId)) return item.id;
   }
   return activeItemId;
 }
+function containsNavigationItem(item, itemId) {
+  if (!itemId) return false;
+  if (item.id === itemId) return true;
+  return item.children?.some((child) => containsNavigationItem(child, itemId)) ?? false;
+}
+function findActiveNavigationBranch(item, activeItemId) {
+  return item.children?.find((child) => containsNavigationItem(child, activeItemId));
+}
 function getNavigationActionTitle(action) {
   return action.title || (typeof action.label === "string" ? action.label : void 0);
 }
@@ -3436,10 +3444,7 @@ function SidebarNavigationList({
   const [expandedByRoot, setExpandedByRoot] = useState(
     {}
   );
-  const canReveal = revealRequest ? items.some(
-    (item) => item.id === revealRequest.id && !item.disabled
-  ) : false;
-  const activeRootId = findNavigationRootId(items, activeItemId);
+  const canReveal = revealRequest ? items.some((item) => containsNavigationItem(item, revealRequest.id) && !item.disabled) : false;
   const toggleRoot = (id) => {
     setExpandedByRoot((current) => ({
       ...current,
@@ -3448,13 +3453,10 @@ function SidebarNavigationList({
   };
   useEffect(() => {
     if (!revealRequest || !canReveal) return;
-    setExpandedByRoot((current) => ({
-      ...current,
-      [revealRequest.id]: true
-    }));
+    setExpandedByRoot((current) => ({ ...current, [revealRequest.id]: true }));
     const frameId = window.requestAnimationFrame(() => {
       const targetElement = navRef.current?.querySelector(
-        `[data-navigation-sidebar-root-id="${CSS.escape(revealRequest.id)}"]`
+        `[data-navigation-sidebar-item-id="${CSS.escape(revealRequest.id)}"]`
       );
       if (targetElement instanceof HTMLElement) {
         targetElement.scrollIntoView({
@@ -3466,6 +3468,34 @@ function SidebarNavigationList({
     });
     return () => window.cancelAnimationFrame(frameId);
   }, [canReveal, revealRequest]);
+  const renderItems = (navigationItems, depth = 0) => navigationItems.map((item) => {
+    const isGroup = Boolean(item.children?.length);
+    const containsActiveItem = containsNavigationItem(item, activeItemId);
+    const isExpanded = !item.disabled && (expandedByRoot[item.id] ?? containsActiveItem);
+    return /* @__PURE__ */ jsxs("div", { "data-navigation-sidebar-item-id": item.id, children: [
+      /* @__PURE__ */ jsx(
+        NavButton,
+        {
+          active: containsActiveItem,
+          className: depth > 0 ? "pl-3" : void 0,
+          disabled: item.disabled,
+          icon: item.icon,
+          onClick: () => isGroup ? toggleRoot(item.id) : onNavigate?.(item.id),
+          postfix: isGroup ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsx(
+            HeadbarChevronIcon,
+            {
+              open: false,
+              sideways: true,
+              className: "text-[hsl(var(--foreground))] transition-transform duration-200",
+              style: { transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" }
+            }
+          ) }) : void 0,
+          children: item.label
+        }
+      ),
+      isGroup && isExpanded ? /* @__PURE__ */ jsx("div", { className: "mt-1 ml-3 flex flex-col gap-1 border-l border-[hsl(var(--input))] pl-2", children: renderItems(item.children ?? [], depth + 1) }) : null
+    ] }, item.id);
+  });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3478,64 +3508,7 @@ function SidebarNavigationList({
           {
             ref: navRef,
             className: "monkeys-navigation-sidebar-nav flex w-full flex-col gap-2 text-xs text-[hsl(var(--foreground))]",
-            children: items.map((item) => {
-              const isGroup = Boolean(item.children?.length);
-              const isExpanded = !item.disabled && Boolean(expandedByRoot[item.id]);
-              const isActive = activeRootId === item.id;
-              if (isGroup) {
-                return /* @__PURE__ */ jsxs("div", { "data-navigation-sidebar-root-id": item.id, children: [
-                  /* @__PURE__ */ jsx(
-                    NavButton,
-                    {
-                      active: isActive,
-                      disabled: item.disabled,
-                      icon: item.icon,
-                      onClick: () => toggleRoot(item.id),
-                      postfix: /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsx(
-                        "svg",
-                        {
-                          xmlns: "http://www.w3.org/2000/svg",
-                          width: "16",
-                          height: "16",
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          className: "shrink-0 text-[hsl(var(--foreground))] transition-transform duration-200",
-                          style: {
-                            transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
-                          },
-                          children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
-                        }
-                      ) }),
-                      children: item.label
-                    }
-                  ),
-                  isExpanded ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-col gap-1", children: item.children?.map((child) => /* @__PURE__ */ jsx(
-                    NavButton,
-                    {
-                      active: activeItemId === child.id,
-                      disabled: child.disabled,
-                      onClick: () => onNavigate?.(child.id),
-                      children: child.label
-                    },
-                    child.id
-                  )) }) : null
-                ] }, item.id);
-              }
-              return /* @__PURE__ */ jsx("div", { "data-navigation-sidebar-root-id": item.id, children: /* @__PURE__ */ jsx(
-                NavButton,
-                {
-                  active: isActive,
-                  disabled: item.disabled,
-                  icon: item.icon,
-                  onClick: () => onNavigate?.(item.id),
-                  children: item.label
-                }
-              ) }, item.id);
-            })
+            children: renderItems(items)
           }
         )
       ]
@@ -3694,22 +3667,30 @@ function Sidebar({
     ] })
   ] });
 }
-function HeadbarChevronIcon({ open }) {
+function HeadbarChevronIcon({
+  className,
+  open,
+  sideways = false,
+  style
+}) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
       "aria-hidden": "true",
       className: cn2(
-        "h-4 w-4 shrink-0 transition-transform duration-200",
-        open && "rotate-180"
+        "h-4 w-4 shrink-0",
+        !sideways && "transition-transform duration-200",
+        !sideways && open && "rotate-180",
+        className
       ),
+      style,
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+      children: /* @__PURE__ */ jsx("path", { d: sideways ? "m9 18 6-6-6-6" : "m6 9 6 6 6-6" })
     }
   );
 }
@@ -3721,6 +3702,100 @@ function getHeadbarSummaryTitle(rootLabel, childLabel) {
   const childText = childLabel.trim();
   return rootText && childText ? `${rootText} ${childText}` : void 0;
 }
+var HEADBAR_DROPDOWN_ITEM_CLASS = "relative flex w-full min-w-0 cursor-pointer select-none items-center gap-2.5 px-3 py-2 text-sm outline-none transition-colors hover:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] hover:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))] focus:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] focus:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))] data-[highlighted]:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] data-[highlighted]:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))]";
+var HEADBAR_DROPDOWN_CONTENT_STYLE = {
+  width: "max-content",
+  maxWidth: "min(20rem, var(--radix-dropdown-menu-content-available-width))",
+  background: "var(--monkeys-component-navigation-headbar-menu-background, hsl(var(--popover)))",
+  borderColor: "var(--monkeys-component-navigation-headbar-menu-border-color, hsl(var(--border)))",
+  color: "var(--monkeys-component-navigation-headbar-menu-foreground, hsl(var(--popover-foreground)))",
+  boxShadow: "var(--monkeys-component-navigation-headbar-menu-shadow, 0 10px 15px -3px rgb(0 0 0 / 0.1))"
+};
+function HeadbarDropdownItems({
+  activeItemId,
+  items,
+  menuContentRadiusClass,
+  menuItemRadiusClass,
+  onNavigate,
+  onNavigateComplete,
+  useTokenRadius
+}) {
+  return items.map((item) => {
+    const label = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      item.icon ? /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-[hsl(var(--muted-foreground))]", children: item.icon }) : null,
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn2(
+            "min-w-0 truncate",
+            Boolean(item.children?.length) && "flex-1"
+          ),
+          children: item.headbarLabel ?? item.label
+        }
+      )
+    ] });
+    if (item.children?.length) {
+      return /* @__PURE__ */ jsxs(DropdownMenu2.Sub, { children: [
+        /* @__PURE__ */ jsxs(
+          DropdownMenu2.SubTrigger,
+          {
+            disabled: item.disabled,
+            className: cn2(HEADBAR_DROPDOWN_ITEM_CLASS, menuItemRadiusClass),
+            children: [
+              label,
+              /* @__PURE__ */ jsx(HeadbarChevronIcon, { open: false, sideways: true })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(
+          DropdownMenu2.SubContent,
+          {
+            sideOffset: 4,
+            alignOffset: -6,
+            className: cn2(
+              "z-50 border p-1.5 animate-in fade-in-0 zoom-in-95",
+              menuContentRadiusClass
+            ),
+            style: {
+              ...HEADBAR_DROPDOWN_CONTENT_STYLE,
+              minWidth: "12rem"
+            },
+            children: /* @__PURE__ */ jsx(
+              HeadbarDropdownItems,
+              {
+                activeItemId,
+                items: item.children,
+                menuContentRadiusClass,
+                menuItemRadiusClass,
+                onNavigate,
+                onNavigateComplete,
+                useTokenRadius
+              }
+            )
+          }
+        ) })
+      ] }, item.id);
+    }
+    return /* @__PURE__ */ jsxs(
+      DropdownMenu2.Item,
+      {
+        disabled: item.disabled,
+        className: cn2(HEADBAR_DROPDOWN_ITEM_CLASS, menuItemRadiusClass),
+        style: getHeadbarItemStyle(item.id === activeItemId, useTokenRadius),
+        onSelect: () => {
+          if (item.disabled) return;
+          onNavigateComplete();
+          onNavigate?.(item.id);
+        },
+        children: [
+          label,
+          item.trailing
+        ]
+      },
+      item.id
+    );
+  });
+}
 function HeadbarNavMenuItem({
   activeItemId,
   compound,
@@ -3764,13 +3839,13 @@ function HeadbarNavMenuItem({
   };
   useEffect(() => clearCloseTimer, []);
   return /* @__PURE__ */ jsxs(
-    DropdownMenu.Root,
+    DropdownMenu2.Root,
     {
       modal: false,
       open: isOpen,
       onOpenChange: (nextOpen) => setOpen(!item.disabled && nextOpen),
       children: [
-        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
           BaseButton,
           {
             appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
@@ -3816,8 +3891,8 @@ function HeadbarNavMenuItem({
             )
           }
         ) }),
-        /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
-          DropdownMenu.Content,
+        /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(
+          DropdownMenu2.Content,
           {
             align: "start",
             sideOffset: 5,
@@ -3829,40 +3904,22 @@ function HeadbarNavMenuItem({
               menuContentRadiusClass
             ),
             style: {
-              width: "max-content",
+              ...HEADBAR_DROPDOWN_CONTENT_STYLE,
               minWidth: "var(--radix-dropdown-menu-trigger-width)",
-              maxWidth: "min(20rem, var(--radix-dropdown-menu-content-available-width))",
-              background: "var(--monkeys-component-navigation-headbar-menu-background, hsl(var(--popover)))",
-              borderColor: "var(--monkeys-component-navigation-headbar-menu-border-color, hsl(var(--border)))",
-              color: "var(--monkeys-component-navigation-headbar-menu-foreground, hsl(var(--popover-foreground)))",
-              boxShadow: "var(--monkeys-component-navigation-headbar-menu-shadow, 0 10px 15px -3px rgb(0 0 0 / 0.1))",
               backdropFilter: "blur(var(--monkeys-component-navigation-headbar-menu-backdrop-blur, 0px))"
             },
-            children: item.children?.map((child) => /* @__PURE__ */ jsxs(
-              DropdownMenu.Item,
+            children: /* @__PURE__ */ jsx(
+              HeadbarDropdownItems,
               {
-                disabled: child.disabled,
-                className: cn2(
-                  "relative flex w-full min-w-0 cursor-pointer select-none items-center gap-2.5 px-3 py-2 text-sm outline-none transition-colors hover:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] hover:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))] focus:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] focus:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))] data-[highlighted]:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] data-[highlighted]:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))]",
-                  menuItemRadiusClass
-                ),
-                style: getHeadbarItemStyle(
-                  child.id === activeItemId,
-                  useTokenRadius
-                ),
-                onSelect: () => {
-                  if (child.disabled) return;
-                  setOpen(false);
-                  onNavigate?.(child.id);
-                },
-                children: [
-                  child.icon ? /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-[hsl(var(--muted-foreground))]", children: child.icon }) : null,
-                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: child.headbarLabel ?? child.label }),
-                  child.trailing
-                ]
-              },
-              child.id
-            ))
+                activeItemId,
+                items: item.children ?? [],
+                menuContentRadiusClass,
+                menuItemRadiusClass,
+                onNavigate,
+                onNavigateComplete: () => setOpen(false),
+                useTokenRadius
+              }
+            )
           }
         ) })
       ]
@@ -3888,9 +3945,7 @@ function NavigationHeadbarMenu({
     const isActive = activeRootId === item.id || activeItemId === item.id;
     const hasSecondaryAction = Boolean(item.headbarSecondaryAction);
     const rootLabel = item.headbarLabel ?? item.label;
-    const activeChild = item.children?.find(
-      (child) => child.id === activeItemId
-    );
+    const activeChild = findActiveNavigationBranch(item, activeItemId);
     const activeChildLabel = activeChild ? activeChild.headbarLabel ?? activeChild.label : void 0;
     const label = activeChild ? /* @__PURE__ */ jsxs(
       "span",
@@ -4096,6 +4151,9 @@ function NavigationLayout({
   className,
   collapsedSidebarAccountMenu,
   collapsedSidebarWidth = NAVIGATION_LAYOUT_SIDEBAR_COLLAPSED_WIDTH,
+  contextualSidebar = false,
+  contextualSidebarHeader,
+  contextualSidebarWidth = NAVIGATION_LAYOUT_CONTEXTUAL_SIDEBAR_WIDTH,
   defaultMode = "headbar",
   defaultSidebarCollapsed = false,
   expandedSidebarWidth = NAVIGATION_LAYOUT_SIDEBAR_EXPANDED_WIDTH,
@@ -4127,6 +4185,9 @@ function NavigationLayout({
   const sidebarCollapsed = isSidebarCollapsedControlled ? controlledSidebarCollapsed : uncontrolledSidebarCollapsed;
   const isHeadbarMode = navigationMode === "headbar";
   const sidebarWidth = sidebarCollapsed ? collapsedSidebarWidth : expandedSidebarWidth;
+  const resolvedActiveRootId = activeRootId ?? findNavigationRootId(navItems, activeItemId);
+  const activeRoot = navItems.find((item) => item.id === resolvedActiveRootId);
+  const contextualItems = activeRoot?.children ?? [];
   useEffect(() => {
     if (!isModeControlled) {
       setUncontrolledMode(defaultMode);
@@ -4197,7 +4258,25 @@ function NavigationLayout({
       }
     )
   });
-  const sidebar = isHeadbarMode ? null : /* @__PURE__ */ jsx(
+  const sidebar = isHeadbarMode && contextualSidebar && contextualItems.length ? /* @__PURE__ */ jsx(
+    "aside",
+    {
+      className: "relative h-full min-h-0 shrink-0 overflow-hidden",
+      "data-navigation-contextual-sidebar": resolvedActiveRootId,
+      style: { width: contextualSidebarWidth },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 w-full flex-col gap-3 rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))] px-4 py-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 px-2 text-sm font-semibold text-[hsl(var(--foreground))]", children: contextualSidebarHeader ?? activeRoot?.label }),
+        /* @__PURE__ */ jsx(
+          SidebarNavigationList,
+          {
+            activeItemId,
+            items: contextualItems,
+            onNavigate
+          }
+        )
+      ] })
+    }
+  ) : isHeadbarMode ? null : /* @__PURE__ */ jsx(
     "div",
     {
       className: cn2(
@@ -4236,7 +4315,7 @@ function NavigationLayout({
     NavigationHeadbar,
     {
       activeItemId,
-      activeRootId: activeRootId ?? findNavigationRootId(navItems, activeItemId),
+      activeRootId: resolvedActiveRootId,
       actions: allowModeSwitch ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
         headbarActions,
         /* @__PURE__ */ jsx(