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
authorizeOnlyproperty
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:
-
Website Configuration - Configure core website settings
-
Navbar Configuration - Configure the header navigation menu
-
Footer Configuration - Configure links in the website footer
-
Avatar Configuration - Configure the user avatar dropdown menu