# 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.