From b959edd6c779994c7bb914372e9f0b4692e19363 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 19 Mar 2026 18:14:40 +0100
Subject: [PATCH] feat: add logout dropdown to user menu in TopBar

Click user name/avatar to open dropdown with Logout option.
TopBar accepts optional onLogout callback prop.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../layout/TopBar/TopBar.module.css            |  1 +
 src/design-system/layout/TopBar/TopBar.tsx     | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/design-system/layout/TopBar/TopBar.module.css b/src/design-system/layout/TopBar/TopBar.module.css
index 669ad10..827d374 100644
--- a/src/design-system/layout/TopBar/TopBar.module.css
+++ b/src/design-system/layout/TopBar/TopBar.module.css
@@ -121,6 +121,7 @@
   gap: 8px;
   font-size: 12px;
   color: var(--text-secondary);
+  cursor: pointer;
 }
 
 .userName {
diff --git a/src/design-system/layout/TopBar/TopBar.tsx b/src/design-system/layout/TopBar/TopBar.tsx
index 11ff035..8084a0d 100644
--- a/src/design-system/layout/TopBar/TopBar.tsx
+++ b/src/design-system/layout/TopBar/TopBar.tsx
@@ -1,5 +1,6 @@
 import styles from './TopBar.module.css'
 import { Breadcrumb } from '../../composites/Breadcrumb/Breadcrumb'
+import { Dropdown } from '../../composites/Dropdown/Dropdown'
 import { Avatar } from '../../primitives/Avatar/Avatar'
 import { ButtonGroup } from '../../primitives/ButtonGroup/ButtonGroup'
 import type { ButtonGroupItem } from '../../primitives/ButtonGroup/ButtonGroup'
@@ -17,6 +18,7 @@ interface TopBarProps {
   breadcrumb: BreadcrumbItem[]
   environment?: string
   user?: { name: string }
+  onLogout?: () => void
   className?: string
 }
 
@@ -31,6 +33,7 @@ export function TopBar({
   breadcrumb,
   environment,
   user,
+  onLogout,
   className,
 }: TopBarProps) {
   const globalFilters = useGlobalFilters()
@@ -96,10 +99,17 @@ export function TopBar({
           <span className={styles.env}>{environment}</span>
         )}
         {user && (
-          <div className={styles.user}>
-            <span className={styles.userName}>{user.name}</span>
-            <Avatar name={user.name} size="md" />
-          </div>
+          <Dropdown
+            trigger={
+              <div className={styles.user}>
+                <span className={styles.userName}>{user.name}</span>
+                <Avatar name={user.name} size="md" />
+              </div>
+            }
+            items={[
+              { label: 'Logout', icon: '\u23FB', onClick: onLogout },
+            ]}
+          />
         )}
       </div>
     </header>