Page 1 of 1

Having menu show correct route

Posted: 15 Nov 2017, 22:54
by phill_jones
Hi there!

The left bar menu of the Avalon theme is not displaying the correct route, for example:

Code: Select all

this.model = [
            { label: 'Dashboard', icon: 'fa fa-fw fa-home', routerLink: ['/dashboard'] },
            {
                label: 'Call Activity', icon: 'fa fa-fw fa-phone',
                items: [
                    { label: 'All Incoming', icon: 'im-icon im-icon-phone-incoming', badge: '0', routerLink: ['/calls/all'] },
                    { label: 'Answered', icon: 'im-icon im-icon-call-in', badge: '0', routerLink: ['/calls/ans'] },
                    { label: 'Missed', icon: 'im-icon im-icon-call-missed', badge: '0', routerLink: ['/calls/miss'] },
            ...
If I were to call https://my.domain/calls/ans directly - then ideally the "Call Activity" menu would be expanded and the "Answered" menu item shown as the selected route.

What actually happens is close - the "Call Activity" is NOT expanded, but if you click to expand, the 'Answered' is highlighted (although not styled correctly). So it is aware the active route.

Is this as designed? Or am I missing something?

I have got around this by adding an 'activeIndex' to AppMenuComponent class, and passing it trough to AppSubMenuComponent (making AppSubMenuComponent activeIndex an @Input)

Then in AppMenuComponent's ngOnInit()

Code: Select all

    getMenuIndexForRoute(route: string) {
        for (var i in this.model) {
            for (var n in this.model[i].items) {
                if (this.model[i].items[n].routerLink[0] == route)
                {
                    this.activeIndex = +i

                }
            }
        }
    }


This works - although the 'active' formatting on the submenu is not completely correct.

So if anyone can help with the following questions:

1) Is the default behavior I described as designed - our should the menu be route aware out of the box?

2) Is there better / best practice / recommended solution?


Any help would be gratefully received.

Thanks.


Phil

Re: Having menu show correct route

Posted: 30 Nov 2017, 13:43
by cagatay.civici
Actually, this has been discussed a couple of times in other places. The menu is actually aware of router, the active item gets "active-menuitem-routerlink" style class which highlights it differently than a selected item.

If you open;

https://www.primefaces.org/avalon-ng/#/forms

Components will be closed but if you open it forms will be highlighted. Issue here is components item has no route, it is just an element to group links so not sure if there is a clean way of implementing what you require. We'll check to see if we can find a solution to your requirement.

Re: Having menu show correct route

Posted: 19 Feb 2019, 22:15
by akinihsan
any news about this problem?