Sidebar Menus

Defines the navigation menu for dashboard/admin pages, each item is 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,
        },
        // More admin items...
      ],
    },
    // More sidebar sections...
  ];
}

The sidebar configuration is similar to the navbar but is specifically designed for the dashboard area. It supports:

Top-level links with icons
Expandable sections with nested items
Only visible to specific roles through the authorizeOnly property

The sidebar is ideal for providing different menus based on user roles, such as ordinary users only seeing the dashboard, and administrators seeing the user management pages.

Sidebar