Skip to content

feat(header): Global user menu with logout (closes #1054)#1112

Open
jeromehardaway wants to merge 1 commit into
masterfrom
fix/header-global-logout
Open

feat(header): Global user menu with logout (closes #1054)#1112
jeromehardaway wants to merge 1 commit into
masterfrom
fix/header-global-logout

Conversation

@jeromehardaway

Copy link
Copy Markdown
Contributor

Summary

  • New `` component wired into all three header variants (`header`, `header-01`, `header-02`) so users can sign out from any page, not just `/profile/{id}`.
  • Signed-in state shows an avatar button with a dropdown (Profile, Settings, Logout). Signed-out state shows a "Sign in" link. Loading state renders a skeleton placeholder so the avatar doesn't flash in after a "Sign in" stub (no FOUC).
  • Logout uses the hardened pattern from `src/pages/profile/[id].tsx` (try/catch + `window.alert` on failure) so failed sign-outs surface to the user.
  • `header-01` now uses `filterMenuByAuth` for parity with the other variants — its top-level menu had been showing auth-only items to signed-out users.

Closes #1054.

Test plan

  • `npm test` — 380 tests pass
  • `npx biome check` on changed files — clean (one pre-existing `noAlert` warning that matches the profile-page logout pattern)
  • Sign in, confirm avatar appears in header on `/`, `/about-us`, `/programs`, `/jobs`, `/store`
  • Open menu, click Logout — should redirect to `/login`
  • Sign out, confirm "Sign in" link appears on every page
  • Reload an authenticated page — confirm no flash of "Sign in" before avatar (loading skeleton renders instead)
  • Keyboard: Tab to avatar, Enter opens menu, Escape closes

Closes #1054.

Adds a new <UserMenu /> component to all three header variants
(header, header-01, header-02). When signed in, users see an avatar
button that opens a dropdown with profile, settings, and logout
actions. When signed out, the header shows a "Sign in" link. While
the session is loading, a skeleton placeholder renders to prevent FOUC.

- New src/components/header/user-menu.tsx with useSession() state
  handling, click-outside + Escape close, and a hardened signOut
  handler that surfaces failures via window.alert (matches the
  existing profile-page pattern).
- header-01 picks up filterMenuByAuth so the main menu hides
  auth-only items for unauthenticated users, like the other variants.
@vercel

vercel Bot commented May 13, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
vets-who-code-app Ready Ready Preview, Comment May 13, 2026 2:45am

Request Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add global logout button to header (currently only on profile page)

1 participant