[Solved] Problems with Persistent Menu

Ionic Framework ionic-v3
1

Hello there,

I’m currently trying to create a persistent menu in my app but the “persistent” part of it is not working properly. The MenuToggle button appears and works correctly the first time you are sent to the new rootPage from the loginPage, but it dissapears after selecting a new root page from the side menu.

This is the code for my menu.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { CentroCostoMainPage } from '../centroCostoMain/centroCostoMain';
import { ProyectoMainPage } from '../proyectoMain/proyectoMain';

@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html'
})

export class MenuPage {

  rootPage;
  centroCostoMainPage;
  proyectoMainPage;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.rootPage = CentroCostoMainPage;
    this.centroCostoMainPage = CentroCostoMainPage;
    this.proyectoMainPage = ProyectoMainPage;
  }

  openPage(p) {
    this.navCtrl.setRoot(p);
  }

}

And for the menu.html

<ion-menu persistent="true" [content]="content" style="font-family:BoldYanoneKaffeesatz;">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menú</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button ion-item (click)="openPage(centroCostoMainPage)">
        Reporte de Presupuesto - Centros de Costo
      </button>
      <button ion-item (click)="openPage(proyectoMainPage)">
        Reporte de Presupuesto - Proyectos
      </button>
      <button ion-item menuClose>
        Cerrar Menu
      </button>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>

And finally for both CentroCostoMainPage and ProyectoMainPage the navbar code is:

<ion-header>
  <ion-navbar hideBackButton color="header">
    <ion-buttons left>
      <button ion-button icon-only (click)="logOut()">
        <ion-icon name="md-log-out"></ion-icon>
      </button>
    </ion-buttons>
    <button ion-button menuToggle right>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>

I’m pretty new to all this, so maybe I forgot something important. Any help or correction is appreciated.

2

hey @dadelcas_94

Did you create your project using ionic “sidemenu” option?
Why don’t you put your menu code inside app.html and app.component.ts to make it available every and use it where you want?

3

I did not. I started it as a blank project some months ago. Just recently I was asked to add a side menu in there.

Well, the menu should load after a login screen and according to this example: An example of the Ionic 2 Menu Component it was the right thing to do. Should I move the code to those files?

Also, I have been trying to use the MenuController to force the toggle with no luck even though the .get returns the correct menu instance every time.

Thanks a lot for your help.

4

Put the menu code into the app.html and the code of menu.ts go into app.component, or generate a new project with sidemenu option and just follow the example

5

Alright, I will give it a try. Thanks a lot for the help!

Edit: It worked, now I just need to disable the menu in the login screen and everything should be fine. Thanks for the help!

6

@dadelcas_94 will you please share the piece of code? i have the same issue?