> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Header User Menu

> User avatar dropdown with profile/exit actions in the top bar.

**Location**: `sabo/src/components/dashboard/header-user-menu.tsx`

## When to use

* Access account/profile links and sign-out from the top-right of the dashboard.

## Usage

```tsx theme={null}
// In the dashboard header
import { HeaderUserMenu } from "@/components/dashboard/header-user-menu";

export function HeaderRight() {
  return (
    <div className="flex items-center gap-2">
      <HeaderUserMenu />
    </div>
  );
}
```

## Styling tip

* Provide keyboard focus; ensure menu items are clear and group destructive actions.

## Steps

<Steps>
  <Step title="Customize menu items">
    Edit `header-user-menu.tsx` to modify the dropdown items. The component uses `useAuth()` to access the current user.

    ```tsx theme={null}
    <DropdownMenuItem onClick={() => router.push("/dashboard/settings/account")}>
      <BadgeCheck />
      Account
    </DropdownMenuItem>
    ```
  </Step>

  <Step title="Sign-out flow">
    The component implements client-side sign-out using `createClient()` from `@/lib/supabase/client`:

    ```tsx theme={null}
    const handleLogout = async () => {
      const supabase = createClient();
      const { error } = await supabase.auth.signOut();
      if (!error) {
        toast.success("You have been logged out.");
        router.push("/");
      }
    };
    ```

    <Note>
      Sign-out is client-side for immediate feedback. The Supabase client handles session cleanup automatically.
    </Note>
  </Step>

  <Step title="User display">
    The component extracts user info from `user.user_metadata` (full\_name, name, picture, avatar\_url) with fallbacks to email.

    <Tip>
      Customize `getUserDisplayName()`, `getUserInitials()`, and `getUserAvatar()` helpers to match your user profile structure.
    </Tip>
  </Step>
</Steps>