From d8f488965a077d72f7749f8f3073148daf8bff5b Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 18 Jul 2023 11:23:26 -0400
Subject: [PATCH 1/4] docs(menu): add playgrounds for sides and multiple menus

---
 docs/api/menu.md                              | 38 +++++++--
 .../angular/example_component_html.md         | 43 ++++++++++
 .../multiple/angular/example_component_ts.md  | 29 +++++++
 static/usage/v7/menu/multiple/demo.html       | 82 +++++++++++++++++++
 static/usage/v7/menu/multiple/index.md        | 27 ++++++
 static/usage/v7/menu/multiple/javascript.md   | 62 ++++++++++++++
 static/usage/v7/menu/multiple/react.md        | 71 ++++++++++++++++
 static/usage/v7/menu/multiple/vue.md          | 74 +++++++++++++++++
 static/usage/v7/menu/sides/angular.md         | 23 ++++++
 static/usage/v7/menu/sides/demo.html          | 39 +++++++++
 static/usage/v7/menu/sides/index.md           | 18 ++++
 static/usage/v7/menu/sides/javascript.md      | 23 ++++++
 static/usage/v7/menu/sides/react.md           | 41 ++++++++++
 static/usage/v7/menu/sides/vue.md             | 52 ++++++++++++
 14 files changed, 613 insertions(+), 9 deletions(-)
 create mode 100644 static/usage/v7/menu/multiple/angular/example_component_html.md
 create mode 100644 static/usage/v7/menu/multiple/angular/example_component_ts.md
 create mode 100644 static/usage/v7/menu/multiple/demo.html
 create mode 100644 static/usage/v7/menu/multiple/index.md
 create mode 100644 static/usage/v7/menu/multiple/javascript.md
 create mode 100644 static/usage/v7/menu/multiple/react.md
 create mode 100644 static/usage/v7/menu/multiple/vue.md
 create mode 100644 static/usage/v7/menu/sides/angular.md
 create mode 100644 static/usage/v7/menu/sides/demo.html
 create mode 100644 static/usage/v7/menu/sides/index.md
 create mode 100644 static/usage/v7/menu/sides/javascript.md
 create mode 100644 static/usage/v7/menu/sides/react.md
 create mode 100644 static/usage/v7/menu/sides/vue.md

diff --git a/docs/api/menu.md b/docs/api/menu.md
index 1918527a15a..8549e9a88a5 100644
--- a/docs/api/menu.md
+++ b/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
diff --git a/static/usage/v7/menu/multiple/angular/example_component_html.md b/static/usage/v7/menu/multiple/angular/example_component_html.md
new file mode 100644
index 00000000000..a81d2020f5d
--- /dev/null
+++ b/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>
+```
diff --git a/static/usage/v7/menu/multiple/angular/example_component_ts.md b/static/usage/v7/menu/multiple/angular/example_component_ts.md
new file mode 100644
index 00000000000..18edbc360a5
--- /dev/null
+++ b/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');
+  }
+}
+```
diff --git a/static/usage/v7/menu/multiple/demo.html b/static/usage/v7/menu/multiple/demo.html
new file mode 100644
index 00000000000..905545fad4f
--- /dev/null
+++ b/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@6/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>
diff --git a/static/usage/v7/menu/multiple/index.md b/static/usage/v7/menu/multiple/index.md
new file mode 100644
index 00000000000..049f17a5833
--- /dev/null
+++ b/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
+/>
diff --git a/static/usage/v7/menu/multiple/javascript.md b/static/usage/v7/menu/multiple/javascript.md
new file mode 100644
index 00000000000..240b4a79157
--- /dev/null
+++ b/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>
+```
diff --git a/static/usage/v7/menu/multiple/react.md b/static/usage/v7/menu/multiple/react.md
new file mode 100644
index 00000000000..581e73ad600
--- /dev/null
+++ b/static/usage/v7/menu/multiple/react.md
@@ -0,0 +1,71 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonHeader, IonMenu, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import { menuController } from '@ionic/core/components';
+
+function Example() {
+  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');
+  }
+
+  return (
+    <>
+      <IonMenu menuId="first-menu" contentId="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>First Menu</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">This is the first menu content.</IonContent>
+      </IonMenu>
+
+      <IonMenu menuId="second-menu" contentId="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Second Menu</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">This is the second menu content.</IonContent>
+      </IonMenu>
+
+      <IonMenu side="end" contentId="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>End Menu</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">This is the end menu content.</IonContent>
+      </IonMenu>
+
+      <IonPage id="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Menu</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          <p>Tap a button below to open a specific menu.</p>
+
+          <IonButton expand="block" onClick={openFirstMenu}>Open First Menu</IonButton>
+          <IonButton expand="block" onClick={openSecondMenu}>Open Second Menu</IonButton>
+          <IonButton expand="block" onClick={openEndMenu}>Open End Menu</IonButton>
+        </IonContent>
+      </IonPage>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/menu/multiple/vue.md b/static/usage/v7/menu/multiple/vue.md
new file mode 100644
index 00000000000..c26d78425c7
--- /dev/null
+++ b/static/usage/v7/menu/multiple/vue.md
@@ -0,0 +1,74 @@
+```html
+<template>
+  <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>
+
+  <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>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent, IonHeader, IonMenu, IonPage, IonTitle, IonToolbar, menuController } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonContent, IonHeader, IonMenu, IonPage, IonTitle, IonToolbar, menuController },
+    setup() {
+      const openFirstMenu = async () => {
+        // Open the menu by menu-id
+        await menuController.enable(true, 'first-menu');
+        await menuController.open('first-menu');
+      }
+
+      const openSecondMenu = async () => {
+        // Open the menu by menu-id
+        await menuController.enable(true, 'second-menu');
+        await menuController.open('second-menu');
+      }
+
+      const openEndMenu = async () => {
+        // Open the menu by side
+        await menuController.open('end');
+      }
+
+      return { openFirstMenu, openSecondMenu, openEndMenu }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/menu/sides/angular.md b/static/usage/v7/menu/sides/angular.md
new file mode 100644
index 00000000000..79974502524
--- /dev/null
+++ b/static/usage/v7/menu/sides/angular.md
@@ -0,0 +1,23 @@
+```html
+<ion-menu side="end" contentId="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu Content</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the menu content.</ion-content>
+</ion-menu>
+<div class="ion-page" id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu</ion-title>
+      <ion-buttons slot="end">
+        <ion-menu-button></ion-menu-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    Tap the button in the toolbar to open the menu.
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v7/menu/sides/demo.html b/static/usage/v7/menu/sides/demo.html
new file mode 100644
index 00000000000..a047a253112
--- /dev/null
+++ b/static/usage/v7/menu/sides/demo.html
@@ -0,0 +1,39 @@
+<!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" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-menu side="end" content-id="main-content">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Menu Content</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">This is the menu content.</ion-content>
+      </ion-menu>
+
+      <div class="ion-page" id="main-content">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Menu</ion-title>
+            <ion-buttons slot="end">
+              <ion-menu-button></ion-menu-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          Tap the button in the toolbar to open the menu.
+        </ion-content>
+      </div>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/menu/sides/index.md b/static/usage/v7/menu/sides/index.md
new file mode 100644
index 00000000000..f62678655f6
--- /dev/null
+++ b/static/usage/v7/menu/sides/index.md
@@ -0,0 +1,18 @@
+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 from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/menu/sides/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/menu/sides/javascript.md b/static/usage/v7/menu/sides/javascript.md
new file mode 100644
index 00000000000..24b45371bc9
--- /dev/null
+++ b/static/usage/v7/menu/sides/javascript.md
@@ -0,0 +1,23 @@
+```html
+<ion-menu side="end" content-id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu Content</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the menu content.</ion-content>
+</ion-menu>
+<div class="ion-page" id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu</ion-title>
+      <ion-buttons slot="end">
+        <ion-menu-button></ion-menu-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    Tap the button in the toolbar to open the menu.
+  </ion-content>
+</div>
+```
diff --git a/static/usage/v7/menu/sides/react.md b/static/usage/v7/menu/sides/react.md
new file mode 100644
index 00000000000..6a29b85360e
--- /dev/null
+++ b/static/usage/v7/menu/sides/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import {
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonMenu,
+  IonMenuButton,
+  IonPage,
+  IonTitle,
+  IonToolbar
+} from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonMenu side="end" contentId="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Menu Content</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">This is the menu content.</IonContent>
+      </IonMenu>
+      <IonPage id="main-content">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Menu</IonTitle>
+            <IonButtons slot="end">
+              <IonMenuButton></IonMenuButton>
+            </IonButtons>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          Tap the button in the toolbar to open the menu.
+        </IonContent>
+      </IonPage>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/menu/sides/vue.md b/static/usage/v7/menu/sides/vue.md
new file mode 100644
index 00000000000..f74bbf906ee
--- /dev/null
+++ b/static/usage/v7/menu/sides/vue.md
@@ -0,0 +1,52 @@
+```html
+<template>
+  <ion-menu side="end" content-id="main-content">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Menu Content</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">This is the menu content.</ion-content>
+  </ion-menu>
+  <ion-page id="main-content">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Menu</ion-title>
+        <ion-buttons slot="end">
+          <ion-menu-button></ion-menu-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      Tap the button in the toolbar to open the menu.
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import {
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonMenu,
+    IonMenuButton,
+    IonPage,
+    IonTitle,
+    IonToolbar
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButtons,
+      IonContent,
+      IonHeader,
+      IonMenu,
+      IonMenuButton,
+      IonPage,
+      IonTitle,
+      IonToolbar
+    },
+  });
+</script>
+```

From 93085559e11de494abe6b364fd8f2e5b0370c9da Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 18 Jul 2023 11:26:03 -0400
Subject: [PATCH 2/4] fix(stackblitz): include menuController for JS examples

---
 static/code/stackblitz/v7/html/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/static/code/stackblitz/v7/html/index.ts b/static/code/stackblitz/v7/html/index.ts
index 071bc801d6c..2cc510047cd 100644
--- a/static/code/stackblitz/v7/html/index.ts
+++ b/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;

From d0c9d579d627fb5959d65f831a0c644b268be314 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 18 Jul 2023 11:57:28 -0400
Subject: [PATCH 3/4] style: lint

---
 static/usage/v7/menu/multiple/demo.html  |  2 +-
 static/usage/v7/menu/multiple/react.md   | 12 +++++++++---
 static/usage/v7/menu/multiple/vue.md     | 10 +++++-----
 static/usage/v7/menu/sides/angular.md    |  4 +---
 static/usage/v7/menu/sides/demo.html     |  4 +---
 static/usage/v7/menu/sides/javascript.md |  4 +---
 static/usage/v7/menu/sides/react.md      | 15 ++-------------
 static/usage/v7/menu/sides/vue.md        | 17 +++--------------
 8 files changed, 23 insertions(+), 45 deletions(-)

diff --git a/static/usage/v7/menu/multiple/demo.html b/static/usage/v7/menu/multiple/demo.html
index 905545fad4f..11861dd7eac 100644
--- a/static/usage/v7/menu/multiple/demo.html
+++ b/static/usage/v7/menu/multiple/demo.html
@@ -9,7 +9,7 @@
     <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">
+    <script type="module">
       import { menuController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
       window.menuController = menuController;
     </script>
diff --git a/static/usage/v7/menu/multiple/react.md b/static/usage/v7/menu/multiple/react.md
index 581e73ad600..9ba2357603c 100644
--- a/static/usage/v7/menu/multiple/react.md
+++ b/static/usage/v7/menu/multiple/react.md
@@ -59,9 +59,15 @@ function Example() {
         <IonContent className="ion-padding">
           <p>Tap a button below to open a specific menu.</p>
 
-          <IonButton expand="block" onClick={openFirstMenu}>Open First Menu</IonButton>
-          <IonButton expand="block" onClick={openSecondMenu}>Open Second Menu</IonButton>
-          <IonButton expand="block" onClick={openEndMenu}>Open End Menu</IonButton>
+          <IonButton expand="block" onClick={openFirstMenu}>
+            Open First Menu
+          </IonButton>
+          <IonButton expand="block" onClick={openSecondMenu}>
+            Open Second Menu
+          </IonButton>
+          <IonButton expand="block" onClick={openEndMenu}>
+            Open End Menu
+          </IonButton>
         </IonContent>
       </IonPage>
     </>
diff --git a/static/usage/v7/menu/multiple/vue.md b/static/usage/v7/menu/multiple/vue.md
index c26d78425c7..f9a4932767f 100644
--- a/static/usage/v7/menu/multiple/vue.md
+++ b/static/usage/v7/menu/multiple/vue.md
@@ -54,21 +54,21 @@
         // Open the menu by menu-id
         await menuController.enable(true, 'first-menu');
         await menuController.open('first-menu');
-      }
+      };
 
       const openSecondMenu = async () => {
         // Open the menu by menu-id
         await menuController.enable(true, 'second-menu');
         await menuController.open('second-menu');
-      }
+      };
 
       const openEndMenu = async () => {
         // Open the menu by side
         await menuController.open('end');
-      }
+      };
 
-      return { openFirstMenu, openSecondMenu, openEndMenu }
-    }
+      return { openFirstMenu, openSecondMenu, openEndMenu };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/menu/sides/angular.md b/static/usage/v7/menu/sides/angular.md
index 79974502524..b9f7a01069d 100644
--- a/static/usage/v7/menu/sides/angular.md
+++ b/static/usage/v7/menu/sides/angular.md
@@ -16,8 +16,6 @@
       </ion-buttons>
     </ion-toolbar>
   </ion-header>
-  <ion-content class="ion-padding">
-    Tap the button in the toolbar to open the menu.
-  </ion-content>
+  <ion-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
 </div>
 ```
diff --git a/static/usage/v7/menu/sides/demo.html b/static/usage/v7/menu/sides/demo.html
index a047a253112..6b636752ae4 100644
--- a/static/usage/v7/menu/sides/demo.html
+++ b/static/usage/v7/menu/sides/demo.html
@@ -30,9 +30,7 @@
             </ion-buttons>
           </ion-toolbar>
         </ion-header>
-        <ion-content class="ion-padding">
-          Tap the button in the toolbar to open the menu.
-        </ion-content>
+        <ion-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
       </div>
     </ion-app>
   </body>
diff --git a/static/usage/v7/menu/sides/javascript.md b/static/usage/v7/menu/sides/javascript.md
index 24b45371bc9..543806395fc 100644
--- a/static/usage/v7/menu/sides/javascript.md
+++ b/static/usage/v7/menu/sides/javascript.md
@@ -16,8 +16,6 @@
       </ion-buttons>
     </ion-toolbar>
   </ion-header>
-  <ion-content class="ion-padding">
-    Tap the button in the toolbar to open the menu.
-  </ion-content>
+  <ion-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
 </div>
 ```
diff --git a/static/usage/v7/menu/sides/react.md b/static/usage/v7/menu/sides/react.md
index 6a29b85360e..cbb73598dae 100644
--- a/static/usage/v7/menu/sides/react.md
+++ b/static/usage/v7/menu/sides/react.md
@@ -1,15 +1,6 @@
 ```tsx
 import React from 'react';
-import {
-  IonButtons,
-  IonContent,
-  IonHeader,
-  IonMenu,
-  IonMenuButton,
-  IonPage,
-  IonTitle,
-  IonToolbar
-} from '@ionic/react';
+import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 function Example() {
   return (
     <>
@@ -30,9 +21,7 @@ function Example() {
             </IonButtons>
           </IonToolbar>
         </IonHeader>
-        <IonContent className="ion-padding">
-          Tap the button in the toolbar to open the menu.
-        </IonContent>
+        <IonContent className="ion-padding">Tap the button in the toolbar to open the menu.</IonContent>
       </IonPage>
     </>
   );
diff --git a/static/usage/v7/menu/sides/vue.md b/static/usage/v7/menu/sides/vue.md
index f74bbf906ee..66448f05bf6 100644
--- a/static/usage/v7/menu/sides/vue.md
+++ b/static/usage/v7/menu/sides/vue.md
@@ -17,23 +17,12 @@
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="ion-padding">
-      Tap the button in the toolbar to open the menu.
-    </ion-content>
+    <ion-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
   </ion-page>
 </template>
 
 <script lang="ts">
-  import {
-    IonButtons,
-    IonContent,
-    IonHeader,
-    IonMenu,
-    IonMenuButton,
-    IonPage,
-    IonTitle,
-    IonToolbar
-  } from '@ionic/vue';
+  import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
@@ -45,7 +34,7 @@
       IonMenuButton,
       IonPage,
       IonTitle,
-      IonToolbar
+      IonToolbar,
     },
   });
 </script>

From b291493f16e563f1208222549ee8c44fe50313e7 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 18 Jul 2023 12:09:21 -0400
Subject: [PATCH 4/4] fix(menu): wrong version import for menuController

---
 static/usage/v7/menu/multiple/demo.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v7/menu/multiple/demo.html b/static/usage/v7/menu/multiple/demo.html
index 11861dd7eac..2845db551d8 100644
--- a/static/usage/v7/menu/multiple/demo.html
+++ b/static/usage/v7/menu/multiple/demo.html
@@ -10,7 +10,7 @@
     <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@6/dist/ionic/index.esm.js';
+      import { menuController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
       window.menuController = menuController;
     </script>
   </head>