How can I close the Ionic 4 sidemenu on a tablet?

Ionic Framework
1

My Ionic 4 app has a sidemenu which functions perfectly on phones but stays open on an iPad, even when tapping the hamburger menu; it just won’t close.

How can I close the sidemenu on a tablet?

<ion-header>
    <ion-toolbar color="dark">
        <ion-buttons ion-button slot="start" menuToggle>
            <ion-menu-button autoHide="false"></ion-menu-button>
        </ion-buttons>
        <ion-title class="heading">
            Home
        </ion-title>
    </ion-toolbar>
</ion-header>
2

If this is a v4 app, menuToggle and ion-button directives have been deprecated. <ion-menu-button> toggles the menu by default, and <ion-button> is its own component now. I’m not sure if that will solve this, but they are not required in <ion-buttons>

3

@jjdev Thanks. I removed those directives but that didn’t fix the problem. It’s weird, because I can see the hamburger icon respond when it’s clicked (it dims then goes back to white) but the menu stays open.

4

Are you using split-pane? It has a when directive to set the breakpoint

5

Not that I’m aware of. I chose sidemenu when I created the app, and it’s a pure ionic 4 app; not upgraded from 3. I’m looking at the docs but they’re terrible: they give an example that doesn’t even work; it breaks the menu!

6

Look in the app.component.ts file, the default sidemenu template employs the split pane. Either remove it or change/add the when directive

1 Like
7

It was actually in app.component.html. I removed it and it’s working as expected. Thanks!

1 Like