@orsetra/shared-ui 1.5.6 → 1.5.8

package/components/layout/sidebar/sidebar.tsx

@@ -197,9 +197,10 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
 
   const filteredMainItems = React.useMemo(() => {
     if (!isCollapsed || mainMenuItems.length === 0) return []
+    // Exclude items that match the current menu context OR appear in the secondary nav
     const navIds = new Set(currentNavigation.map((n) => n.id))
-    return mainMenuItems.filter((item) => !navIds.has(item.id))
-  }, [isCollapsed, mainMenuItems, currentNavigation])
+    return mainMenuItems.filter((item) => item.id !== currentMenu && !navIds.has(item.id))
+  }, [isCollapsed, mainMenuItems, currentNavigation, currentMenu])
 
   return (
     <div
@@ -212,7 +213,9 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
         isCollapsed ? "justify-center px-2" : "justify-between px-4"
       )}>
         {isCollapsed ? (
-          <Logo iconOnly />
+          <button type="button" onClick={toggleSidebar} title="Expand sidebar" className="flex items-center justify-center">
+            <Logo iconOnly />
+          </button>
         ) : (
           <>
             <Logo />
@@ -245,41 +248,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
         "flex-1 overflow-y-auto",
         isCollapsed ? "px-1 py-3 space-y-0.5" : "px-3 py-4 space-y-1"
       )}>
-        {/* Main menu items — only in collapsed mode, above secondary items */}
-        {filteredMainItems.length > 0 && (
-          <>
-            {filteredMainItems.map((item) => {
-              const rawHref = item.href || `${main_base_url}/${item.id}`
-              const href = rawHref.startsWith('http') ? new URL(rawHref).pathname : rawHref
-              const isActive = currentMenu === item.id
-              const linkEl = (
-                <Link
-                  key={item.id}
-                  href={href}
-                  className={cn(
-                    "flex items-center justify-center p-2 transition-colors border-l-4",
-                    isActive
-                      ? "bg-interactive/10 border-interactive"
-                      : "hover:bg-ui-background border-transparent"
-                  )}
-                >
-                  <item.icon
-                    className="h-4 w-4 flex-shrink-0"
-                    style={{ color: isActive ? '#0f62fe' : '#8d8d8d' }}
-                  />
-                </Link>
-              )
-              return (
-                <Tooltip key={item.id}>
-                  <TooltipTrigger asChild>{linkEl}</TooltipTrigger>
-                  <TooltipContent side="right" align="center">{item.label}</TooltipContent>
-                </Tooltip>
-              )
-            })}
-            <div className="border-t border-ui-border mx-1 my-2" />
-          </>
-        )}
-
+        {/* Secondary nav items */}
         {currentNavigation.map((item) => {
           const activeItemId = getCurrentMenuItem ? getCurrentMenuItem(pathname, searchParams) : null
           const isActive = activeItemId
@@ -325,6 +294,35 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
           }
           return linkEl
         })}
+
+        {/* Main menu items — only in collapsed mode, below secondary items, neutral color */}
+        {filteredMainItems.length > 0 && (
+          <>
+            <div className="border-t border-ui-border mx-1 my-2" />
+            {filteredMainItems.map((item) => {
+              const rawHref = item.href || `${main_base_url}/${item.id}`
+              const href = rawHref.startsWith('http') ? new URL(rawHref).pathname : rawHref
+              const linkEl = (
+                <Link
+                  key={item.id}
+                  href={href}
+                  className="flex items-center justify-center p-2 transition-colors border-l-4 border-transparent hover:bg-ui-background"
+                >
+                  <item.icon
+                    className="h-4 w-4 flex-shrink-0"
+                    style={{ color: '#8d8d8d' }}
+                  />
+                </Link>
+              )
+              return (
+                <Tooltip key={item.id}>
+                  <TooltipTrigger asChild>{linkEl}</TooltipTrigger>
+                  <TooltipContent side="right" align="center">{item.label}</TooltipContent>
+                </Tooltip>
+              )
+            })}
+          </>
+        )}
       </nav>
 
       {/* Collapse / expand toggle */}

package/components/ui/detail-page-header.tsx

@@ -29,6 +29,8 @@ export interface DetailPageHeaderProps {
   icon?: ReactNode
   /** Page title – truncated to one line */
   title: string
+  /** Optional ReactNode rendered instead of title string (e.g. editable title) */
+  titleNode?: ReactNode
   /** Optional subtitle – truncated to one line */
   description?: string
   /** Slot for badges, status buttons, action buttons placed to the right */
@@ -48,6 +50,7 @@ export function DetailPageHeader({
   backLabel,
   icon,
   title,
+  titleNode,
   description,
   actions,
   tabBar,
@@ -80,7 +83,7 @@ export function DetailPageHeader({
             )}
             <div className="min-w-0">
               <h1 className="text-lg font-semibold text-ibm-gray-100 leading-tight truncate">
-                {title}
+                {titleNode ?? title}
               </h1>
               {description && (
                 <p className="text-xs text-ibm-gray-50 mt-0.5 truncate">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.5.6",
+  "version": "1.5.8",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",