LogoMkSaaS文档

侧边栏菜单

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

定义仪表盘/管理页面的导航菜单,每个项目都是 NestedMenuItem

src/config/sidebar-config.tsx
export function getSidebarLinks(): NestedMenuItem[] {
  const t = useTranslations('Dashboard');

  return [
    {
      title: t('dashboard.title'),
      icon: <LayoutDashboardIcon className="size-4 shrink-0" />,
      href: Routes.Dashboard,
      external: false,
    },
    {
      title: t('admin.title'),
      icon: <SettingsIcon className="size-4 shrink-0" />,
      authorizeOnly: ['admin'],
      items: [
        {
          title: t('admin.users.title'),
          icon: <UsersRoundIcon className="size-4 shrink-0" />,
          href: Routes.AdminUsers,
          external: false,
        },
        // 更多管理项...
      ],
    },
    // 更多侧边栏部分...
  ];
}

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

  • 带图标的顶级链接
  • 带嵌套项的可展开部分
  • 通过 authorizeOnly 属性实现基于角色的可见性

侧边栏非常适合在应用程序的认证部分内提供导航,根据用户角色提供不同的选项。

您可以根据需要删除或添加更多项目到侧边栏。

Sidebar

视频教程

下一步

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