CODEWITHSUNDEEP
htmlionic-frameworkionic2
user6579134
user6579134

Reputation: 839

Place ion-menu icon to the right side of the header

I'm currently working with ionic side menu template and its working properly for me, I made the side menu to slide from the right which is also a good thing for me, but the issue is, the menu icon is left placed at the left side enough though the menu is pushing from the right. Is there any solution around to make place the icon too at the right side of the header?

<ion-menu [content]="content" type="reveal" side="right" menuToggle="right" >
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Upvotes: 1

Views: 1980

Answers (1)

Prerak Tiwari
Prerak Tiwari

Reputation: 3476

In the page where you want to display the menu, you can place 'end' in the button tag, and it will place your menu to right.

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle end>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>

Upvotes: 1

Related Questions