@orsetra/shared-ui 1.5.1 → 1.5.3

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 */}
+        {isCollapsed && mainMenuItems.length > 0 && (
+          <>
+            {mainMenuItems.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

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

@@ -14,14 +14,17 @@ 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 {
   /** Back breadcrumb link destination */
-  backHref: string
+  backHref?: string
   /** Back breadcrumb label */
-  backLabel: string
+  backLabel?: string
   /** Optional icon rendered in a blue square container */
   icon?: ReactNode
   /** Page title – truncated to one line */
@@ -57,13 +60,15 @@ export function DetailPageHeader({
       <div className="px-4 sm:px-2 pt-1 pb-0">
 
         {/* Breadcrumb */}
-        <Link
-          href={backHref}
-          className="inline-flex items-center gap-1.5 text-xs text-ibm-gray-50 hover:text-ibm-blue-60 transition-colors mb-3"
-        >
-          <ArrowLeft className="h-3 w-3" />
-          {backLabel}
-        </Link>
+        {backHref && backLabel && (
+          <Link
+            href={backHref}
+            className="inline-flex items-center gap-1.5 text-xs text-ibm-gray-50 hover:text-ibm-blue-60 transition-colors mb-3"
+          >
+            <ArrowLeft className="h-3 w-3" />
+            {backLabel}
+          </Link>
+        )}
 
         {/* Title row */}
         <div className="flex items-center justify-between gap-4 pb-4">
@@ -102,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.1",
+  "version": "1.5.3",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",