Header User Menu

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

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>

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.

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.

Notifications DropdownCompact dropdown to display recent notifications in the top bar.

​When to use

​Usage

​Styling tip

​Steps

When to use

Usage

Styling tip

Steps