<!DOCTYPE html>
<html mode="ios">

<head>
  <title>Ionic 2 QuickStart</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- 1. Load libraries -->
  <script src='https://unpkg.com/@ionic/core@4.0.0-alpha.7/dist/ionic.js'></script>
</head>

<!-- 3. Display the application -->

<body>
  <ion-app>
    <ion-split-pane>
      <ion-menu menu-id="myMenu">
        <ion-header>
          <ion-toolbar>
            Menu
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
            <ion-item button>
              <ion-label full>
                Test
              </ion-label>
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-menu>
      <div class="ion-page" main>
        <ion-header>
          <ion-toolbar>
            <ion-buttons slot="start">
              <ion-menu-toggle menu="myMenu">
                <ion-button>
                  <ion-icon name="menu"></ion-icon>
                </ion-button>
              </ion-menu-toggle>
            </ion-buttons>
            <ion-title>Test menu button</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content padding>
          <p>Test menu button</p>
          <ion-button onclick="openMenu()">Open menu</ion-button>
        </ion-content>
      </div>
    </ion-split-pane>
  </ion-app>

  <script>
    const menu = document.querySelector('ion-menu[menu-id="myMenu"]');

    function openMenu() {
      menu.open();
    }
  </script>
</body>

</html>