LogoShipSaaS
网站配置

侧边栏菜单

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

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

src/config/sidebar-config.ts

export function getSidebarLinks(): MenuItemConfig[] {
  return [
    {
      title: m.dashboard,
      icon: IconLayoutDashboard,
      href: Routes.Dashboard,
      external: false,
    },
    {
      title: am.title,
      icon: IconShieldCheck,
      authorizeOnly: ['admin'],
      items: [
        {
          title: am.users.title,
          icon: IconUsers,
          href: Routes.AdminUsers,
          external: false,
        },
      ],
    },
    {
      title: m.settings,
      icon: IconSettings2,
      items: [
        { title: m.profile, icon: IconUserCircle, href: Routes.SettingsProfile },
        // billing(取决于 payment.enable)
        { title: m.security, icon: IconLock, href: Routes.SettingsSecurity },
        { title: m.files, icon: IconFileUpload, href: Routes.SettingsFiles },
        { title: m.apiKeys, icon: IconKey, href: Routes.SettingsApiKeys },
        { title: m.notifications, icon: IconBell, href: Routes.SettingsNotifications },
      ],
    },
  ];
}

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

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

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

下一步

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

On this page