@orsetra/shared-ui 1.0.10 → 1.0.12

package/components/layout/layout-container.tsx

@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation"
 import { MainSidebar, Sidebar, SidebarProvider, useSidebar, type SidebarMode } from "./index"
 import { UserMenu, Button } from "../ui"
 import { getMenuFromPath } from "../../lib/menu-utils"
+import { useIsMobile } from "../../hooks/use-mobile"
 import { Menu } from "lucide-react"
 
 export interface SidebarMenus {
@@ -22,10 +23,19 @@ interface LayoutContainerProps {
 function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expanded' }: LayoutContainerProps) {
   const pathname = usePathname()
   const { setOpen } = useSidebar()
+  const isMobile = useIsMobile()
   const [isMainSidebarOpen, setIsMainSidebarOpen] = useState(false)
   const [currentMenu, setCurrentMenu] = useState<string>("overview")
   const isMinimized = mode === 'minimized'
-  const isHidden = mode === 'hidden'
+  // Force hidden mode on mobile
+  const isHidden = mode === 'hidden' || isMobile
+
+  // Close sidebar on route change (mobile)
+  useEffect(() => {
+    if (isMobile) {
+      setIsMainSidebarOpen(false)
+    }
+  }, [pathname, isMobile])
 
   useEffect(() => {
     const contextualMenu = getMenuFromPath(pathname)
@@ -49,7 +59,7 @@ function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expand
 
   return (
     <div className="flex h-screen w-full bg-white">
-      {/* Sidebar secondaire - caché en mode minimized et hidden */}
+      {/* Desktop sidebar - hidden on mobile (isHidden is true on mobile) */}
       {!isMinimized && !isHidden && (
         <Sidebar 
           currentMenu={currentMenu}
@@ -57,41 +67,27 @@ function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expand
         />
       )}
       
-      {/* MainSidebar - en mode hidden, il s'ouvre comme un overlay */}
-      {!isHidden && (
-        <MainSidebar 
-          isOpen={isMainSidebarOpen}
-          onToggle={handleMainSidebarToggle}
-          onMenuSelect={handleMenuSelect}
-          currentMenu={currentMenu}
-          onSecondarySidebarOpen={handleSecondarySidebarOpen}
-          mode={mode}
-        />
-      )}
-
-      {/* MainSidebar overlay en mode hidden */}
-      {isHidden && (
-        <MainSidebar 
-          isOpen={isMainSidebarOpen}
-          onToggle={handleMainSidebarToggle}
-          onMenuSelect={handleMenuSelect}
-          currentMenu={currentMenu}
-          onSecondarySidebarOpen={handleSecondarySidebarOpen}
-          mode="expanded"
-        />
-      )}
+      {/* MainSidebar - always available, opens as overlay when isHidden */}
+      <MainSidebar 
+        isOpen={isMainSidebarOpen}
+        onToggle={handleMainSidebarToggle}
+        onMenuSelect={handleMenuSelect}
+        currentMenu={currentMenu}
+        onSecondarySidebarOpen={handleSecondarySidebarOpen}
+        mode={isHidden ? "expanded" : mode}
+      />
       
-      <div className="flex-1 flex flex-col">
+      <div className="flex-1 flex flex-col min-w-0">
         <header className="h-14 bg-white border-b border-ui-border flex-shrink-0">
-          <div className="h-full px-6 flex items-center justify-between">
-            {/* Bouton menu - affiché en mode hidden */}
+          <div className="h-full px-4 md:px-6 flex items-center justify-between">
+            {/* Menu button - shown when sidebar is hidden (including on mobile) */}
             {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 principal"
+                title="Ouvrir le menu"
               >
                 <Menu className="h-5 w-5" />
               </Button>

package/components/ui/dialog.tsx

@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-sm text-gray-500", className)}
     {...props}
   />
 ))

package/components/ui/page-header.tsx

@@ -12,23 +12,23 @@ interface PageHeaderProps {
 
 export function PageHeader({ title, description, backLink, actions, statusNode}: PageHeaderProps) {
   return (
-    <div className="mb-8">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-3">
+    <div className="mb-4 sm:mb-8">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div className="flex items-center space-x-3 min-w-0">
           {backLink && (
-            <Link href={backLink}>
-              <ArrowLeft className="h-6 w-6 text-text-secondary" />
+            <Link href={backLink} className="flex-shrink-0">
+              <ArrowLeft className="h-5 w-5 sm:h-6 sm:w-6 text-text-secondary" />
             </Link>
           )}
-          <div>
+          <div className="min-w-0">
             <div className="flex items-center space-x-3">
-              <h1 className="text-2xl font-semibold text-text-primary">{title}</h1>
-              {statusNode && <div className="mt-2">{statusNode}</div>}
+              <h1 className="text-xl sm:text-2xl font-semibold text-text-primary truncate">{title}</h1>
+              {statusNode && <div className="mt-2 flex-shrink-0">{statusNode}</div>}
             </div>
-            {description && <p className="text-base text-text-secondary">{description}</p>}
+            {description && <p className="text-sm sm:text-base text-text-secondary line-clamp-2">{description}</p>}
           </div>
         </div>
-        {actions && <div className="flex items-center space-x-4">{actions}</div>}
+        {actions && <div className="flex items-center space-x-2 sm:space-x-4 flex-shrink-0">{actions}</div>}
       </div>
     </div>
   )

package/components/ui/select.tsx

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-8 w-full items-center justify-between border border-ibm-gray-30 bg-white px-3 py-2 text-sm text-ibm-gray-100 placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between border border-ibm-gray-30 bg-white px-3 py-2 text-sm text-ibm-gray-100 placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     style={{ borderRadius: 0 }}

package/package.json

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