@orsetra/shared-ui 1.5.4 → 1.5.6

package/components/layout/layout-container.tsx

@@ -61,6 +61,7 @@ function LayoutContent({
           id: item.id,
           label: item.label,
           icon: resolveIcon(item.icon),
+          href: item.href,
         }))
       )
 

package/components/layout/sidebar/data.tsx

@@ -29,6 +29,7 @@ export interface MainMenuItem {
   id: string
   label: string
   icon: LucideIcon
+  href?: string
 }
 
 export interface SubMenuItem {
@@ -58,6 +59,7 @@ export interface ApiMainMenuItem {
   id: string
   label: string
   icon: string
+  href?: string
 }
 
 export interface ApiSubMenuItem {

package/components/layout/sidebar/sidebar.tsx

@@ -195,6 +195,12 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
 
   const isCollapsed = state === "collapsed"
 
+  const filteredMainItems = React.useMemo(() => {
+    if (!isCollapsed || mainMenuItems.length === 0) return []
+    const navIds = new Set(currentNavigation.map((n) => n.id))
+    return mainMenuItems.filter((item) => !navIds.has(item.id))
+  }, [isCollapsed, mainMenuItems, currentNavigation])
+
   return (
     <div
       className="h-screen sticky top-0 flex flex-col bg-gray-50 min-w-[var(--sidebar-width-icon)] transition-[width] duration-200 overflow-visible"
@@ -239,24 +245,28 @@ 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 && (
+        {/* Main menu items — only in collapsed mode, above secondary items */}
+        {filteredMainItems.length > 0 && (
           <>
-            {mainMenuItems.filter((item) => item.id !== currentMenu).map((item) => {
-              const href = `${main_base_url}/${item.id}`
+            {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.startsWith('http') ? new URL(href).pathname : href}
+                  href={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"
+                      ? "bg-interactive/10 border-interactive"
+                      : "hover:bg-ui-background border-transparent"
                   )}
                 >
-                  <item.icon className={cn("h-4 w-4 flex-shrink-0", isActive ? "text-interactive" : "text-text-secondary")} />
+                  <item.icon
+                    className="h-4 w-4 flex-shrink-0"
+                    style={{ color: isActive ? '#0f62fe' : '#8d8d8d' }}
+                  />
                 </Link>
               )
               return (
@@ -266,7 +276,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
                 </Tooltip>
               )
             })}
-            <div className="border-t border-ui-border mx-1 my-1" />
+            <div className="border-t border-ui-border mx-1 my-2" />
           </>
         )}
 
@@ -297,7 +307,10 @@ 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-ibm-blue-50")} />
+              <item.icon
+                className="h-4 w-4 flex-shrink-0"
+                style={{ color: isActive ? '#0f62fe' : '#4589ff' }}
+              />
               {!isCollapsed && item.name}
             </Link>
           )

package/package.json

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