@orsetra/shared-ui 1.0.20 → 1.0.22

package/components/layout/layout-container.tsx

@@ -5,7 +5,7 @@ import { usePathname } from "next/navigation"
 import { MainSidebar, type SidebarMode } from "./sidebar/main-sidebar"
 import { Sidebar, SidebarProvider, useSidebar } from "./sidebar/sidebar"
 import { type SidebarMenus } from "./sidebar/data"
-import { UserMenu, Button } from "../ui"
+import { UserMenu, Button, type UserMenuConfig } from "../ui"
 import { getMenuFromPath } from "../../lib/menu-utils"
 import { useIsMobile } from "../../hooks/use-mobile"
 import { Menu } from "lucide-react"
@@ -16,9 +16,10 @@ interface LayoutContainerProps {
   user?: { profile?: { email?: string; preferred_username?: string } } | null
   onSignOut?: () => void
   mode?: SidebarMode
+  userMenuConfig?: UserMenuConfig
 }
 
-function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expanded' }: LayoutContainerProps) {
+function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expanded', userMenuConfig }: LayoutContainerProps) {
   const pathname = usePathname()
   const { setOpen } = useSidebar()
   const isMobile = useIsMobile()
@@ -96,7 +97,8 @@ function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expand
             )}
             <UserMenu 
               username={user?.profile?.email || user?.profile?.preferred_username} 
-              onSignOut={onSignOut || (() => {})} 
+              onSignOut={onSignOut || (() => {})}
+              menuConfig={userMenuConfig}
             />
           </div>
         </header>

package/components/ui/index.ts

@@ -5,7 +5,7 @@ export { Avatar, AvatarImage, AvatarFallback } from './avatar'
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from './dropdown-menu'
 export { Separator } from './separator'
 export { Logo } from './logo'
-export { UserMenu } from './user-menu'
+export { UserMenu, type UserMenuItem, type UserMenuConfig } from './user-menu'
 export { Input } from './input'
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './tooltip'
 export { PageHeader } from './page-header'

package/components/ui/user-menu.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useRouter } from "next/navigation"
-import { LogOut, Settings, Building2, User, ChevronDown } from "lucide-react"
+import { LogOut, ChevronDown, type LucideIcon } from "lucide-react"
 import Avatar from "react-avatar"
 import { Button } from "./button"
 import {
@@ -12,15 +12,30 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "./dropdown-menu"
+
+// Type for configurable user menu items
+export interface UserMenuItem {
+  id: string
+  label: string
+  href: string
+  icon: LucideIcon
+}
+
+export interface UserMenuConfig {
+  items: UserMenuItem[]
+}
+
 interface UserMenuProps {
   username?: string
   onSignOut: () => void
+  menuConfig?: UserMenuConfig
 }
 
-export function UserMenu({ username, onSignOut }: UserMenuProps) {
+export function UserMenu({ username, onSignOut, menuConfig }: UserMenuProps) {
   const router = useRouter()
   
   const displayName = username || "User"
+  const menuItems = menuConfig?.items || []
 
   return (
     <DropdownMenu>
@@ -50,28 +65,24 @@ export function UserMenu({ username, onSignOut }: UserMenuProps) {
             <p className="text-sm font-medium leading-none">{displayName}</p>
           </div>
         </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem 
-          className="cursor-pointer"
-          onClick={() => router.push('/profile')}
-        >
-          <User className="mr-2 h-4 w-4" />
-          <span>Profile</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem 
-          className="cursor-pointer"
-          onClick={() => router.push('/organization')}
-        >
-          <Building2 className="mr-2 h-4 w-4" />
-          <span>Organization</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem 
-          className="cursor-pointer"
-          onClick={() => router.push('/settings')}
-        >
-          <Settings className="mr-2 h-4 w-4" />
-          <span>Settings</span>
-        </DropdownMenuItem>
+        {menuItems.length > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            {menuItems.map((item) => {
+              const Icon = item.icon
+              return (
+                <DropdownMenuItem 
+                  key={item.id}
+                  className="cursor-pointer"
+                  onClick={() => router.push(item.href)}
+                >
+                  <Icon className="mr-2 h-4 w-4" />
+                  <span>{item.label}</span>
+                </DropdownMenuItem>
+              )
+            })}
+          </>
+        )}
         <DropdownMenuSeparator />
         <DropdownMenuItem 
           className="cursor-pointer text-red-600 focus:text-red-600 focus:bg-red-50"

package/package.json

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