menuClose is not closing my left sidemenu

Question

Hey guys I am currently working on a project with ionic and the menu has been giving more problems than it should.

Recently I have been trying to add the menu close attribute, but where ever I put it does not seem to matter. I have been placing it with a click action, with an ion-item prepend, and other failed attempts.

Below is a piece of my code for my app.component.html

<ion-menu contentId="potifyMenu" side="start">
  <ion-header>
    <ion-toolbar>
      <ion-title>Additional Resources</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>
        <ion-button menuClose expand="full" (click)="map_go()">
          <ion-icon name="checkmark-circle-outline"></ion-icon> Completed Work Orders
        </ion-button>
      </ion-item>


      <ion-item>
        <ion-button expand="block" fill="outline" menuClose ion-item (click)="complete_go()">
          <ion-icon name="checkmark-circle-outline"></ion-icon> Completed Work Orders
        </ion-button>
      </ion-item>
      <ion-item>
        <ion-button expand="full" ion-button menuClose (click)="complete_go()">
          <ion-icon name="checkmark-circle-outline"></ion-icon> Cmpleted Work Orders
        </ion-button>
      </ion-item>

      <ion-item>
        <ion-button expand="full" menuClose (click)="complete_go()">
          <ion-icon slot="start" name="checkmark-circle-outline"></ion-icon> Completed Work Orders
        </ion-button>
      </ion-item>


    </ion-list>
  </ion-content>
</ion-menu>

score 5 · Answer 1 · answered Mar 20 '19 at 19:51

5

Figured out a solution from a past post that never showed up in my million of searches.

just needed to encapusulate the button with a toggle

"<ion-menu-toggle>
  <ion-button>Toggle Menu</ion-button>
</ion-menu-toggle>
"

How to toggle Menu in Ionic 4

answered Mar 20 '19 at 19:51

Charøn

61
1
5

THIS WORKS!!! I cant belive how dificult was finding thi anwser – weinde May 31 '23 at 11:39

score -1 · Answer 2 · answered Feb 07 '20 at 09:14

-1

I have the same issue as menuClose directive work perfectly in ionic 3 to control toggle. In ionic 5 use ion-menu-toggle component to toggle menu close and open on the menu item. If you don't want to add toggle menu for menu item having submenu then don't use ion-menu-toggle component on those menu items.

Ionic 5 control menu and submenu close and dropdown

answered Feb 07 '20 at 09:14

user3335816

41
3

Ideally you shouldn't just link the answer incase the link no longer works in the future. – Richard Housham Feb 07 '20 at 10:10

menuClose is not closing my left sidemenu

2 Answers2