Ionic Menu Button unable to open menu after navigate to the page with certain flow

Ionic Framework Ionic Angular
1

Hi guys!

I have a page (called as A page) that contains 2 menus, one is on left side (open via menu button in page), another one is on right side (open via header component’s menu button).

The problem happens when I navigate to the page with this flow:
homepage > A page > B page > C page > A page

The left menu button will disappear with this flow. After doing some research, I add autoHide=‘false’ as the code shown below.

<ion-menu-button menu="leftMenu" autoHide='false' class="ion-no-padding" style="margin-bottom: 3px">

Then the menu button appear, but the button is not working, no action taken when I click it.
I tried to add toggle function in ts file and call the toggle function when user click the button, but still not working.

This problem will exists until I refresh the page.

Is there any way to solve this problem?

1 Like
2

Updated: the menu button not working is due to A page menu is not removed when navigate away. When we navigate again to A page, the old menu and new menu on left side is overlapped tgt. As document mentioned, there is only one menu get activated in a time. So, the new menu is not working now.

Question: Is there any way to activate only the latest menu and deactivate the old menu?

I have tried to put below code in ionViewWillEnter()
this.menuCtrl.getMenus().then((menu) => {
if(menu.length > 2) {
menu[1].disabled = false
menu[2].disabled = true
}
})

the menu button is able to show but still not working when get clicked…

3

Hi
I have the same issue, but this.menuCtrl.getMenus() only get one menu, and the children seams to be ok.
Did you find a solution to this issue?
Thanks in advance.

4

I am just facing this same problem. In my case, the side menu was included in a header component that I throw in all my pages, with a property called dialog to control its appearance: when dialog=false, the ion-menu-button is showed; when dialog=true, then the back menu button is showed.

When I enter my main page (dialog=false), I can see the menu button and pressing it shows the side menu (that is defined inside the header component). I then navigate to a secondary page (dialog=true) and the menu button is not displayed. I then nav back to the main page and the menu button shows again but now pressing it doesn’t show the side menu.

Then I stumble with your post and realize that the second page, altough not showing the menu button, its declaring the side menu all over again, so what I did was to use *ngIf to only create the menu when dialog=false:

<ion-menu contentId="app-header" side="end" *ngIf="!dialog">
    <ion-header >
        <ion-toolbar color="primary">
            <div class="logo ion-align-items-center">
                <ion-img src="assets/Luna.logo.png"></ion-img>
            </div>
        </ion-toolbar>
    </ion-header>    
    ...

and that did the trick!! Now I can show the side menu after naving back to my home page from a secondary page!.