@orsetra/shared-ui 1.0.62 → 1.0.65

package/components/layout/index.ts

@@ -30,4 +30,3 @@ export {
 // Skeleton is exported from ../ui to avoid duplicate exports
 export { RootLayoutWrapper, ibmPlexSans, ibmPlexMono } from './root-layout-wrapper'
 export { LayoutContainer } from './layout-container'
-export { PageWithSidePanel } from './page-with-side-panel'

package/components/layout/layout-container.tsx

@@ -82,7 +82,7 @@ function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expand
       />
       
       <div className="flex-1 flex flex-col min-w-0">
-        <header className="h-14 bg-gray-50 flex-shrink-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">
             {/* Menu button - shown when sidebar is hidden (including on mobile) */}
             {isHidden ? (

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

@@ -66,9 +66,12 @@ export function MainSidebar({
 
   const handleSubMenuClick = (e: React.MouseEvent, href: string) => {
     e.preventDefault()
+    console.log('handleSubMenuClick - href:', href)
     const path = href.startsWith('http://') || href.startsWith('https://') 
       ? new URL(href).pathname 
       : href
+    console.log('handleSubMenuClick - path:', path)
+    console.log('Redirecting to:', path)
     window.location.href = path
     setHoveredMenu(null)
   }
@@ -83,14 +86,14 @@ export function MainSidebar({
       )}
 
       <div className={cn(
-        "fixed left-0 top-0 h-full bg-gray-50  z-50 transform transition-all duration-300 ease-in-out",
+        "fixed left-0 top-0 h-full bg-gray-30 border-r border-ui-border z-50 transform transition-all duration-300 ease-in-out",
         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 bg-gray-50",
+          "flex items-center h-16 border-b border-ui-border bg-gray-30",
           isMinimized ? "justify-center px-2" : "justify-between px-4"
         )}>
           {!isMinimized && <Logo className="text-2xl font-semibold text-text-primary" />}
@@ -145,8 +148,8 @@ export function MainSidebar({
                 </button>
 
                 {isMinimized && hoveredMenu === item.id && sidebarMenus[item.id] && sidebarMenus[item.id].length > 0 && (
-                  <div className="absolute left-full top-0 ml-2 bg-white rounded-lg shadow-xl z-50 min-w-[200px] py-2">
-                    <div className="px-4 py-2">
+                  <div className="absolute left-full top-0 ml-2 bg-gray-30 border border-ui-border rounded-lg shadow-xl z-50 min-w-[200px] py-2">
+                    <div className="px-4 py-2 border-b border-ui-border">
                       <h3 className="text-sm font-semibold text-text-primary">{item.label}</h3>
                     </div>
                     <div className="py-1">

package/components/layout/sidebar/sidebar.tsx

@@ -204,7 +204,7 @@ 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"
+    <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"
          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">
@@ -272,10 +272,10 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
       </nav>
 
       {/* Footer - Menu Paramètres */}
-      <div className="relative  border-ui-border px-3 py-3" ref={settingsRef}>
+      <div className="relative border-t border-ui-border px-3 py-3" ref={settingsRef}>
         {/* Dropdown vers le haut */}
         {settingsOpen && (
-          <div className="absolute bottom-full left-2 right-2 mb-1 bg-white border border-ui-border rounded-none shadow-lg z-50">
+          <div className="absolute bottom-full left-2 right-2 mb-1 bg-gray-50 border border-ui-border rounded-none shadow-lg z-50">
             <div className="py-1">
               <Link
                 href={`${main_base_url}/organization`}
@@ -518,6 +518,7 @@ const SidebarGroupAction = React.forwardRef<
       data-sidebar="group-action"
       className={cn(
         "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "group-data-[collapsible=icon]:hidden",
         className
@@ -663,6 +664,7 @@ const SidebarMenuAction = React.forwardRef<
       data-sidebar="menu-action"
       className={cn(
         "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
         "peer-data-[size=default]/menu-button:top-1.5",

package/components/ui/page-header.tsx

@@ -4,28 +4,32 @@ import type { ReactNode } from "react"
 
 interface PageHeaderProps {
   title: string
+  description?: string
   backLink?: string
   actions?: ReactNode
   statusNode?: ReactNode
 }
 
-export function PageHeader({ title, backLink, actions, statusNode}: PageHeaderProps) {
+export function PageHeader({ title, description, backLink, actions, statusNode}: PageHeaderProps) {
   return (
-    <div className="sticky top-0 z-10 bg-white border-b border-gray-200 -mx-6 px-6 py-3 mb-6">
-      <div className="flex items-center justify-between gap-4">
+    <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} className="flex-shrink-0">
-              <ArrowLeft className="h-4 w-4 text-text-secondary" />
+              <ArrowLeft className="h-5 w-5 sm:h-6 sm:w-6 text-text-secondary" />
             </Link>
           )}
-          <div className="flex items-center space-x-3 min-w-0">
-            <h2 className="text-base font-semibold text-text-primary truncate">{title}</h2>
-            {statusNode && <div className="flex-shrink-0">{statusNode}</div>}
+          <div className="min-w-0">
+            <div className="flex items-center space-x-3">
+              <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-sm sm:text-base text-text-secondary line-clamp-2">{description}</p>}
           </div>
         </div>
-        {actions && <div className="flex items-center space-x-2 flex-shrink-0">{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.62",
+  "version": "1.0.65",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",