fix(menu-button): hide menu button when auto hide or split pane (#18702)

- updates menu-button to use the host element
- moves menu-toggle logic to a utils file for menu button to share
- removes the dependency on menu-toggle
- adds an e2e test for an auto-hidden menu button

fixes #18666

core/src/components/menu-toggle/menu-toggle-util.ts

@@ -0,0 +1,32 @@
+
+// Get the menu controller element
+export const getMenuController = (doc: Document): Promise<HTMLIonMenuControllerElement | undefined> => {
+  const menuControllerElement = doc.querySelector('ion-menu-controller');
+  if (!menuControllerElement) {
+    return Promise.resolve(undefined);
+  }
+  return menuControllerElement.componentOnReady();
+};
+
+// Given a menu, toggle it
+export const toggleMenu = async (menu: string | undefined) => {
+  const menuCtrl = await getMenuController(document);
+  if (menuCtrl) {
+    const menuEl = await menuCtrl.get(menu);
+    if (menuEl) {
+      menuCtrl.toggle(menu);
+    }
+  }
+};
+
+// Given a menu, return whether or not the menu toggle should be visible
+export const updateVisibility = async (menu: string | undefined) => {
+  const menuCtrl = await getMenuController(document);
+  if (menuCtrl) {
+    const menuEl = await menuCtrl.get(menu);
+    if (menuEl && await menuEl.isActive()) {
+      return true;
+    }
+  }
+  return false;
+};

core/src/components/menu-toggle/menu-toggle.tsx

@@ -2,6 +2,8 @@ import { Component, ComponentInterface, Host, Listen, Prop, State, h } from '@st
 
 import { getIonMode } from '../../global/ionic-global';
 
+import { toggleMenu, updateVisibility } from './menu-toggle-util';
+
 @Component({
   tag: 'ion-menu-toggle',
   styleUrl: 'menu-toggle.scss',
@@ -29,33 +31,24 @@ export class MenuToggle implements ComponentInterface {
    */
   @Prop() autoHide = true;
 
-  componentDidLoad() {
-    return this.updateVisibility();
+  async componentDidLoad() {
+    await this.setVisibility();
   }
 
   @Listen('ionMenuChange', { target: 'body' })
   @Listen('ionSplitPaneVisible', { target: 'body' })
-  async updateVisibility() {
-    const menuCtrl = await getMenuController(document);
-    if (menuCtrl) {
-      const menu = await menuCtrl.get(this.menu);
-      if (menu && await menu.isActive()) {
-        this.visible = true;
-        return;
-      }
-    }
-    this.visible = false;
+  async visibilityChanged() {
+    await this.setVisibility();
+  }
+
+  private setVisibility = async () => {
+    this.visible = await updateVisibility(this.menu);
   }
 
   private onClick = async () => {
-    const menuCtrl = await getMenuController(document);
-    if (menuCtrl) {
-      const menu = await menuCtrl.get(this.menu);
-      if (menu) {
-        menuCtrl.toggle(this.menu);
-      }
-    }
+    await toggleMenu(this.menu);
   }
+
   render() {
     const mode = getIonMode(this);
     const hidden = this.autoHide && !this.visible;
@@ -74,11 +67,3 @@ export class MenuToggle implements ComponentInterface {
     );
   }
 }
-
-function getMenuController(doc: Document): Promise<HTMLIonMenuControllerElement | undefined> {
-  const menuControllerElement = doc.querySelector('ion-menu-controller');
-  if (!menuControllerElement) {
-    return Promise.resolve(undefined);
-  }
-  return menuControllerElement.componentOnReady();
-}

core/src/components/menu-toggle/readme.md

@@ -17,19 +17,6 @@ In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` pr
 | `menu`     | `menu`      | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle.  If this property is not used, `ion-menu-toggle` will toggle the first menu that is active. | `string \| undefined` | `undefined` |
 
 
-## Dependencies
-
-### Used by
-
- - [ion-menu-button](../menu-button)
-
-### Graph
-```mermaid
-graph TD;
-  ion-menu-button --> ion-menu-toggle
-  style ion-menu-toggle fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*