Ionic 4 - side-menu hide automatically also in pwa

I have a side menu into a split-Panel.
In the browser, I’d like to have the fixed menù in the left, resizing the right part of the split panel where the pages appear (into the ion-router-outlet). But side-menu always behaves as in the smartphone, making auto-hide. I implemented a standard code:

<ion-app>
  <ion-split-pane>
    <ion-menu>
      <ion-header>
        <ion-toolbar>
          <ion-title> title </ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
    
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="root" [href]="p.url">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

I think you want to use something like <ion-split-pane when="true"> to keep the menu open.

see: https://beta.ionicframework.com/docs/api/split-pane

2 Likes

I tried but seems not working :frowning:

For me it seems like an routing issue - so it works with the MenuControler. So try something like this, in your app.component.ts:

import { MenuController } from “@ionic/angular”;

initializeApp() {
this.platform.ready().then(() => {
this.menuCtrl.enable(true);
this.router.navigate([“home”]);
}
}