@orsetra/shared-ui 1.0.43 → 1.0.45

package/components/layout/layout-container.tsx

@@ -61,10 +61,11 @@ function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expand
     <div className="flex h-screen w-full bg-white">
       {/* Desktop sidebar - hidden on mobile (isHidden is true on mobile) */}
       {!isMinimized && !isHidden && (
-        <Sidebar 
+        <Sidebar
           currentMenu={currentMenu}
           onMainMenuToggle={handleMainSidebarToggle}
           sidebarMenus={sidebarMenus}
+          main_base_url={main_base_url}
         />
       )}
       

package/components/layout/sidebar/sidebar.tsx

@@ -23,7 +23,9 @@ import {
   Settings,
   Package,
   Rocket,
-  Menu
+  Menu,
+  Building2,
+  User,
 } from "lucide-react"
 import { Logo } from "../../ui/logo"
 import { menuLabels, type SidebarMenus, type SubMenuItem } from "./data"
@@ -170,22 +172,38 @@ interface SidebarProps {
   currentMenu?: string
   onMainMenuToggle?: () => void
   sidebarMenus?: SidebarMenus
+  main_base_url?: string
 }
 
 
 
-function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {} }: SidebarProps = {}) {
+function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "" }: SidebarProps = {}) {
   const pathname = usePathname()
   const { state } = useSidebar()
+  const [settingsOpen, setSettingsOpen] = React.useState(false)
+  const settingsRef = React.useRef<HTMLDivElement>(null)
+
+  // Close dropdown on click outside
+  React.useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (settingsRef.current && !settingsRef.current.contains(event.target as Node)) {
+        setSettingsOpen(false)
+      }
+    }
+    if (settingsOpen) {
+      document.addEventListener("mousedown", handleClickOutside)
+      return () => document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [settingsOpen])
 
   // 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 currentNavigation: SubMenuItem[] = sidebarMenus['items']
+    || (currentMenu && sidebarMenus[currentMenu])
     || []
 
   return (
-    <div className="h-screen sticky top-0 flex flex-col bg-white border-r border-ui-border min-w-[var(--sidebar-width-icon)] transition-[width] duration-200" 
+    <div className="h-screen sticky top-0 flex flex-col bg-white 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">
@@ -240,6 +258,45 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {} }: SidebarPr
           )
         })}
       </nav>
+
+      {/* Footer - Menu Paramètres */}
+      <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-lg shadow-lg z-50">
+            <div className="py-1">
+              <Link
+                href={`${main_base_url}/organization`}
+                onClick={() => setSettingsOpen(false)}
+                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"
+              >
+                <Building2 className="h-4 w-4" />
+                Organization
+              </Link>
+              <Link
+                href={`${main_base_url}/profile`}
+                onClick={() => setSettingsOpen(false)}
+                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"
+              >
+                <User className="h-4 w-4" />
+                Compte
+              </Link>
+            </div>
+          </div>
+        )}
+        <button
+          onClick={() => setSettingsOpen(!settingsOpen)}
+          className={cn(
+            "flex items-center w-full px-3 py-2 text-sm rounded-md gap-x-3 transition-colors",
+            settingsOpen
+              ? "bg-interactive/10 text-interactive font-medium"
+              : "text-text-secondary hover:bg-ui-background hover:text-text-primary"
+          )}
+        >
+          <Settings className="h-4 w-4" />
+          {state === "expanded" && "Paramètres"}
+        </button>
+      </div>
     </div>
   )
 }

package/components/ui/input.tsx

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full border border-ibm-gray-30 bg-white px-3 py-1 text-base text-ibm-gray-100 placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500 focus-visible:border-blue-500 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full border border-ibm-gray-30 bg-white px-3 py-1 text-base text-ibm-gray-100 placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500 focus-visible:border-blue-500 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm invalid:border-carbon-red-60 invalid:focus-visible:ring-carbon-red-60",
           className
         )}
         style={{ borderRadius: 0 }}

package/components/ui/textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm invalid:border-carbon-red-60 invalid:focus-visible:ring-carbon-red-60",
         className
       )}
       ref={ref}

package/lib/menu-utils.ts

@@ -41,7 +41,12 @@ export function getMenuFromPath(pathname: string): string {
   if (pathname.startsWith("/access-manager")) {
     return "access-manager"
   }
-  
+
+  // Routes pour Profile et Organization (pages paramètres)
+  if (pathname.startsWith("/profile") || pathname.startsWith("/organization")) {
+    return "overview"
+  }
+
   // Par défaut, Vue d'ensemble
   return "overview"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",
@@ -93,4 +93,4 @@
     "next": "^16.0.7",
     "typescript": "^5"
   }
-}
+}