@orsetra/shared-ui 1.9.1 → 1.9.2

package/components/layout/layout-container.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react"
 import { usePathname, useSearchParams, useParams } from "next/navigation"
 import { MainSidebar, type SidebarMode } from "./sidebar/main-sidebar"
 import { Sidebar, SidebarProvider, useSidebar } from "./sidebar/sidebar"
-import { type SidebarMenus, type MainMenuItem, resolveIcon } from "./sidebar/data"
+import { type SidebarMenus, type MainMenuItem, type SidebarMenuMeta, resolveIcon } from "./sidebar/data"
 import { Button } from "../ui"
 import { Logo } from "../ui/logo"
 import { getMenuFromPath } from "../../lib/menu-utils"
@@ -50,6 +50,7 @@ function LayoutContent({
   const [mainMenuItems, setMainMenuItems] = useState<MainMenuItem[]>([])
   const [fetchedSidebarMenus, setFetchedSidebarMenus] = useState<SidebarMenus>({})
   const [sectionLabels, setSectionLabels] = useState<Record<string, string>>({})
+  const [sidebarMenuMeta, setSidebarMenuMeta] = useState<Record<string, SidebarMenuMeta>>({})
 
   useEffect(() => {
     if (!fetchMenus) return
@@ -69,6 +70,7 @@ function LayoutContent({
 
       const menus: SidebarMenus = {}
       const labels: Record<string, string> = {}
+      const meta: Record<string, SidebarMenuMeta> = {}
       Object.entries(subMenus).forEach(([key, subMenu]) => {
         menus[key] = subMenu.items.map((item) => ({
           id: item.id,
@@ -78,9 +80,11 @@ function LayoutContent({
           icon: resolveIcon(item.icon),
         }))
         labels[key] = subMenu.header
+        meta[key] = { header: subMenu.header, description: subMenu.description }
       })
       setFetchedSidebarMenus(menus)
       setSectionLabels(labels)
+      setSidebarMenuMeta(meta)
     })
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
@@ -148,6 +152,7 @@ function LayoutContent({
           mode={isHidden ? "expanded" : mode}
           sidebarMenus={effectiveSidebarMenus}
           mainMenuItems={mainMenuItems}
+          sidebarMenuMeta={sidebarMenuMeta}
         />
 
         <main className="flex-1 bg-ibm-gray-10 min-h-0 overflow-auto">

package/components/layout/sidebar/data.tsx

@@ -88,9 +88,15 @@ export interface ApiSubMenuItem {
 }
 
 export interface ApiSubMenu {
-  id: string
-  header: string
-  items: ApiSubMenuItem[]
+  id:           string
+  header:       string
+  description?: string
+  items:        ApiSubMenuItem[]
+}
+
+export interface SidebarMenuMeta {
+  header?:      string
+  description?: string
 }
 
 export interface ApiMenuData {

package/components/layout/sidebar/main-sidebar-flyout.tsx

@@ -13,14 +13,14 @@ export interface FlyoutDefaultLink {
 }
 
 interface MainSidebarFlyoutProps {
-  item:                 MainMenuItem | null
-  subItems:             SubMenuItem[]
-  onMouseEnter:         () => void
-  onMouseLeave:         () => void
-  main_base_url?:       string
-  defaultTitle?:        string
-  defaultDescription?:  string
-  defaultLinks?:        FlyoutDefaultLink[]
+  item:                MainMenuItem | null
+  subItems:            SubMenuItem[]
+  onMouseEnter:        () => void
+  onMouseLeave:        () => void
+  main_base_url?:      string
+  defaultTitle?:       string
+  defaultDescription?: string
+  defaultLinks?:       FlyoutDefaultLink[]
 }
 
 export function MainSidebarFlyout({
@@ -92,35 +92,26 @@ export function MainSidebarFlyout({
           </nav>
         </>
       ) : (
-        /* ── Default state: welcome + CTA + doc links ───────────────────── */
-        <div className="flex flex-col h-full">
-          {/* Header */}
-          <div className="px-5 pt-6 pb-5 border-b border-ui-border flex-shrink-0">
-            <div className="flex items-center gap-2.5 mb-3">
-              <div className="h-8 w-8 rounded-md bg-interactive flex items-center justify-center flex-shrink-0">
-                <Home className="h-4 w-4 text-white" />
-              </div>
-              <span className="text-sm font-semibold text-text-primary truncate">{defaultTitle}</span>
-            </div>
-
+        /* ── Default state: centré verticalement ────────────────────────── */
+        <div className="flex flex-col h-full items-center justify-center px-6 gap-6">
+          {/* Titre + texte + CTA */}
+          <div className="flex flex-col items-center gap-3 w-full">
+            <span className="text-sm font-semibold text-text-primary text-center">{defaultTitle}</span>
             {defaultDescription && (
-              <p className="text-xs text-text-secondary leading-relaxed mb-4">
-                {defaultDescription}
-              </p>
+              <p className="text-xs text-text-secondary text-center leading-relaxed">{defaultDescription}</p>
             )}
-
             <a
               href={homePath}
-              className="flex items-center justify-center gap-2 w-full px-3 py-2 bg-interactive hover:bg-interactive-hover text-white text-sm font-medium transition-colors"
+              className="flex items-center justify-center gap-2 w-full px-3 py-2 border border-ui-border text-text-secondary hover:text-text-primary hover:bg-ui-background text-sm font-medium transition-colors"
             >
               <Home className="h-4 w-4 flex-shrink-0" />
               Tableau de bord
             </a>
           </div>
 
-          {/* Doc / resource links */}
+          {/* Liens ressources */}
           {defaultLinks.length > 0 && (
-            <nav className="flex-1 overflow-y-auto px-2 lg:px-3 py-3 space-y-0.5">
+            <nav className="w-full space-y-0.5">
               <p className="px-2 pb-1 text-[10px] font-semibold text-text-secondary uppercase tracking-widest">
                 Ressources
               </p>
@@ -132,7 +123,7 @@ export function MainSidebarFlyout({
                     key={i}
                     href={link.href}
                     {...(isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}
-                    className="flex items-start gap-x-3 px-2 lg:px-3 py-2 border-l-4 border-transparent hover:bg-ui-background hover:border-interactive transition-colors"
+                    className="flex items-start gap-x-3 px-2 py-2 border-l-4 border-transparent hover:bg-ui-background hover:border-interactive transition-colors"
                   >
                     <LinkIcon className="h-4 w-4 flex-shrink-0 mt-0.5 text-text-secondary" />
                     <div className="min-w-0 flex-1">

package/components/layout/sidebar/main-sidebar.tsx

@@ -4,7 +4,9 @@ import * as React from "react"
 import { cn } from "../../../lib/utils"
 import { Button } from "../../ui/button"
 import { Logo } from "../../ui/logo"
-import { type MainMenuItem, type SidebarMenus } from "./data"
+import { type MainMenuItem, type SidebarMenus, type SidebarMenuMeta } from "./data"
+
+export type { SidebarMenuMeta }
 import { X, Menu, ChevronDown, ChevronRight } from "lucide-react"
 import { useIsMobile } from "../../../hooks/use-mobile"
 import { MainSidebarFlyout, type FlyoutDefaultLink } from "./main-sidebar-flyout"
@@ -23,9 +25,8 @@ interface MainSidebarProps {
   onSecondarySidebarOpen?: () => void
   sidebarMenus?: SidebarMenus
   mainMenuItems?: MainMenuItem[]
-  flyoutDefaultTitle?:        string
-  flyoutDefaultDescription?:  string
-  flyoutDefaultLinks?:        FlyoutDefaultLink[]
+  /** Per-submenu metadata (header + description) derived from the API menu response. */
+  sidebarMenuMeta?: Record<string, SidebarMenuMeta>
 }
 
 export function MainSidebar({
@@ -38,9 +39,7 @@ export function MainSidebar({
   onSecondarySidebarOpen,
   sidebarMenus = {},
   mainMenuItems = [],
-  flyoutDefaultTitle,
-  flyoutDefaultDescription,
-  flyoutDefaultLinks = [],
+  sidebarMenuMeta = {},
 }: MainSidebarProps) {
   const isMinimized = mode === 'minimized'
   const isMobile = useIsMobile()
@@ -153,6 +152,17 @@ export function MainSidebar({
     }
   }
 
+  // Default flyout content derived from the "main" submenu in the loaded menu data
+  const mainMeta     = sidebarMenuMeta["main"] ?? {}
+  const defaultTitle = mainMeta.header      ?? "Camel X Platform"
+  const defaultDesc  = mainMeta.description ?? undefined
+  const defaultLinks: FlyoutDefaultLink[] = (sidebarMenus["main"] ?? []).map(sub => ({
+    label:       sub.name,
+    href:        sub.href,
+    description: sub.description,
+    icon:        sub.icon,
+  }))
+
   const handleSubMenuClick = (e: React.MouseEvent, menuId: string, href: string) => {
     e.preventDefault()
     window.location.href = buildSubItemHref(menuId, href)
@@ -302,9 +312,9 @@ export function MainSidebar({
             onMouseEnter={cancelCloseTimer}
             onMouseLeave={startCloseTimer}
             main_base_url={main_base_url}
-            defaultTitle={flyoutDefaultTitle}
-            defaultDescription={flyoutDefaultDescription}
-            defaultLinks={flyoutDefaultLinks}
+            defaultTitle={defaultTitle}
+            defaultDescription={defaultDesc}
+            defaultLinks={defaultLinks}
           />
         )}
 

package/package.json

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