Skip to main content
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

// 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

1

Customize menu items

Edit header-user-menu.tsx to modify the dropdown items. The component uses useAuth() to access the current user.
<DropdownMenuItem onClick={() => router.push("/dashboard/settings/account")}>
  <BadgeCheck />
  Account
</DropdownMenuItem>
2

Sign-out flow

The component implements client-side sign-out using createClient() from @/lib/supabase/client:
const handleLogout = async () => {
  const supabase = createClient();
  const { error } = await supabase.auth.signOut();
  if (!error) {
    toast.success("You have been logged out.");
    router.push("/");
  }
};
Sign-out is client-side for immediate feedback. The Supabase client handles session cleanup automatically.
3

User display

The component extracts user info from user.user_metadata (full_name, name, picture, avatar_url) with fallbacks to email.
Customize getUserDisplayName(), getUserInitials(), and getUserAvatar() helpers to match your user profile structure.