@orsetra/shared-ui 1.0.44 → 1.0.46

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,10 @@ import {
   Settings,
   Package,
   Rocket,
-  Menu
+  Menu,
+  Building2,
+  User,
+  ChevronUp,
 } from "lucide-react"
 import { Logo } from "../../ui/logo"
 import { menuLabels, type SidebarMenus, type SubMenuItem } from "./data"
@@ -170,22 +173,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 +259,48 @@ 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-none 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 justify-between w-full px-3 py-2 text-sm rounded-none gap-x-3 transition-colors",
+            settingsOpen
+              ? "bg-interactive/10 text-interactive font-medium"
+              : "text-text-secondary hover:bg-ui-background hover:text-text-primary"
+          )}
+        >
+          <span className="flex items-center gap-x-3">
+            <Settings className="h-4 w-4" />
+            {state === "expanded" && "Paramètres"}
+          </span>
+          {state === "expanded" && <ChevronUp className={cn("h-4 w-4 transition-transform", settingsOpen ? "rotate-0" : "rotate-180")} />}
+        </button>
+      </div>
     </div>
   )
 }

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.44",
+  "version": "1.0.46",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",
@@ -93,4 +93,4 @@
     "next": "^16.0.7",
     "typescript": "^5"
   }
-}
+}