LogoShipSaaS
Configuration

Sidebar Configuration

Configure the navigation menu of the dashboard page

Defines the left sidebar navigation menu for the dashboard administration pages. Each item is a 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 (depends on 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 },
      ],
    },
  ];
}

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

  • Top-level links with icons
  • Nested, expandable menus
  • Visibility restrictions for specific roles via the authorizeOnly property

The sidebar is ideal for providing different menus depending on the user's role, such as regular users only seeing the dashboard while administrators can see user management pages, etc.

Next Steps

Now that you understand the sidebar configuration, explore these related topics:

On this page