@orsetra/shared-ui 1.5.2 → 1.5.4

package/components/layout/layout-container.tsx

@@ -106,6 +106,7 @@ function LayoutContent({
           main_base_url={main_base_url}
           sectionLabels={sectionLabels}
           getCurrentMenuItem={getCurrentMenuItem}
+          mainMenuItems={mainMenuItems}
         />
       )}
 

package/components/layout/sidebar/sidebar.tsx

@@ -20,7 +20,7 @@ import {
 } from "../../ui/tooltip"
 import { Menu } from "lucide-react"
 import { Logo } from "../../ui/logo"
-import { type SidebarMenus, type SubMenuItem } from "./data"
+import { type SidebarMenus, type SubMenuItem, type MainMenuItem } from "./data"
 import { Skeleton } from "../skeleton"
 
 const SIDEBAR_STORAGE_KEY = "sidebar:state"
@@ -179,11 +179,12 @@ interface SidebarProps {
   main_base_url?: string
   sectionLabels?: Record<string, string>
   getCurrentMenuItem?: (pathname: string, searchParams: URLSearchParams) => string
+  mainMenuItems?: MainMenuItem[]
 }
 
 
 
-function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "", sectionLabels = {}, getCurrentMenuItem }: SidebarProps = {}) {
+function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "", sectionLabels = {}, getCurrentMenuItem, mainMenuItems = [] }: SidebarProps = {}) {
   const pathname = usePathname()
   const searchParams = useSearchParams()
   const { state, toggleSidebar } = useSidebar()
@@ -238,6 +239,37 @@ 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 shown in collapsed mode, excluding the current secondary menu */}
+        {isCollapsed && mainMenuItems.length > 0 && (
+          <>
+            {mainMenuItems.filter((item) => item.id !== currentMenu).map((item) => {
+              const href = `${main_base_url}/${item.id}`
+              const isActive = currentMenu === item.id
+              const linkEl = (
+                <Link
+                  key={item.id}
+                  href={href.startsWith('http') ? new URL(href).pathname : href}
+                  className={cn(
+                    "flex items-center justify-center p-2 transition-colors border-l-4",
+                    isActive
+                      ? "bg-interactive/10 text-interactive border-interactive"
+                      : "text-text-secondary hover:bg-ui-background hover:text-text-primary border-transparent"
+                  )}
+                >
+                  <item.icon className={cn("h-4 w-4 flex-shrink-0", isActive ? "text-interactive" : "text-text-secondary")} />
+                </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-1" />
+          </>
+        )}
+
         {currentNavigation.map((item) => {
           const activeItemId = getCurrentMenuItem ? getCurrentMenuItem(pathname, searchParams) : null
           const isActive = activeItemId
@@ -265,7 +297,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
                   : "text-text-secondary hover:bg-ui-background hover:text-text-primary border-transparent"
               )}
             >
-              <item.icon className={cn("h-4 w-4 flex-shrink-0", isActive ? "text-interactive" : "text-text-secondary")} />
+              <item.icon className={cn("h-4 w-4 flex-shrink-0", isActive ? "text-interactive" : "text-ibm-blue-50")} />
               {!isCollapsed && item.name}
             </Link>
           )

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

@@ -14,7 +14,10 @@ export interface DetailPageHeaderTab {
   id: string
   label: string
   icon?: ElementType
-  href: string
+  /** Navigate to a URL when the tab is clicked */
+  href?: string
+  /** Call a callback instead of navigating (for state-based tab switching) */
+  action?: () => void
 }
 
 export interface DetailPageHeaderProps {
@@ -104,16 +107,20 @@ export function DetailPageHeader({
           {tabBar?.map((tab) => {
             const Icon = tab.icon
             const isActive = activeTab === tab.id
+            const tabClassName = `inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium transition-colors whitespace-nowrap ${
+              isActive ? TAB_ACTIVE : TAB_INACTIVE
+            }`
+            const content = <>{Icon && <Icon className="h-4 w-4" />}{tab.label}</>
+            if (tab.action) {
+              return (
+                <button key={tab.id} type="button" onClick={tab.action} className={tabClassName}>
+                  {content}
+                </button>
+              )
+            }
             return (
-              <Link
-                key={tab.id}
-                href={tab.href}
-                className={`inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium transition-colors whitespace-nowrap ${
-                  isActive ? TAB_ACTIVE : TAB_INACTIVE
-                }`}
-              >
-                {Icon && <Icon className="h-4 w-4" />}
-                {tab.label}
+              <Link key={tab.id} href={tab.href!} className={tabClassName}>
+                {content}
               </Link>
             )
           })}

package/package.json

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