@orsetra/shared-ui 1.0.11 → 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/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/package.json

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