docs(menu): add playgrounds for menu sides and multiple menus (#3049)

docs/api/menu.md

@@ -18,27 +18,26 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 
-The Menu component is a navigation drawer that slides in from the side of the current view.
-By default, it slides in from the left, but the side can be overridden.
-The menu will be displayed differently based on the mode, however the display type can be changed to any of the available menu types.
-The menu element should be a sibling to the root content element.
-There can be any number of menus attached to the content.
-These can be controlled from the templates, or programmatically using the MenuController.
+The menu component is a navigation drawer that slides in from the side of the current view. By default, it uses the start side, making it slide in from the left for LTR and right for RTL, but the side can be overridden. The menu will be displayed differently based on the mode, however the display type can be changed to any of the available menu types.
+
+The menu element should be a sibling to the root content element. There can be any number of menus attached to the content. These can be controlled from the templates, or programmatically using the `MenuController`.
 
 ## Basic Usage
 
-import BasicUsage from '@site/static/usage/v7/menu/basic/index.md';
+import Basic from '@site/static/usage/v7/menu/basic/index.md';
+
+<Basic />
 
-<BasicUsage />
 
 ## Menu Toggle
 
-The [ion-menu-toggle](./menu-toggle) component can be used to create custom button that can open or close the menu.
+The [menu toggle](./menu-toggle) component can be used to create custom button that can open or close the menu.
 
 import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md';
 
 <MenuToggle />
 
+
 ## Menu Types
 
 The `type` property can be used to customize how menus display in your application.
@@ -47,6 +46,27 @@ import MenuType from '@site/static/usage/v7/menu/type/index.md';
 
 <MenuType />
 
+
+## Menu Sides
+
+Menus are displayed on the `"start"` side by default. In apps that use left-to-right direction, this is the left side, and in right-to-left apps, this will be the right side. Menus can also be set to display on the `"end"` side, which is the opposite of `"start"`.
+
+If menus on both sides are needed in an app, the menu can be opened by passing the `side` value to the `open` method on `MenuController`. If a side is not provided, the menu on the `"start"` side will be opened. See the [multiple menus](#multiple-menus) section below for an example using `MenuController`.
+
+import Sides from '@site/static/usage/v7/menu/sides/index.md';
+
+<Sides />
+
+
+## Multiple Menus
+
+When multiple menus exist on the same side, we need to enable the menu that we want to open before it can be opened. This can be done by calling the `enable` method on the `MenuController`. We can then call `open` on a menu based on its `menuId` or `side`.
+
+import Multiple from '@site/static/usage/v7/menu/multiple/index.md';
+
+<Multiple />
+
+
 ## Theming
 
 ### CSS Shadow Parts

static/code/stackblitz/v7/html/index.ts

@@ -1,6 +1,6 @@
 import { defineCustomElements } from '@ionic/core/loader';
 
-import { createAnimation, createGesture, loadingController, modalController, pickerController, toastController } from '@ionic/core';
+import { createAnimation, createGesture, loadingController, menuController, modalController, pickerController, toastController } from '@ionic/core';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/core/css/core.css';
@@ -24,6 +24,7 @@ import './theme/variables.css';
 defineCustomElements();
 
 (window as any).loadingController = loadingController;
+(window as any).menuController = menuController;
 (window as any).modalController = modalController;
 (window as any).pickerController = pickerController;
 (window as any).toastController = toastController;

static/usage/v7/menu/multiple/angular/example_component_html.md

@@ -0,0 +1,43 @@
+```html
+<ion-menu menuId="first-menu" contentId="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>First Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the first menu content.</ion-content>
+</ion-menu>
+
+<ion-menu menuId="second-menu" contentId="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Second Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the second menu content.</ion-content>
+</ion-menu>
+
+<ion-menu side="end" contentId="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>End Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the end menu content.</ion-content>
+</ion-menu>
+
+<div class="ion-page" id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <p>Tap a button below to open a specific menu.</p>
+
+    <ion-button expand="block" (click)="openFirstMenu()">Open First Menu</ion-button>
+    <ion-button expand="block" (click)="openSecondMenu()">Open Second Menu</ion-button>
+    <ion-button expand="block" (click)="openEndMenu()">Open End Menu</ion-button>
+  </ion-content>
+</div>
+```

static/usage/v7/menu/multiple/angular/example_component_ts.md

@@ -0,0 +1,29 @@
+```ts
+import { Component } from '@angular/core';
+import { MenuController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private menuCtrl: MenuController) {}
+
+  openFirstMenu() {
+    // Open the menu by menu-id
+    this.menuCtrl.enable(true, 'first-menu');
+    this.menuCtrl.open('first-menu');
+  }
+
+  openSecondMenu() {
+    // Open the menu by menu-id
+    this.menuCtrl.enable(true, 'second-menu');
+    this.menuCtrl.open('second-menu');
+  }
+
+  openEndMenu() {
+    // Open the menu by side
+    this.menuCtrl.open('end');
+  }
+}
+```

static/usage/v7/menu/multiple/demo.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Menu</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <script type="module">
+      import { menuController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.menuController = menuController;
+    </script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-menu menu-id="first-menu" content-id="main-content">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>First Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">This is the first menu content.</ion-content>
+      </ion-menu>
+
+      <ion-menu menu-id="second-menu" content-id="main-content">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Second Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">This is the second menu content.</ion-content>
+      </ion-menu>
+
+      <ion-menu side="end" content-id="main-content">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>End Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">This is the end menu content.</ion-content>
+      </ion-menu>
+
+      <div class="ion-page" id="main-content">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <p>Tap a button below to open a specific menu.</p>
+
+          <ion-button expand="block" onclick="openFirstMenu()">Open First Menu</ion-button>
+          <ion-button expand="block" onclick="openSecondMenu()">Open Second Menu</ion-button>
+          <ion-button expand="block" onclick="openEndMenu()">Open End Menu</ion-button>
+        </ion-content>
+      </div>
+    </ion-app>
+
+    <script>
+      async function openFirstMenu() {
+        // Open the menu by menu-id
+        await menuController.enable(true, 'first-menu');
+        await menuController.open('first-menu');
+      }
+
+      async function openSecondMenu() {
+        // Open the menu by menu-id
+        await menuController.enable(true, 'second-menu');
+        await menuController.open('second-menu');
+      }
+
+      async function openEndMenu() {
+        // Open the menu by side
+        await menuController.open('end');
+      }
+    </script>
+  </body>
+</html>

static/usage/v7/menu/multiple/index.md

@@ -0,0 +1,27 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react from './react.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/menu/multiple/demo.html"
+  devicePreview
+/>

static/usage/v7/menu/multiple/javascript.md

@@ -0,0 +1,62 @@
+```html
+<ion-menu menu-id="first-menu" content-id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>First Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the first menu content.</ion-content>
+</ion-menu>
+
+<ion-menu menu-id="second-menu" content-id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Second Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the second menu content.</ion-content>
+</ion-menu>
+
+<ion-menu side="end" content-id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>End Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the end menu content.</ion-content>
+</ion-menu>
+
+<div class="ion-page" id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <p>Tap a button below to open a specific menu.</p>
+
+    <ion-button expand="block" onclick="openFirstMenu()">Open First Menu</ion-button>
+    <ion-button expand="block" onclick="openSecondMenu()">Open Second Menu</ion-button>
+    <ion-button expand="block" onclick="openEndMenu()">Open End Menu</ion-button>
+  </ion-content>
+</div>
+
+<script>
+  async function openFirstMenu() {
+    // Open the menu by menu-id
+    await menuController.enable(true, 'first-menu');
+    await menuController.open('first-menu');
+  }
+
+  async function openSecondMenu() {
+    // Open the menu by menu-id
+    await menuController.enable(true, 'second-menu');
+    await menuController.open('second-menu');
+  }
+
+  async function openEndMenu() {
+    // Open the menu by side
+    await menuController.open('end');
+  }
+</script>
+```