Jean-Luc Makiola
0a40d7627f
Replace the plain "Sign out" button in the header with a user icon that opens a dropdown menu containing Settings and Sign out options. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
36 lines
1.4 KiB
Markdown
36 lines
1.4 KiB
Markdown
# User Menu Design
|
|
|
|
## Summary
|
|
|
|
Replace the plain "Sign out" button in the header with a user icon that opens a dropdown menu containing Settings and Sign out options. This provides a way to navigate to the Settings page from the header.
|
|
|
|
## Components
|
|
|
|
### UserMenu (`src/client/components/UserMenu.tsx`)
|
|
|
|
New component rendered by `TotalsBar` when authenticated.
|
|
|
|
**Trigger:** Circular `CircleUser` icon button (Lucide). Styled consistently with surrounding header elements.
|
|
|
|
**Dropdown:** Absolutely-positioned popover anchored to the right edge, appearing below the icon:
|
|
|
|
1. **Settings** — `Settings` (gear) icon + "Settings" label, `<Link to="/settings">`
|
|
2. **Divider** — thin horizontal line
|
|
3. **Sign out** — `LogOut` icon + "Sign out" label, calls `logout.mutate()` from `useLogout()`
|
|
|
|
**Behavior:**
|
|
- Click icon toggles open/close
|
|
- Click outside closes (via `useEffect` with document click listener)
|
|
- Clicking a menu item closes the dropdown
|
|
- Dropdown anchored right so it doesn't overflow viewport
|
|
|
|
### TotalsBar Changes (`src/client/components/TotalsBar.tsx`)
|
|
|
|
- When `isAuthenticated`: render `<UserMenu />` in place of the current "Sign out" button
|
|
- When not authenticated: keep the existing "Sign in" link unchanged
|
|
- Remove the `useLogout` hook usage from TotalsBar (moved into UserMenu)
|
|
|
|
## No Backend Changes
|
|
|
|
The existing `/api/auth/me` endpoint and `useAuth` hook are sufficient. No username display needed — using a generic user icon.
|