侧边栏菜单

定义仪表盘/管理页面的导航菜单，每个项目都是 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

视频教程

下一步

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

网站配置

配置网站的核心设置

导航栏配置

配置头部导航菜单

页脚配置

配置网站页脚中的链接

头像配置

配置用户头像下拉菜单

定义仪表盘/管理页面的导航菜单，每个项目都是 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,
        },
        // 更多管理项...
      ],
    },
    // 更多侧边栏部分...
  ];
}