跳过主要内容
文档目录

侧边栏菜单

配置仪表盘页面的导航菜单

定义后台管理页面的左侧边栏导航菜单,每个项目都是 MenuItemConfig。

src/config/sidebar-config.ts

export function getSidebarLinks(): MenuItemConfig[] {
  return [
    {
      title: m.dashboard_sidebar_dashboard(),
      icon: IconLayoutDashboard,
      href: Routes.Dashboard,
      external: false,
    },
    {
      title: m.admin_title(),
      icon: IconShieldCheck,
      authorizeOnly: ['admin'],
      items: [
        {
          title: m.admin_users_title(),
          icon: IconUsers,
          href: Routes.AdminUsers,
          external: false,
        },
      ],
    },
    {
      title: m.dashboard_sidebar_settings(),
      icon: IconSettings2,
      items: [
        {
          title: m.dashboard_sidebar_profile(),
          icon: IconUserCircle,
          href: Routes.SettingsProfile,
          external: false,
        },
        ...(websiteConfig.payment?.enable
          ? [
              {
                title: m.dashboard_sidebar_billing(),
                icon: IconCreditCard,
                href: Routes.SettingsBilling,
                external: false,
              },
            ]
          : []),
        {
          title: m.dashboard_sidebar_security(),
          icon: IconLock,
          href: Routes.SettingsSecurity,
          external: false,
        },
        {
          title: m.dashboard_sidebar_files(),
          icon: IconFileUpload,
          href: Routes.SettingsFiles,
          external: false,
        },
        {
          title: m.dashboard_sidebar_api_keys(),
          icon: IconKey,
          href: Routes.SettingsApiKeys,
          external: false,
        },
        ...(websiteConfig.newsletter?.enable
          ? [
              {
                title: m.dashboard_sidebar_notifications(),
                icon: IconBell,
                href: Routes.SettingsNotifications,
                external: false,
              },
            ]
          : []),
      ],
    },
  ];
}

侧边栏配置类似于导航栏,但专门为仪表盘区域设计。它支持:

  • 带图标的顶级链接
  • 带嵌套可展开的菜单
  • 通过 authorizeOnly 属性实现菜单只有特定角色可见

侧边栏非常适合根据用户角色提供不同的菜单,例如普通用户只能看到仪表盘,管理员可以看到用户管理页面等。

Sidebar

下一步

现在您了解了侧边栏配置,请探索其他相关主题: