How to close ion-menu after a menu item click

Ionic Framework Ionic Vue
1

I have an ion-menu that, when a button is clicked, successfully routes to a different component/page. Is there a way to programmatically close the menu either before or after the route is pushed? As it is working right now, the menu stays up until the user clicks something on the page/component that we pushed to.

Code showing the ion-menu:

  <ion-menu side="start" content-id="main-content" id="mainslideoutmenu">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item button @click="routeToSettings">Settings</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

Code showing the functions:

function routeToSettings() {
  closeMenu(); //doesn't work either placing before or after the push
  router.push('/settings');
}

async function closeMenu(this: any) {
      console.log("here");
      await menuController.close('mainslideoutmenu');
}

I’m sure I’m not doing something right in the closeMenu function. Anyone have any ideas on what may be going wrong?

2

HAve you tried something like that

onClick={async () => await menuController.toggle()}

Or maybe to toggle

3

Got it to work by wrapping the ion-item in an ion-menu-toggle

<ion-menu-toggle>
    <ion-item button @click="routeToSettings">Settings</ion-item>
</ion-menu-toggle>

Thank you for your help. It definitely got me pointed in the right direction.

1 Like