Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Sidebar Navigation Issue of sub menu accordions active in Angular


Hello,

I have found a very weird issue in the navigation of angular versions of metronic 8.
Try to follow the following procedure.

1. Please visit this link. Click here
2. Click on Pages > Profile > Projects in left side bar navigation and wait for page to load.
3. Now click on Dashboard or Layout Builder in left side bar navigation and wait for page to load.
4. You will see Pages > Profile > Projects is still active in the side bar navigation but which should not be like that. I am sharing the screenshot for the reference.

Please let me know if you guys need a video for the same..

Link for the image - Click Here


Thanks.


Text formatting options
Submit

Replies (6)


Hi,
Recently being noticed that the issue still exists and i took a look at it.
Of my opinion the problem is related with routing changes when navigation is not coming from side menu but from any other link inside the app.

I made a few modifications to ./src/app/_metronic/layout/components/header/header.component.ts: at
routingChanges() as below:


routingChanges() {
var activeMenuItem: HTMLElement;
const routerSubscription = this.router.events.subscribe((event) => {
if (event instanceof NavigationStart) {
const findings: HTMLCollectionOf<Element> = document.getElementsByClassName("show here");
if (findings.length > 0)
{
for (let i = 0; i < findings.length; i++) {
activeMenuItem = findings[i] as HTMLElement
}
}
}
if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
if (activeMenuItem) {
activeMenuItem.classList.remove("show", "here", "hover");
var subMenu = activeMenuItem.querySelector(".menu-sub");
if (subMenu) {
subMenu.classList.remove("show", "menu-active-bg");
}
}
MenuComponent.reinitialization();
}
});
this.unsubscribe.push(routerSubscription);
}


The idea is to get the active menu item just before router change and when navigation end reset the state of the previous active menu item.

I tested and works ok.

It would be more efficient if this logic was being implemented inside MenuComponent.ts at: ./src/app/_metronic/kt/components but this requires more changes while have to be transformed to angular decorated @Component.

Hope this workaround helps someone.

Thank you.



Hi Durvesh,

To address the issue with the sidebar navigation sub-menu accordions, you can make the following changes into file /src/app/_metronic/kt/components/MenuComponent.ts:

1. Add `this._hideAccordions(element)` inside the `_link` function:

private _link = (element: HTMLElement, e: Event) => {
// ...
this._hideAccordions(element);
// ...
}

This ensures that the accordions are hidden when a new item is linked.

2. Change `.show[data-kt-menu-trigger]` to `.hover[data-kt-menu-trigger]`:

private _hideAccordions = (item: HTMLElement) => {
const itemsToHide = this.element.querySelectorAll(".hover[data-kt-menu-trigger]");
// ...
}

By using `.hover[data-kt-menu-trigger]` instead of `.show[data-kt-menu-trigger]`, the accordions will be triggered on hover instead of being shown by default.

Make sure to apply these changes to the relevant sections of your code to resolve the issue with the sub-menu accordions in the sidebar navigation.

We will include the fix in the update soon.

Thanks



Hello,

I found out that replacing routerLinkActive="menu-active-bg" with "here show" in the sub-accordion item fixes the sub menu not collapsing after changing routes.
The parent item still shows up as active until you click it again, though. Still trying to find a workaround.

Hope this helps.



Hi,

Thank you so much for looking into this. I have added your input at my end. But I will still look for the final solution from your end.

Appreciated.
Thanks & Regards
Durvesh Parmar



Hi Durvesh,

Thank you for your feedback. We are aware of the issue now. We will check it further to fix the issue.

Thanks



Hi,

Any update on this?

Regards.


Text formatting options
Submit
Text formatting options
Submit