My example of the simplest use of ion-menu

Ionic Framework
1

Hi all,

I’m revising my previous version of this posting, looking for help with migrating the simplest use of Ionic 2 side menu to an Ionic 4 side menu. What I want to do is define the ion-menu in the same page with the page content. I’m not using the menu to appear on multiple pages, navigation, etc. The content of the ion-menu refers to the same member variables /functions as in the body content. I couldn’t find an example on the inner tubes that is this simple.

So here it is folks:

In the page controller for all of this we have:

  public leftMenuItem : string = "leftItem";
  public rightMenuItem : string = "rightItem";
  public bodyItem: string = "bodyItem";

The page is then: 

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>The Title</ion-title>

        <ion-buttons slot="start">
            <ion-menu-button
                    autoHide="false"
                    menu="left_menu"
            ></ion-menu-button>
        </ion-buttons>

        <ion-buttons slot="primary">
            <ion-menu-button
                    autoHide="false"
                    menu="right_menu"
            ></ion-menu-button>
        </ion-buttons>

    </ion-toolbar>
</ion-header>

<ion-content id="overview_content" padding>
    Overview content here
</ion-content>

<!--
side pull menu (left),
- identified by menuId="left_menu"
- contentId="left_menu_content" refers to content inside the <ion-menu/> tag
-->
<ion-menu
        side="start"
        type="overlay"
        menuId="left_menu"
        swipeGesture="true"
        contentId="left_menu_content"

>
    <ion-header>
        <ion-toolbar color="primary">
            <ion-title>Left Menu</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content id="left_menu_content">
        <ion-list>
            <ion-item>Menu Item foo={{leftMenuItem}}</ion-item>
        </ion-list>
    </ion-content>
</ion-menu>


<!--
side pull menu (right),
- identified by menuId="right_menu"
- contentId="right_menu_content" refers to content inside the <ion-menu/> tag
-->
<ion-menu
        side="end"
        type="overlay"
        menuId="right_menu"
        swipeGesture="true"
        contentId="right_menu_content"

>
    <ion-header>
        <ion-toolbar color="primary">
            <ion-title>Right Menu</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content id="right_menu_content">
        <ion-list>
            <ion-item>Menu Item foo={{rightMenuItem}}</ion-item>
        </ion-list>
    </ion-content>
</ion-menu>