Sidebar Menu Customization
menu Sidebar Menu Customization Overview
routes.json
(for Default and Horizontal sidebars) or
routes-minimal.json
(for the Minimal sidebar)
located in the src/assets/data/ directory, and the interface sidebar.metadata.ts
located in the src/app/layout/sidebar/ directory. These files
allow you to define the structure and appearance of the sidebar menu across all
layout types.
code Sidebar Metadata Interface
The sidebar.metadata.ts
file defines the TypeScript interface for the sidebar menu items.
This
interface specifies the properties that each menu item can have.
// Defines the structure for a sidebar menu item
export interface RouteInfo {
path: string; // The route path for the menu item
title: string; // The display title of the menu item
iconType: string; // The type of icon to use (e.g., 'feather')
icon: string; // The name of the icon to display
class: string; // CSS class for the menu item
groupTitle: boolean; // Whether the item is a group title
badge: string; // Text for the badge
badgeClass: string; // CSS class for the badge
submenu: RouteInfo[]; // Array of submenu items
permissions?: string[]; // Optional permissions for role-based access
role?: string[]; // Optional role for role-based access
}
storage Routes Configuration File
The routes.json
file is where you define the actual structure of the sidebar menu.
This file contains an array of route objects, each representing a
menu
item.
{
"routes": [
// ... array of route objects
]
}
add_box Creating a Single Menu Item
To create a single menu item without any sub-menus, add an object with
the following structure to the routes array in your routes.json
file:
{
"path": "/calendar",
"title": "Calendar",
"iconType": "feather",
"icon": "calendar",
"class": "",
"groupTitle": false,
"badge": "",
"badgeClass": "",
"submenu": [],
"role": ["ADMIN", "DOCTOR"]
}
dehaze Creating a Multilevel Dropdown Menu
To create a multilevel dropdown menu, you can nest submenu items within
each other. Use the following structure in your routes.json
file:
{
"path": "",
"title": "Appointments",
"iconType": "feather",
"icon": "clipboard",
"class": "menu-toggle",
"groupTitle": false,
"badge": "",
"badgeClass": "",
"role": ["ADMIN"],
"submenu": [
{
"path": "/appointments/book-appointment",
"title": "Book Appointment",
"iconType": "",
"icon": "",
"class": "ml-menu",
"groupTitle": false,
"badge": "",
"badgeClass": "",
"submenu": [],
"role": ["ADMIN"]
},
{
"path": "/appointments/view-appointments",
"title": "View Appointments",
"iconType": "",
"icon": "",
"class": "ml-menu",
"groupTitle": false,
"badge": "",
"badgeClass": "",
"submenu": [],
"role": ["ADMIN"]
}
]
}
view_sidebar Sidebar Layout Settings
MediDash supports three distinct sidebar layouts:
Default, Minimal, and Horizontal.
You can switch between these modes by modifying the sidebar_type
property in your global configuration file located at src/app/config/config.service.ts.
export class ConfigService {
// ...
this.configData = {
layout: {
sidebar: {
// Set to 'default', 'minimal', or 'horizontal'
sidebar_type: 'minimal',
}
}
};
}
Component Locations & Data Sources
The user interface logic and menu configurations are handled differently depending on your active layout:
- folder
Default Sidebar:
src/app/layout/sidebar/
Data source:src/assets/data/routes.json - folder
Minimal Sidebar:
src/app/layout/sidebar-minimal/
Data source:src/assets/data/routes-minimal.json - folder
Horizontal Menu:
src/app/layout/horizontal-sidebar/
Data source:src/assets/data/routes.json