docs(menu): clarify multiple side menu behavior (#3186)

Author: liamdebeasi

docs/api/menu.md

@@ -60,7 +60,7 @@ import Sides from '@site/static/usage/v7/menu/sides/index.md';
 
 ## 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`.
+When multiple menus exist on the same side, we need refer to them by ID instead of side. Otherwise, the wrong menu may be activated.
 
 import Multiple from '@site/static/usage/v7/menu/multiple/index.md';
 

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

@@ -10,19 +10,29 @@ export class ExampleComponent {
   constructor(private menuCtrl: MenuController) {}
 
   openFirstMenu() {
-    // Open the menu by menu-id
-    this.menuCtrl.enable(true, 'first-menu');
+    /**
+     * Open the menu by menu-id
+     * We refer to the menu using an ID
+     * because multiple "start" menus exist.
+     */
     this.menuCtrl.open('first-menu');
   }
 
   openSecondMenu() {
-    // Open the menu by menu-id
-    this.menuCtrl.enable(true, 'second-menu');
+    /**
+     * Open the menu by menu-id
+     * We refer to the menu using an ID
+     * because multiple "start" menus exist.
+     */
     this.menuCtrl.open('second-menu');
   }
 
   openEndMenu() {
-    // Open the menu by side
+    /**
+     * Open the menu by side
+     * We can refer to the menu by side
+     * here because only one "end" menu exists
+     */
     this.menuCtrl.open('end');
   }
 }

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

@@ -62,19 +62,29 @@
 
     <script>
       async function openFirstMenu() {
-        // Open the menu by menu-id
-        await menuController.enable(true, 'first-menu');
+        /**
+         * Open the menu by menu-id
+         * We refer to the menu using an ID
+         * because multiple "start" menus exist.
+         */
         await menuController.open('first-menu');
       }
 
       async function openSecondMenu() {
-        // Open the menu by menu-id
-        await menuController.enable(true, 'second-menu');
+        /**
+         * Open the menu by menu-id
+         * We refer to the menu using an ID
+         * because multiple "start" menus exist.
+         */
         await menuController.open('second-menu');
       }
 
       async function openEndMenu() {
-        // Open the menu by side
+        /**
+         * Open the menu by side
+         * We can refer to the menu by side
+         * here because only one "end" menu exists
+         */
         await menuController.open('end');
       }
     </script>

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

@@ -43,19 +43,29 @@
 
 <script>
   async function openFirstMenu() {
-    // Open the menu by menu-id
-    await menuController.enable(true, 'first-menu');
+    /**
+     * Open the menu by menu-id
+     * We refer to the menu using an ID
+     * because multiple "start" menus exist.
+     */
     await menuController.open('first-menu');
   }
 
   async function openSecondMenu() {
-    // Open the menu by menu-id
-    await menuController.enable(true, 'second-menu');
+    /**
+     * Open the menu by menu-id
+     * We refer to the menu using an ID
+     * because multiple "start" menus exist.
+     */
     await menuController.open('second-menu');
   }
 
   async function openEndMenu() {
-    // Open the menu by side
+    /**
+     * Open the menu by side
+     * We can refer to the menu by side
+     * here because only one "end" menu exists
+     */
     await menuController.open('end');
   }
 </script>

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

@@ -5,19 +5,29 @@ import { menuController } from '@ionic/core/components';
 
 function Example() {
   async function openFirstMenu() {
-    // Open the menu by menu-id
-    await menuController.enable(true, 'first-menu');
+    /**
+     * Open the menu by menu-id
+     * We refer to the menu using an ID
+     * because multiple "start" menus exist.
+     */
     await menuController.open('first-menu');
   }
 
   async function openSecondMenu() {
-    // Open the menu by menu-id
-    await menuController.enable(true, 'second-menu');
+    /**
+     * Open the menu by menu-id
+     * We refer to the menu using an ID
+     * because multiple "start" menus exist.
+     */
     await menuController.open('second-menu');
   }
 
   async function openEndMenu() {
-    // Open the menu by side
+    /**
+     * Open the menu by side
+     * We can refer to the menu by side
+     * here because only one "end" menu exists
+     */
     await menuController.open('end');
   }
 

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

@@ -51,19 +51,29 @@
     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');
+        /**
+         * Open the menu by menu-id
+         * We refer to the menu using an ID
+         * because multiple "start" menus exist.
+         */
         await menuController.open('first-menu');
       };
 
       const openSecondMenu = async () => {
-        // Open the menu by menu-id
-        await menuController.enable(true, 'second-menu');
+        /**
+         * Open the menu by menu-id
+         * We refer to the menu using an ID
+         * because multiple "start" menus exist.
+         */
         await menuController.open('second-menu');
       };
 
       const openEndMenu = async () => {
-        // Open the menu by side
+        /**
+         * Open the menu by side
+         * We can refer to the menu by side
+         * here because only one "end" menu exists
+         */
         await menuController.open('end');
       };