I am using p-menubar for my navigation. I like the highlight when clicking on the parent node but when you click on a child it looks like nothing is select because all of the parents are not highlighted. How can I make the parent highlight when the child is selection. In this case Data highlighted when Protocol Data is selected.
Code: Select all
<p-menubar [model]="items" [style]="{'margin-left': '310px', 'padding-top': '10px', 'height' : '65px', 'border' : '0', 'border-radius': '0px'}">
<button pButton label="Logout" icon="pi pi-fw pi-sign-out"></button>
</p-menubar>
this.items = [
{
label: 'Home',
icon: 'pi pi-fw pi-home',
routerLink': ['/home']
},
{
label: 'Login',
icon: 'pi pi-fw pi-sign-in',
visible: !this.app.authenticated,
'routerLink': ['/login'],
},
{
label: 'Data',
icon: 'fa fa-database',
'routerLink': ['/data'],
items: [ {label: 'Protocol Data', 'routerLink': ['/dataProtocol']} ]
},
{
label: 'Reports',
icon: 'fa fa-table',
'routerLink': ['/reports']
}
];