Ionic4: The hamburger icon of th sidemenu disappears refreshing the page

Ionic Framework ionic-v3
1

Hi,
I have a sidemenu app done with Ionic4.

Redirecting to the pages of this app after the login, or refreshing the page the hamburger icon of the sidemenu disappears.
If I restart the app with the user already logged the icon returns back.
This is the side menu:

11

This is the page before:

11

and after a refresh:

11

This is the header of each page:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start" >
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

Is there a way to avoid this problem?

Thank you very much

cld

1 Like
2

Well, it shouldn’t be happening

Can you post an example to github so we can see what is causing it?

3

Hi,
this is the repository on GitHub .
You can download it and run “npm install”.
You can log in with any username and password, it is always accepted.

I execute the app with: ionic serve -lcs

  • After the login, you are redirected to a page that has the hamburger but it isn’t shown (it should be visible, because the page contains the menu). This is the first problem.

  • If you stop the app and execute again “ionic serve -lcs” the page appears with the hamburger menu, and you can use it.

  • if you refresh the page, the hamburger disappears again. This is the second problem.

Is there a problem with this component?

Thank you

4

Your navigation is a bit confusing to me, however, as a first step can you add autoHide=‘false’ to your menus?

<ion-menu-button autoHide='false'></ion-menu-button>

I can only navigate to the member/home page, and the menu doesn’t work there, so ther may be other problems?

5

Yes, it is true, with this modification the menu appears but doesn’t work.
However, I’ve found the problem.

I had in the login page this code

  constructor(private route: Router,
              private menuCtrl: MenuController,
              private authService: AuthenticationmanagerService) {
    this.menuCtrl.enable(false);
  }

It’s crazy I know.
So it’s my fault, I don’t know why I wrote this.
So is the command this.menuCtrl.enable(false); that is disabling the menu.
I don’t know why I put this code in a previous version of the app.

Why do say this?
The code of the example is extracted from a real app, I’ve moved the pages into two directories “public” and “members”. The first is for the pages that don’t require authentication the second for the pages that require authentication. I like to have the pages into another directory that “src/app” because I don’t like to have: pages, services, guards, etc. in the same directory.
Were you referring to this?

However, thank you very much for your time :slight_smile: and your suggestions.

claudio

1 Like
6

I just meant that I wasn’t familiar with your app. It seems strange to flash the login screen if a user is logged-in, is that what happens?

Anyway, glad you got it resolved!

7

Yes, that’s true it’s a problem that I will solve soon.

cld

8

Your solution helps me to retain the drawer icon but the sidemenu doesn’t open. On click of drawer icon nothing happens.

9

Please start a new thread.

Please provide some details about your problem so that someone can help you.

10

just as @ionicGeoff said

add menuController to your constructor

private menuCtrl: MenuController {
this.menuCtrl.enable(true)
}

This works