Avatar Button

Defines the menu items in the user avatar dropdown in the header, each item is MenuItem.

export function getAvatarLinks(): MenuItem[] {
  const t = useTranslations('Marketing.avatar');

  return [
    {
      title: t('dashboard'),
      href: Routes.Dashboard,
      icon: <LayoutDashboardIcon className="size-4 shrink-0" />,
    },
    {
      title: t('billing'),
      href: Routes.SettingsBilling,
      icon: <CreditCardIcon className="size-4 shrink-0" />,
    },
    {
      title: t('settings'),
      href: Routes.SettingsProfile,
      icon: <Settings2Icon className="size-4 shrink-0" />,
    },
  ];
}

The avatar configuration defines the dropdown menu that appears when users click on their profile avatar in the header. This typically includes links to:

• Credit balance (enabled by enableCredits in website.tsx)
• User dashboard
• Account settings
• Billing/subscription management
• Logout option (handled separately)

This menu provides quick access to user-specific functionality without cluttering the main navigation.

Video Tutorial

Next Steps

Now that you understand the avatar configuration, explore these related topics: