Sidebar Menu Customization
For customize sidebar menu you have to deal with just
sidebar-items.ts, sidebar.metadata.ts files. You can find files in
apps/layout/sidebar directory, Code sample for both sample is:
sidebar.metadata.ts
// Sidebar route metadata
export interface RouteInfo {
path: string;
title: string;
iconType: string;
icon: string;
class: string;
groupTitle: boolean;
badge: string;
badgeClass: string;
submenu: RouteInfo[];
}
sidebar-items.ts
import { RouteInfo } from './sidebar.metadata';
export const ROUTES: RouteInfo[] = [
{
path: '',
title: '-- Main',
iconType: '',
icon: '',
class: '',
groupTitle: true,
badge: '',
badgeClass: '',
submenu: [],
},
{
path: '',
title: 'Home',
iconType: 'material-icons-two-tone',
icon: 'home',
class: 'menu-toggle',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [
{
path: '/dashboard/main',
title: 'Dashboard 1',
iconType: '',
icon: '',
class: 'ml-menu',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [],
},
{
path: '/dashboard/dashboard2',
title: 'Dashboard 2',
iconType: '',
icon: '',
class: 'ml-menu',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [],
},
],
},
......
];
Single Menu Setting
For single menu you have to write following code in sidebar-items.ts file
{
path: '/apps/calendar',
title: 'Calendar',
iconType: 'material-icons-two-tone',
icon: 'event_note',
class: '',
groupTitle: false,
badge: 'New',
badgeClass: 'badge bg-blue sidebar-badge float-right',
submenu: [],
},
Dropdown Menu Setting
For set two level dropdown menu you have to write following code in
sidebar-items.ts file
{
path: '',
title: 'Home',
iconType: 'material-icons-two-tone',
icon: 'home',
class: 'menu-toggle',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [
{
path: '/dashboard/main',
title: 'Dashboard 1',
iconType: '',
icon: '',
class: 'ml-menu',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [],
},
{
path: '/dashboard/dashboard2',
title: 'Dashboard 2',
iconType: '',
icon: '',
class: 'ml-menu',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [],
},
],
},
Multilevel Dropdown Menu Setting
For set Three level dropdown menu you have to write following code in
sidebar-items.ts file
{
path: '',
title: 'Multi level Menu',
iconType: 'material-icons-two-tone',
icon: 'slideshow',
class: 'menu-toggle',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [
{
path: '#',
title: 'First',
iconType: '',
icon: '',
class: 'ml-menu',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [],
},
{
path: '/',
title: 'Second',
iconType: '',
icon: '',
class: 'ml-sub-menu',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [
{
path: '/',
title: 'Second 1',
iconType: '',
icon: '',
class: '',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [],
},
{
path: '/',
title: 'Second 2',
iconType: '',
icon: '',
class: '',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [],
},
],
},
{
path: '#',
title: 'Third',
iconType: '',
icon: '',
class: 'ml-menu',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [],
},
],
},