GearBox/docs/superpowers/specs/2026-04-03-user-menu-design.md at 41e58d0153594dc147e50d898b2ce0078843412e

Files

Jean-Luc Makiola 0a40d7627f feat: add user menu dropdown with settings link and sign out

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>

2026-04-03 20:19:53 +02:00

1.4 KiB

Raw Blame History

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:

Settings — Settings (gear) icon + "Settings" label, <Link to="/settings">
Divider — thin horizontal line
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.

1.4 KiB Raw Blame History

User Menu Design