bug: menu stop working in an application that has two main page with each a side menu

[iamkinetic]

Bug Report

Ionic version:
[x] 4.7.X
[x] 4.8.X
[x] 4.9.0
[x] 4.10

Current behavior:
Application has two main pages. Each of these pages have a different side menu. When navigating the application this way, the menu stop being displayed.

Expected behavior:
Side menu should not stop being displayed when navigating.

Steps to reproduce:

1. Open side menu from initial page and click "Page # 2 with menu # 2
2. Navigation works, and side menu # 2 is displayed.
3. Open side menu and click "Page # 1 with menu # 1".
4. Page # 1 is correctly loaded except the menu # 1 is not displayed anymore.
   

Related code:

Sample application on GitHub:
https://github.com/iamkinetic/ionic4-multiple-menus-bug

Ionic info:

Ionic:

 Ionic CLI : 5.2.1 (C:\Users\iamkinetic\AppData\Roaming\npm\node_modules\ionic)
 Ionic Framework : @ionic/angular 4.7.1
 @angular-devkit/build-angular : 0.801.3
 @angular-devkit/schematics : 8.1.3
 @angular/cli : 8.1.3
 @ionic/angular-toolkit : 2.0.0

Utility:

 cordova-res : not installed
 native-run : 0.2.7

System:

 NodeJS : v11.4.0 (C:\Program Files\nodejs\node.exe)
 npm : 6.10.2
 OS : Windows 10

[iamkinetic]

Does anyone knows of any work around for this bug?

[iamkinetic]

I believe #18683 may be related to this issue.

[iamkinetic]

@liamdebeasi Do you think you could take a look at this problem? I've tried fixing the problem for two weeks and this is the only thing preventing me from releasing a new version of our application.

If i need to rethink my navigation I will, but i'd like to be sure this is what causing my problem.

Thanks.

[iamkinetic]

Bug still present with @ionic/angular 4.8.0 + angular 8.2.3.

[iamkinetic]

This is my current "workaround" (it's far from perfect):
In my CanActive's guard, I've add some code to enable and make the menu works "correctly". I need to manually activate the menu to make it visible (even though it should already be visible) and then I need to add "menu-pane-visible" to the menu's classes. All of this in a setTimeout.

 setTimeout(async () => {
 await this.menuController.enable(true, 'my-menu');
 const menu = await this.menuController.get('my-menu');
 if (!menu.className.includes('menu-pane-visible')) {
 menu.className = menu.className + ' menu-pane-visible';
 }
 }, 200);

[liamdebeasi]

Sorry for the delay in response. Which version of Ionic did this issue start happening with?

[iamkinetic]

I've been porting my application from Ionic 3 to Ionic 4 since last may (only a few hours a month at first), so I've went through a few differents versions (from 4.1 to 4.9). The ported application wasn't really usable before mid-july and I was using Ionic 4.6 back then. I've just tried that version and the menu's bug was already present.

So I guess I can't really say for sure when the issue start happening.