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;
role: 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: "",
role: ["All"],
submenu: [],
},
// Admin Modules
{
path: "",
title: "Home",
iconType: "material-icons-two-tone",
icon: "home",
class: "menu-toggle",
groupTitle: false,
badge: "",
badgeClass: "",
role: ["Admin"],
submenu: [
{
path: "/admin/dashboard/main",
title: "Dashboard 1",
iconType: "",
icon: "",
class: "ml-menu",
groupTitle: false,
badge: "",
badgeClass: "",
role: [""],
submenu: [],
},
{
path: "/admin/dashboard/dashboard2",
title: "Dashboard 2",
iconType: "",
icon: "",
class: "ml-menu",
groupTitle: false,
badge: "",
badgeClass: "",
role: [""],
submenu: [],
},
],
},
{
path: "calendar",
title: "Calendar",
iconType: "material-icons-two-tone",
icon: "event_note",
class: "",
groupTitle: false,
badge: "New",
badgeClass: "badge bg-blue sidebar-badge float-right",
role: ["Admin", "Doctor"],
submenu: [],
},
......
];
Single Menu Setting
For single menu you have to write following code in sidebar-items.ts file
{
path: "calendar",
title: "Calendar",
iconType: "material-icons-two-tone",
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
sidebar-items.ts file
{
path: "",
title: "Multi level Menu",
iconType: "material-icons-two-tone",
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: [],
},
],
},