@orsetra/shared-ui 1.8.4 → 1.9.0

package/components/layout/layout-container.tsx

@@ -6,6 +6,7 @@ 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 { Button } from "../ui"
+import { Logo } from "../ui/logo"
 import { getMenuFromPath } from "../../lib/menu-utils"
 import { useIsMobile } from "../../hooks/use-mobile"
 import { Menu } from "lucide-react"
@@ -100,51 +101,54 @@ function LayoutContent({
   const handleSecondarySidebarOpen = () => setOpen(true)
 
   return (
-    <div className="flex h-screen w-full bg-white overflow-hidden">
-      {!isMinimized && !isHidden && (
-        <Sidebar
+    <div className="flex flex-col h-screen w-full bg-white overflow-hidden">
+      <header className="h-14 bg-gray-50 border-b border-ui-border flex-shrink-0">
+        <div className="h-full flex items-center justify-between">
+          <div
+            className="h-full flex items-center justify-between flex-shrink-0 px-4 md:px-6"
+            style={{ width: 'var(--sidebar-width)' }}
+          >
+            <Logo href={main_base_url} />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleMainSidebarToggle}
+              className="h-8 w-8 p-0 hover:bg-ui-background text-text-secondary"
+              title="Menu principal"
+            >
+              <Menu className="h-5 w-5" />
+            </Button>
+          </div>
+          <div className="flex-1 flex items-center justify-end px-4 md:px-6">
+            <UserPanel main_base_url={main_base_url} />
+          </div>
+        </div>
+      </header>
+
+      <div className="flex flex-1 min-h-0 overflow-hidden">
+        {!isMinimized && !isHidden && (
+          <Sidebar
+            currentMenu={currentMenu}
+            onMainMenuToggle={handleMainSidebarToggle}
+            sidebarMenus={effectiveSidebarMenus}
+            main_base_url={main_base_url}
+            sectionLabels={sectionLabels}
+            getCurrentMenuItem={getCurrentMenuItem}
+            mainMenuItems={mainMenuItems}
+          />
+        )}
+
+        <MainSidebar
+          main_base_url={main_base_url}
+          isOpen={isMainSidebarOpen}
+          onToggle={handleMainSidebarToggle}
+          onMenuSelect={handleMenuSelect}
           currentMenu={currentMenu}
-          onMainMenuToggle={handleMainSidebarToggle}
+          onSecondarySidebarOpen={handleSecondarySidebarOpen}
+          mode={isHidden ? "expanded" : mode}
           sidebarMenus={effectiveSidebarMenus}
-          main_base_url={main_base_url}
-          sectionLabels={sectionLabels}
-          getCurrentMenuItem={getCurrentMenuItem}
           mainMenuItems={mainMenuItems}
         />
-      )}
-
-      <MainSidebar
-        main_base_url={main_base_url}
-        isOpen={isMainSidebarOpen}
-        onToggle={handleMainSidebarToggle}
-        onMenuSelect={handleMenuSelect}
-        currentMenu={currentMenu}
-        onSecondarySidebarOpen={handleSecondarySidebarOpen}
-        mode={isHidden ? "expanded" : mode}
-        sidebarMenus={effectiveSidebarMenus}
-        mainMenuItems={mainMenuItems}
-      />
-
-      <div className="flex-1 flex flex-col min-w-0">
-        <header className="h-14 bg-gray-50 border-b border-ui-border flex-shrink-0">
-          <div className="h-full px-4 md:px-6 flex items-center justify-between">
-            {isHidden ? (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleMainSidebarToggle}
-                className="h-8 w-8 p-0 hover:bg-ui-background text-text-secondary"
-                title="Ouvrir le menu"
-              >
-                <Menu className="h-5 w-5" />
-              </Button>
-            ) : (
-              <div />
-            )}
-
-            <UserPanel main_base_url={main_base_url} />
-          </div>
-        </header>
 
         <main className="flex-1 bg-ibm-gray-10 min-h-0 overflow-auto">
           {children}

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

@@ -119,7 +119,8 @@ export function MainSidebar({
         The flyout is never "in front of" the nav; it's always to its right.
       */}
       <div className={cn(
-        "fixed left-0 top-0 h-full z-50 flex",
+        "fixed left-0 z-50 flex",
+        isMinimized ? "top-14 h-[calc(100%-3.5rem)]" : "top-0 h-full",
         "transform transition-all duration-300 ease-in-out",
         isMinimized ? "translate-x-0" : (isOpen ? "translate-x-0" : "-translate-x-full"),
       )}>
@@ -131,27 +132,20 @@ export function MainSidebar({
           // Shadow only when flyout is not open (avoid double shadow)
           !hoveredItem && !isMinimized && "shadow-xl",
         )}>
-          {/* Header */}
-          <div className={cn(
-            "flex items-center h-14 bg-white sticky top-0 z-10 flex-shrink-0",
-            isMinimized ? "justify-center px-2" : "justify-between px-3 lg:px-4",
-          )}>
-            {isMinimized ? (
-              <Logo className="text-xl font-semibold text-text-primary" iconOnly href={main_base_url} />
-            ) : (
-              <>
-                <Logo className="text-2xl font-semibold text-text-primary" href={main_base_url} />
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={onToggle}
-                  className="h-8 w-8 p-0 hover:bg-ui-background text-text-secondary"
-                >
-                  <X className="h-4 w-4" />
-                </Button>
-              </>
-            )}
-          </div>
+          {/* Header — only in overlay (non-minimized) mode; logo lives in the global header */}
+          {!isMinimized && (
+            <div className="flex items-center justify-between h-14 bg-white sticky top-0 z-10 flex-shrink-0 px-3 lg:px-4">
+              <Logo className="text-2xl font-semibold text-text-primary" href={main_base_url} />
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onToggle}
+                className="h-8 w-8 p-0 hover:bg-ui-background text-text-secondary"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          )}
 
           {/* Nav items */}
           <nav className={cn("flex-1 space-y-0.5 lg:space-y-1", isMinimized ? "p-2" : "p-2 lg:p-3")}>
@@ -172,8 +166,8 @@ export function MainSidebar({
                 "w-full flex items-center text-left transition-all duration-150 font-medium",
                 isMinimized ? "justify-center p-2 lg:p-3" : "gap-2 lg:gap-3 px-2 lg:px-3 py-1.5 lg:py-2",
                 isActive || isFlyActive
-                  ? "bg-interactive/20 text-interactive border-l-4 border-interactive"
-                  : "text-text-primary hover:bg-gray-100 border-l-4 border-transparent",
+                  ? "bg-ibm-blue-10 text-interactive border-l-4 border-interactive"
+                  : "text-text-primary hover:bg-ibm-gray-10 border-l-4 border-transparent",
               )
 
               const itemContent = (

package/components/layout/sidebar/sidebar.tsx

@@ -18,8 +18,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "../../ui/tooltip"
-import { Menu } from "lucide-react"
-import { Logo } from "../../ui/logo"
 import { type SidebarMenus, type SubMenuItem, type MainMenuItem } from "./data"
 import { Skeleton } from "../skeleton"
 
@@ -232,7 +230,7 @@ interface SidebarProps {
 
 
 
-function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "", sectionLabels = {}, getCurrentMenuItem, mainMenuItems = [] }: SidebarProps = {}) {
+function Sidebar({ currentMenu, sidebarMenus = {}, main_base_url = "", sectionLabels = {}, getCurrentMenuItem, mainMenuItems = [] }: SidebarProps = {}) {
   const pathname    = usePathname()
   const searchParams = useSearchParams()
   const router      = useRouter()
@@ -259,36 +257,9 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
 
   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"
+      className="h-full flex-shrink-0 flex flex-col bg-gray-50 min-w-[var(--sidebar-width-icon)] transition-[width] duration-200 overflow-visible"
       style={{ width: isCollapsed ? "var(--sidebar-width-icon)" : "var(--sidebar-width)" }}
     >
-      {/* Header */}
-      <div className={cn(
-        "h-14 flex items-center flex-shrink-0",
-        isCollapsed ? "justify-center px-2" : "justify-between px-4"
-      )}>
-        {isCollapsed ? (
-          <button type="button" onClick={toggleSidebar} title="Expand sidebar" className="flex items-center justify-center">
-            <Logo iconOnly />
-          </button>
-        ) : (
-          <>
-            <Logo />
-            {onMainMenuToggle && (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={onMainMenuToggle}
-                className="h-8 w-8 p-0 hover:bg-ui-background rounded-lg"
-                title="Ouvrir le menu principal"
-              >
-                <Menu className="h-4 w-4" />
-              </Button>
-            )}
-          </>
-        )}
-      </div>
-
       {/* Section label — hidden when collapsed */}
       {!isCollapsed && (
         injectedItems === undefined ? (

package/package.json

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