Sidebar Menu Customization
For customize sidebar menu you have to deal with just
routes.json, 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;
role: string[];
submenu: RouteInfo[];
}
routes.json
{
"routes": [
{
"path": "",
"title": "MENUITEMS.MAIN.TEXT",
"iconType": "",
"icon": "",
"class": "",
"groupTitle": true,
"badge": "",
"badgeClass": "",
"role": ["All"],
"submenu": []
},
{
"path": "",
"title": "MENUITEMS.DASHBOARD.TEXT",
"iconType": "feather",
"icon": "space_dashboard",
"class": "menu-toggle",
"groupTitle": false,
"badge": "",
"badgeClass": "",
"role": ["Admin"],
"submenu": [
{
"path": "/admin/dashboard/main",
"title": "MENUITEMS.DASHBOARD.LIST.DASHBOARD1",
"iconType": "",
"icon": "",
"class": "ml-menu",
"groupTitle": false,
"badge": "",
"badgeClass": "",
"role": [""],
"submenu": []
},
{
"path": "/admin/dashboard/dashboard2",
"title": "MENUITEMS.DASHBOARD.LIST.DASHBOARD2",
"iconType": "",
"icon": "",
"class": "ml-menu",
"groupTitle": false,
"badge": "",
"badgeClass": "",
"role": [""],
"submenu": []
}
]
},
{
"path": "/doctor/dashboard",
"title": "MENUITEMS.DASHBOARD.LIST.DOCTOR-DASHBOARD",
"iconType": "feather",
"icon": "space_dashboard",
"class": "",
"groupTitle": false,
"badge": "",
"badgeClass": "",
"role": ["Doctor"],
"submenu": []
},
.....
]
}
]
Single Menu Setting
For single menu you have to write following code in routes.json file
{
path: "calendar",
title: "Calendar",
iconType: "feather",
icon: "event_note",
class: "",
groupTitle: false,
badge: "New",
badgeClass: "badge bg-blue sidebar-badge float-right",
role: ["Admin", "Doctor"],
submenu: [],
},
Multilevel Dropdown Menu Setting
For set Three level dropdown menu you have to write following code in
routes.json file
{
path: "",
title: "Multi level Menu",
iconType: "feather",
icon: "slideshow",
class: "menu-toggle",
groupTitle: false,
badge: "",
badgeClass: "",
role: ["Admin"],
submenu: [
{
path: "/multilevel/first1",
title: "First",
iconType: "",
icon: "",
class: "ml-menu",
groupTitle: false,
badge: "",
badgeClass: "",
role: [""],
submenu: [],
},
{
path: "/",
title: "Second",
iconType: "",
icon: "",
class: "ml-sub-menu",
groupTitle: false,
badge: "",
badgeClass: "",
role: [""],
submenu: [
{
path: "/multilevel/secondlevel/second1",
title: "Second 1",
iconType: "",
icon: "",
class: "ml-menu2",
groupTitle: false,
badge: "",
badgeClass: "",
role: [""],
submenu: [],
},
{
path: "/",
title: "Second 2",
iconType: "",
icon: "",
class: "ml-sub-menu2",
groupTitle: false,
badge: "",
badgeClass: "",
role: [""],
submenu: [
{
path: "/multilevel/thirdlevel/third1",
title: "third 1",
iconType: "",
icon: "",
class: "ml-menu3",
groupTitle: false,
badge: "",
badgeClass: "",
role: [""],
submenu: [],
},
],
},
],
},
{
path: "/multilevel/first3",
title: "Third",
iconType: "",
icon: "",
class: "ml-menu",
groupTitle: false,
badge: "",
badgeClass: "",
role: [""],
submenu: [],
},
],
},