Adding ion-menu inside a page [Partially Solved]


#1

Hi,

I am trying to add an ion-menu inside a page like below. I would like to see that menu on the right.

<ion-navbar *navbar calm>
  <ion-title>Page Title</ion-title>
  
  <ion-buttons start>
    <button (click)="logout()"><ion-icon name="log-out"></ion-icon></button>
  </ion-buttons>
</ion-navbar>

<ion-content #dashboardPage class="unitDetails">
...à
</ion-content>

I tried to add the ion-menu before the ion-navbar and within ion-navbar but none of them showed the hamburger icon. What am I missing?

Thanks in advance


#2

I found my solution!

The [content] value from ion-menu has to go to ion-content and add a button to ion-navbar with a function that toggle the menu


#3

Hi Icarus, can you please post an example of your final working code?


#4

page.html

<ion-navbar *navbar calm>
  <ion-title>Title</ion-title>
 
  <ion-buttons end>
    <button (click)="toggleMenu()"><ion-icon name="menu"></ion-icon></button>
  </ion-buttons>
</ion-navbar>

<ion-menu side="right" [content]="content">
<!--<ion-menu side="right" type="overlay" [content]="dashboard">-->
  
  <!-- Because there is not overlay, the toolbar is not shown -->
  <!-- For now, it helps to see the first item from the list -->
  <ion-toolbar>
    <ion-title>Tools</ion-title>
  </ion-toolbar>
  
  <ion-content>
    <ion-list>
      <button ion-item (click)="toolMenuOpenPage(newPage)">
        Pre-Commission
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-content #content>
...
</ion-content>

page.ts

  constructor(menuCtrl: MenuController) {
    this.menuCtrl = menuCtrl;
  }
  toggleMenu() {
    this._menuCtrl.toggle('right');
  }

Page with sidemenu and tabs
#5

My solution is not perfect though.

Now, my issue is when I click an item from the ion-menu, the current page does not disappear for the new one. It is just grayed out.

I don’t want to set a new root, so I need to figure out what I need to do next to be able to push the new page and be able to come back.

If you find something, let me know


#6

Thanks Icarus, I’ll let you know if I find a solution.