The sidebar provides a convenient way to navigate the application. Only one sidebar is supported per angular application. This means that the sidebar is basically a singleton object.
The Sidebar can be added to the page using the BaSidebar
component:
<ba-sidebar></ba-sidebar>
The sidebar contains a <ba-menu></ba-menu>
component which defines and renders the application menu based on routes provided. Generally the ba-menu
component can be used separately from ba-sidebar
.
All menu items information is defined inside the data
property of a route.
All menu items are located inside the src/app/app.routes.ts
file. Each route item can have a menu
property under data
defining a menu item:
{
// first, router configuration
path: 'dashboard',
component: Dashboard,
data: {
// here additionally we define how the menu item should look
menu: {
title: 'Dashboard', // menu title
icon: 'ion-android-home', // menu icon
selected: false, // selected or not
expanded: false, // expanded or not (if item has children)
order: 0, // item order in the menu list,
hidden: true // hide menu item from a list but keep related features (breadcrumbs, page title)
}
}
}
You also can define a list of sub-menu items like this:
{
// parent route
path: 'charts',
component: Charts,
data: {
// parent menu configuration
menu: {
title: 'Charts',
icon: 'ion-stats-bars',
selected: false,
expanded: false,
order: 200,
}
},
// children routes
children: [
{
path: 'chartist-js',
component: ChartistJs,
data: {
// children menu item configuration
menu: {
title: 'Chartist.Js',
}
}
}
]
}
You also can define a menu item not connected to any existing route in the application:
{
path: '', // just leave the path empty
data: {
// and define your menu item
menu: {
title: 'External Link', // title
url: 'http://akveo.com', // custom url
icon: 'ion-android-exit', // icon
order: 800, // order
target: '_blank' // target property of <a> tag (_self, _blank, etc)
}
}
}