ionic side drawer or hamburger menu support

ion-menu can be used to support side drawer or hamburger menu on ios and android devices. There are some notes to use the ion-menu function.

ion-menu usually are defined in app component html file, and they are identified by menuId attribute. If multiple ion-menu elements are configured, then only the last one is enabled.

 <ion-menu side="start" contentId="main" menuId="menu1" disabled="false">

    <ion-header>

      <ion-toolbar>

        <ion-title>Menu 1</ion-title>

      </ion-toolbar>

    </ion-header>

    <ion-content>

       <ion-list lines="none">

      <ion-menu-toggle>

        <ion-item routerLink="/places/search">

          <ion-icon name="business" slot="start"></ion-icon>

          <ion-label>Search Places</ion-label>

        </ion-item>

      </ion-menu-toggle>

      <ion-menu-toggle>

        <ion-item routerLink="/places/offers">

          <ion-icon name="checkbox-outline" slot="start">

          </ion-icon>

          <ion-label>Your Booking</ion-label>

        </ion-item>

      </ion-menu-toggle>

      <ion-menu-toggle>

        <ion-item (click)="onExit()" button>

          <ion-icon name="exit" slot="start">

          </ion-icon>

          <ion-label>Logout</ion-label>

        </ion-item>

      </ion-menu-toggle>

      </ion-list>

    </ion-content>

  </ion-menu>

In ion-pages, it can use ion-menu-button to show a side drawer or hamburger menu icon using ion-menu-button element as below. The menu attribute indicates which menu element (menu2 in this case) will show when user clicks the side drawer menu icon

<ion-header>

  <ion-toolbar>

    <ion-title>My Offers</ion-title>

    <ion-buttons slot="start">

      <ion-menu-button menu="menu2"></ion-menu-button>

    </ion-buttons>

    <ion-buttons slot="primary">

      <ion-button routerLink="/places/offers/new">

          <ion-icon name="add" slot="icon-only"></ion-icon>

      </ion-button>

    </ion-buttons>

  </ion-toolbar>

</ion-header>

However, in order to show the side drawer or hamburger menu icon on the page toolbar, the specified menu element must be enabled. An easy way to do so it enable it by calling the MenuController's enabled method as below. When enabling a menu element, all other menu elements will be automatically disabled.

  constructor(private menuCtrl: MenuController) { }

  ngOnInit() {

    this.menuCtrl.enable(true, 'menu2');

  }

In case needed, you can also use the below method to query all available menu element's status. 

      const m  = await this.menuCtrl.getMenus();

      m.forEach(el => {

        console.log(el.menuId);

        el.isOpen().then(d => {console.log('isOpen in loop: ', d); });

        console.log( 'isDisabled in loop: ', el.disabled);

      });

Note javascript await cannot be used inside forEach method, so then method is used to log the async method isOpen's result. Otherwise, using await is a better option to log the result synchronously when handling promise as return value as below

      console.log('menu 1 is Open', await this.menuCtrl.isOpen(el.menuId));

      console.log('menu1 is disabled', await this.menuCtrl.isEnabled(el.menuId));

When a menu item is clicked and handled, the menu will not close automatically. To close the menu automatically, the ion-item needs to be wrapped inside an ion-menu-toggle element. The ionic document is not very helpful in many cases.