p-menubar highlight root when submenu is clicked

[csliston]

Hi,
I would like to have the root node of the menu highlight alone with the submenu. That way when the menus are collapse you know which menu group you are in. So if I click on Protocol Data I would like both Data and Protocol Data to be highlighted, is this possible?

Code: Select all

navbar-component.html
<p-menubar [model]="items" [style]="{'margin-left': '310px', 'padding-top': '10px', 'height' : '65px', 'border' : '0', 'border-radius': '0px'}">
    <button pButton label="Logout" icon="fa fa-sign-out"></button>
</p-menubar>

navbar-component.ts
this.items = [
    {
        label: 'Home',
        icon: 'fa fa-home',
        'routerLink': ['/home']
    },
    {
        label: 'Login',
        icon: 'fa fa-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']
    }
];
        
app.module.ts
const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home' },
    { path: 'home', component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: 'data', component: DataHomeComponent },
    { path: 'dataProtocol', component: DataProtocolComponent },
    { path: 'reports', component: ReportsComponent }
    // , { path: 'reportsforecast', component: ReportsForecastComponent }
];

        

[yigitfindikli]

Hi,
I would like to have the root node of the menu highlight alone with the submenu. That way when the menus are collapse you know which menu group you are in. So if I click on Protocol Data I would like both Data and Protocol Data to be highlighted, is this possible?

Code: Select all

navbar-component.html
<p-menubar [model]="items" [style]="{'margin-left': '310px', 'padding-top': '10px', 'height' : '65px', 'border' : '0', 'border-radius': '0px'}">
    <button pButton label="Logout" icon="fa fa-sign-out"></button>
</p-menubar>

navbar-component.ts
this.items = [
    {
        label: 'Home',
        icon: 'fa fa-home',
        'routerLink': ['/home']
    },
    {
        label: 'Login',
        icon: 'fa fa-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']
    }
];
        
app.module.ts
const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home' },
    { path: 'home', component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: 'data', component: DataHomeComponent },
    { path: 'dataProtocol', component: DataProtocolComponent },
    { path: 'reports', component: ReportsComponent }
    // , { path: 'reportsforecast', component: ReportsForecastComponent }
];

        

Hi,
I am not sure, maybe you can use routerLinkActiveOptions {exact:true} like that;

Code: Select all

const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home', routerLinkActiveOptions: {exact:true} },
    { path: 'home', component: HomeComponent, routerLinkActiveOptions: {exact:true} },
    { path: 'login', component: LoginComponent, routerLinkActiveOptions: {exact:true}},
    { path: 'data', component: DataHomeComponent, routerLinkActiveOptions: {exact:true}},
    { path: 'dataProtocol', component: DataProtocolComponent, routerLinkActiveOptions: {exact:true} },
    { path: 'reports', component: ReportsComponent, routerLinkActiveOptions: {exact:true}}
    // , { path: 'reportsforecast', component: ReportsForecastComponent, routerLinkActiveOptions: {exact:true}}
];

Best Regards.