LogoMkSaaS文档

头像按钮

配置用户头像下拉菜单

定义头部用户头像下拉菜单中的菜单项,每个项目都是 MenuItem

src/config/avatar-config.tsx
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" />,
    },
  ];
}

头像配置定义了用户点击头部个人头像时出现的下拉菜单。通常包括以下链接:

  • 积分余额(通过 enableCreditswebsite.tsx 中启用)
  • 用户仪表盘
  • 账户设置
  • 账单/订阅管理
  • 退出登录选项(单独处理)

此菜单提供对用户特定功能的快速访问,而不会使主导航变得混乱。

Avatar

视频教程

下一步

现在您了解了头像配置,请探索其他相关主题: