Ion-menu-button not working on website mode

Ionic Framework Ionic Angular
1

Toggling perfectly working on mobile mode (small screen), but not working on website mode (widescreen). How can I solve it

Thanks

image
image1366×768 296 KB

2

Do you use ion-split-pane?

1 Like
3

yes …

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="push">
      <ion-content>
        <ion-list id="inbox-list">
          <ion-list-header>Hi Tripurari Singh</ion-list-header>
          <ion-note>Location</ion-note>

          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
            <ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
              <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
              <ion-label>{{ p.title }}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

        <!-- <ion-list id="labels-list">
          <ion-list-header>Labels</ion-list-header>

          <ion-item *ngFor="let label of labels" lines="none">
            <ion-icon slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
            <ion-label>{{ label }}</ion-label>
          </ion-item>
        </ion-list> -->

      </ion-content>

        <div class="logo">
          <ion-img src="assets/imgs/fareway_logo.png"></ion-img>
          <ion-label>V 1.0.0</ion-label>
        </div>

    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
4

By default, the split pane will expand when the screen is larger than 992px. And the ion-menu will always be displayed and cannot be hidden with the ion-menu-button.

5

I want like as the sidebar of the ->https://angular.io/docs

6

Ini this situation, you must create custom function to toggle ion-menu.

7 
` <!-- <ion-split-pane contentId="main-content">`
  </ion-split-pane> -->

I commented above the tag , it’s working according to requirement.

Thanks