ionic4right-to-leftleft-to-right

How do I include both a left and right sidemenu in ionic v4?


I am trying to use a single menu for both LTR and RTL but the issue I am facing when its RTL then the menu is opening from the left side which should be from the right side


Solution

  • I don't believe you can use a single menu for both RTL and LTR swiping behavior. You could instead, use a service that would populate the menu information with a *ngIf=let link of links", and then just have a menu on either side of the app that subscribes to the links provided in the service.

    The attribute side="end" or side="start" controls which side of the app the menu will appear on, so if you want to swipe from the right side of the screen you'd use slide="end" on your ion-menu.

    <ion-menu side="end" contentId="mainContent" menuId="slidingMenu" id="slidingMenu">
      <ion-header>
        <ion-toolbar>
          <ion-title>{{(menu?.details | async)?.title}}</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item class="item-mute">
            <ion-label>Mute</ion-label>
            <ion-toggle></ion-toggle>
          </ion-item>
          <ion-item *ngFor="let link of (menu?.details | async)?.links" detail
                    (click)="navToPage(link)">{{link?.title}}</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>