@orsetra/shared-ui 1.4.1 → 1.5.1

package/components/layout/layout-container.tsx

@@ -122,7 +122,7 @@ function LayoutContent({
       />
 
       <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">
+        <header className="h-14 bg-gray-50 flex-shrink-0">
           <div className="h-full px-4 md:px-6 flex items-center justify-between">
             {isHidden ? (
               <Button

package/components/layout/page-with-side-panel.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { ReactNode, useState } from "react"
-import { X, ChevronLeft } from "lucide-react"
+import { X, ChevronLeft, SlidersHorizontal } from "lucide-react"
 import { Button } from "../ui/button"
 import { cn } from "../../lib/utils"
 
@@ -20,6 +20,9 @@ interface PageWithSidePanelProps {
   contentHeaderClassName?: string
   sidePanelClassName?: string
   sidePanelHeaderClassName?: string
+  /** Label for the mobile floating toggle button. When provided, a button
+   *  appears on small screens (<lg) that opens the side panel as an overlay. */
+  mobileToggleLabel?: string
 }
 
 const PANEL_WIDTHS = {
@@ -43,8 +46,10 @@ export function PageWithSidePanel({
   contentHeaderClassName,
   sidePanelClassName,
   sidePanelHeaderClassName,
+  mobileToggleLabel,
 }: PageWithSidePanelProps) {
   const [isOpen, setIsOpen] = useState(defaultOpen)
+  const [mobileOpen, setMobileOpen] = useState(false)
   const panelWidthClass = PANEL_WIDTHS[sidePanelWidth]
 
   const handleClose = () => {
@@ -131,8 +136,44 @@ export function PageWithSidePanel({
               <ChevronLeft className="h-4 w-4 text-ibm-gray-70" />
             </button>
           )}
+
+          {/* Mobile overlay — only rendered below lg breakpoint */}
+          {mobileOpen && (
+            <div className="lg:hidden fixed inset-0 z-50 flex">
+              <div className="absolute inset-0 bg-black/40" onClick={() => setMobileOpen(false)} />
+              <div className="relative ml-auto flex flex-col bg-white shadow-xl h-full w-80 max-w-[90vw]">
+                <div className={cn(
+                  "flex items-center justify-between h-14 flex-shrink-0 px-4 border-b border-ibm-gray-20",
+                  sidePanelHeaderClassName
+                )}>
+                  <div className="flex-1 min-w-0">{sidePanelHeader}</div>
+                  <Button
+                    variant="ghost"
+                    size="xs"
+                    onClick={() => setMobileOpen(false)}
+                    className="h-8 w-8 p-0 ml-2 flex-shrink-0"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+                <div className="flex-1 overflow-y-auto">{sidePanel}</div>
+              </div>
+            </div>
+          )}
         </>
       )}
+
+      {/* Mobile floating toggle button */}
+      {sidePanel && mobileToggleLabel && (
+        <button
+          onClick={() => setMobileOpen(true)}
+          className="lg:hidden fixed bottom-5 right-4 z-40 flex items-center gap-2 px-4 py-2.5 bg-ibm-blue-60 text-white text-sm font-medium shadow-lg hover:bg-ibm-blue-70 transition-colors"
+          aria-label={mobileToggleLabel}
+        >
+          <SlidersHorizontal className="h-4 w-4" />
+          {mobileToggleLabel}
+        </button>
+      )}
     </div>
   )
 }

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

@@ -6,7 +6,7 @@ import { cn } from "../../../lib/utils"
 import { Button } from "../../ui/button"
 import { Logo } from "../../ui/logo"
 import { type MainMenuItem, type SidebarMenus } from "./data"
-import { X, Menu } from "lucide-react"
+import { X, Menu, ChevronDown, ChevronRight } from "lucide-react"
 
 export type SidebarMode = 'expanded' | 'minimized' | 'hidden'
 
@@ -34,27 +34,23 @@ export function MainSidebar({
   mainMenuItems = [],
 }: MainSidebarProps) {
   const isMinimized = mode === 'minimized'
-  const [hoveredMenu, setHoveredMenu] = React.useState<string | null>(null)
-  const [flyoutPos, setFlyoutPos] = React.useState<{ top: number; left: number } | null>(null)
-  const closeTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const [expandedMenu, setExpandedMenu] = React.useState<string | null>(null)
 
+  // Reset accordion when sidebar closes
   React.useEffect(() => {
-    return () => { if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current) }
-  }, [])
+    if (!isOpen) setExpandedMenu(null)
+  }, [isOpen])
 
-  const handleFlyoutMouseEnter = (menuId: string, rect?: DOMRect) => {
-    if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)
-    if (rect) setFlyoutPos({ top: rect.top, left: rect.right + 8 })
-    setHoveredMenu(menuId)
-  }
+  const handleMenuClick = (menuId: string) => {
+    const hasSubMenu = (sidebarMenus[menuId]?.length ?? 0) > 0
 
-  const handleFlyoutMouseLeave = () => {
-    closeTimeoutRef.current = setTimeout(() => setHoveredMenu(null), 150)
-  }
+    // Accordion: expand/collapse inline for any non-minimized mode
+    if (!isMinimized && hasSubMenu) {
+      setExpandedMenu((prev) => (prev === menuId ? null : menuId))
+      return
+    }
 
-  const handleMenuClick = (menuId: string) => {
     onMenuSelect(menuId)
-
     if (!isMinimized && onSecondarySidebarOpen) {
       onSecondarySidebarOpen()
     }
@@ -84,7 +80,7 @@ export function MainSidebar({
   const handleSubMenuClick = (e: React.MouseEvent, menuId: string, href: string) => {
     e.preventDefault()
     window.location.href = buildSubItemHref(menuId, href)
-    setHoveredMenu(null)
+    setExpandedMenu(null)
   }
 
   return (
@@ -97,14 +93,14 @@ export function MainSidebar({
       )}
 
       <div className={cn(
-        "fixed left-0 top-0 h-full bg-white border-r border-ui-border z-50 transform transition-all duration-300 ease-in-out",
+        "fixed left-0 top-0 h-full bg-white border-r border-ui-border z-50 transform transition-all duration-300 ease-in-out overflow-y-auto",
         isMinimized ? "w-16" : "w-64 shadow-xl",
         isMinimized
           ? "translate-x-0"
           : (isOpen ? "translate-x-0" : "-translate-x-full")
       )}>
         <div className={cn(
-          "flex items-center h-16 border-b border-ui-border bg-white",
+          "flex items-center h-16 border-b border-ui-border bg-white sticky top-0 z-10",
           isMinimized ? "justify-center px-2" : "justify-between px-4"
         )}>
           {!isMinimized && <Logo className="text-2xl font-semibold text-text-primary" href={main_base_url} />}
@@ -122,77 +118,62 @@ export function MainSidebar({
           )}
         </div>
 
-        <div className={cn(
-          "overflow-y-auto h-full",
-          isMinimized ? "p-2" : "p-3"
-        )}>
-          <nav className="space-y-1">
-            {mainMenuItems.map((item) => {
-              const Icon = item.icon
-              const hasSubMenu = sidebarMenus[item.id]?.length > 0
-              const isActive = currentMenu === item.id
-              return (
-                <div
-                  key={item.id}
-                  className="relative"
-                  onMouseEnter={(e) => hasSubMenu && handleFlyoutMouseEnter(item.id, e.currentTarget.getBoundingClientRect())}
-                  onMouseLeave={() => hasSubMenu && handleFlyoutMouseLeave()}
+        <nav className={cn("space-y-1", isMinimized ? "p-2" : "p-3")}>
+          {mainMenuItems.map((item) => {
+            const Icon = item.icon
+            const hasSubMenu = (sidebarMenus[item.id]?.length ?? 0) > 0
+            const isActive = currentMenu === item.id
+            const isExpanded = expandedMenu === item.id
+
+            return (
+              <div key={item.id}>
+                <button
+                  onClick={() => handleMenuClick(item.id)}
+                  className={cn(
+                    "w-full flex items-center text-left transition-all duration-150 font-medium",
+                    isMinimized ? "justify-center p-3" : "gap-3 px-3 py-2",
+                    isActive
+                      ? "bg-interactive/10 text-interactive border-l-4 border-interactive"
+                      : "text-text-primary hover:bg-ui-background border-l-4 border-transparent"
+                  )}
+                  title={isMinimized ? item.label : undefined}
                 >
-                  <button
-                    onClick={() => handleMenuClick(item.id)}
-                    className={cn(
-                      "w-full flex items-center text-left transition-all duration-150 font-medium",
-                      isMinimized ? "justify-center p-3" : "gap-3 px-3 py-2",
-                      isActive
-                        ? "bg-interactive/10 text-interactive border-l-4 border-interactive"
-                        : "text-text-primary hover:bg-ui-background border-l-4 border-transparent"
-                    )}
-                    title={isMinimized ? item.label : undefined}
-                  >
-                    <Icon className={cn(
-                      "h-5 w-5 flex-shrink-0",
-                      isActive ? "text-interactive" : "text-text-secondary"
-                    )} />
-                    {!isMinimized && <span className="text-base">{item.label}</span>}
-                  </button>
-                </div>
-              )
-            })}
-          </nav>
-        </div>
-
-        {/* Flyout en position fixed : échappe overflow-y-auto et tout contexte d'empilement */}
-        {hoveredMenu && flyoutPos && sidebarMenus[hoveredMenu]?.length > 0 && (() => {
-          const activeItem = mainMenuItems.find(i => i.id === hoveredMenu)
-          if (!activeItem) return null
-          return (
-            <div
-              className="fixed bg-white border border-ui-border shadow-lg z-[9999] min-w-[220px] py-1"
-              style={{ top: flyoutPos.top, left: flyoutPos.left }}
-              onMouseEnter={() => handleFlyoutMouseEnter(hoveredMenu)}
-              onMouseLeave={handleFlyoutMouseLeave}
-            >
-              {/* Arrow pointing left */}
-              <div className="absolute -left-[5px] top-[14px] w-[10px] h-[10px] bg-white border-l border-t border-ui-border -rotate-45" />
-              <div className="px-4 py-2 border-b border-ui-border">
-                <p className="text-xs font-semibold text-text-primary uppercase tracking-wide">{activeItem.label}</p>
-              </div>
-              <div>
-                {sidebarMenus[hoveredMenu].map((subItem) => (
-                  <a
-                    key={subItem.id}
-                    href={buildSubItemHref(hoveredMenu, subItem.href)}
-                    onClick={(e) => handleSubMenuClick(e, hoveredMenu, subItem.href)}
-                    className="flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline border-l-4 border-transparent hover:border-interactive"
-                  >
-                    <subItem.icon className="h-4 w-4 flex-shrink-0 text-text-secondary" />
-                    {subItem.name}
-                  </a>
-                ))}
+                  <Icon className={cn(
+                    "h-5 w-5 flex-shrink-0",
+                    isActive ? "text-interactive" : "text-text-secondary"
+                  )} />
+                  {!isMinimized && (
+                    <>
+                      <span className="text-base flex-1">{item.label}</span>
+                      {hasSubMenu && (
+                        isExpanded
+                          ? <ChevronDown className="h-4 w-4 text-text-secondary flex-shrink-0" />
+                          : <ChevronRight className="h-4 w-4 text-text-secondary flex-shrink-0" />
+                      )}
+                    </>
+                  )}
+                </button>
+
+                {/* Inline accordion sub-items */}
+                {!isMinimized && isExpanded && hasSubMenu && (
+                  <div className="pl-4 pb-1">
+                    {sidebarMenus[item.id].map((subItem) => (
+                      <a
+                        key={subItem.id}
+                        href={buildSubItemHref(item.id, subItem.href)}
+                        onClick={(e) => handleSubMenuClick(e, item.id, subItem.href)}
+                        className="flex items-center gap-3 px-3 py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline border-l-2 border-ui-border hover:border-interactive"
+                      >
+                        <subItem.icon className="h-4 w-4 flex-shrink-0 text-text-secondary" />
+                        {subItem.name}
+                      </a>
+                    ))}
+                  </div>
+                )}
               </div>
-            </div>
-          )
-        })()}
+            )
+          })}
+        </nav>
       </div>
     </>
   )

package/components/layout/sidebar/sidebar.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { VariantProps, cva } from "class-variance-authority"
-import { PanelLeft } from "lucide-react"
+import { PanelLeft, ChevronLeft, ChevronRight } from "lucide-react"
 import Link from "next/link"
 import { usePathname, useSearchParams } from "next/navigation"
 
@@ -23,8 +23,7 @@ import { Logo } from "../../ui/logo"
 import { type SidebarMenus, type SubMenuItem } from "./data"
 import { Skeleton } from "../skeleton"
 
-const SIDEBAR_COOKIE_NAME = "sidebar:state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_STORAGE_KEY = "sidebar:state"
 const SIDEBAR_WIDTH = "14rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
@@ -75,8 +74,19 @@ const SidebarProvider = React.forwardRef<
 
     // This is the internal state of the sidebar.
     // We use openProp and setOpenProp for control from outside the component.
+    // Initialize from defaultOpen (SSR-safe); sync from localStorage after mount.
     const [_open, _setOpen] = React.useState(defaultOpen)
     const open = openProp ?? _open
+
+    // Hydrate from localStorage on first client render (avoids SSR mismatch).
+    React.useEffect(() => {
+      try {
+        const stored = localStorage.getItem(SIDEBAR_STORAGE_KEY)
+        if (stored !== null) _setOpen(stored === "true")
+      } catch {}
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
     const setOpen = React.useCallback(
       (value: boolean | ((value: boolean) => boolean)) => {
         const openState = typeof value === "function" ? value(open) : value
@@ -86,8 +96,10 @@ const SidebarProvider = React.forwardRef<
           _setOpen(openState)
         }
 
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+        // Persist state so it survives client-side navigation and page reloads.
+        try {
+          localStorage.setItem(SIDEBAR_STORAGE_KEY, String(openState))
+        } catch {}
       },
       [setOpenProp, open]
     )
@@ -174,76 +186,113 @@ interface SidebarProps {
 function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "", sectionLabels = {}, getCurrentMenuItem }: SidebarProps = {}) {
   const pathname = usePathname()
   const searchParams = useSearchParams()
-  const { state } = useSidebar()
+  const { state, toggleSidebar } = useSidebar()
 
-  // Micro apps: utilise 'items' comme clé standard
-  // Main app: utilise currentMenu pour sélectionner le bon groupe
   const currentNavigation: SubMenuItem[] = sidebarMenus['items']
     || (currentMenu && sidebarMenus[currentMenu])
     || []
 
+  const isCollapsed = state === "collapsed"
+
   return (
-    <div className="h-screen sticky top-0 flex flex-col bg-gray-50 border-r border-ui-border min-w-[var(--sidebar-width-icon)] transition-[width] duration-200 overflow-visible"
-         style={{ width: state === "expanded" ? "var(--sidebar-width)" : "var(--sidebar-width-icon)" }}>
-      {/* Logo avec bouton de menu principal */}
-      <div className="h-14 flex items-center justify-between px-4 border-b border-ui-border">
-        <Logo />
-        {onMainMenuToggle && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onMainMenuToggle}
-            className="h-8 w-8 p-0 hover:bg-ibm-gray-20 rounded-lg"
-            title="Ouvrir le menu principal"
-          >
-            <Menu className="h-4 w-4" />
-          </Button>
+    <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"
+      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 ? (
+          <Logo iconOnly />
+        ) : (
+          <>
+            <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>
 
-      {/* En-tête du menu principal sélectionné */}
-      {currentMenu && sectionLabels[currentMenu] && (
-        <div className="h-14 flex items-center px-4 border-b border-ui-border">
-          <h2 className="text-sm font-semibold text-text-primary">
+      {/* Section label — hidden when collapsed */}
+      {!isCollapsed && currentMenu && sectionLabels[currentMenu] && (
+        <div className="h-10 flex items-center px-4 flex-shrink-0">
+          <h2 className="text-xs font-semibold text-text-secondary uppercase tracking-wide">
             {sectionLabels[currentMenu]}
           </h2>
         </div>
       )}
 
-      <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
+      {/* Nav */}
+      <nav className={cn(
+        "flex-1 overflow-y-auto",
+        isCollapsed ? "px-1 py-3 space-y-0.5" : "px-3 py-4 space-y-1"
+      )}>
         {currentNavigation.map((item) => {
-          // Use custom function if provided, otherwise use default pathname matching
           const activeItemId = getCurrentMenuItem ? getCurrentMenuItem(pathname, searchParams) : null
-          const isActive = activeItemId ? item.id === activeItemId : (pathname === item.href || pathname.startsWith(`${item.href}/`))
-          
+          const isActive = activeItemId
+            ? item.id === activeItemId
+            : (pathname === item.href || pathname.startsWith(`${item.href}/`))
+
           const handleClick = (e: React.MouseEvent) => {
             const href = item.href
             if (href.startsWith('http://') || href.startsWith('https://')) {
               e.preventDefault()
-              const path = new URL(href).pathname
-              window.location.href = path
-            } 
+              window.location.href = new URL(href).pathname
+            }
           }
-          
-          return (
+
+          const linkEl = (
             <Link
               key={item.id}
               href={item.href}
               onClick={handleClick}
               className={cn(
-                "flex items-center px-3 py-2 text-sm gap-x-3 transition-colors border-l-4",
+                "flex items-center transition-colors border-l-4",
+                isCollapsed ? "justify-center p-2" : "px-3 py-2 gap-x-3 text-sm",
                 isActive
                   ? "bg-interactive/10 text-interactive font-medium 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")} />
-              {item.name}
+              {!isCollapsed && item.name}
             </Link>
           )
+
+          if (isCollapsed) {
+            return (
+              <Tooltip key={item.id}>
+                <TooltipTrigger asChild>{linkEl}</TooltipTrigger>
+                <TooltipContent side="right" align="center">{item.name}</TooltipContent>
+              </Tooltip>
+            )
+          }
+          return linkEl
         })}
       </nav>
 
+      {/* Collapse / expand toggle */}
+      <div className={cn("flex-shrink-0 p-2", isCollapsed ? "flex justify-center" : "flex justify-end")}>
+        <button
+          type="button"
+          onClick={toggleSidebar}
+          className="h-8 w-8 flex items-center justify-center text-text-secondary hover:text-text-primary hover:bg-ui-background rounded-md transition-colors"
+          title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+        >
+          {isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
+        </button>
+      </div>
     </div>
   )
 }
@@ -679,7 +728,7 @@ const SidebarMenuSub = React.forwardRef<
     ref={ref}
     data-sidebar="menu-sub"
     className={cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 px-2.5 py-0.5",
       "group-data-[collapsible=icon]:hidden",
       className
     )}

package/package.json

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