Left split pane width size- IONIC 3

Question

Brief Explanation: I am using ionic split pane in my project. I want to decrease , increase left pane width by clicking a button.

Below is my app.html code:

<ion-split-pane>
  <ion-menu [content]="content">
    <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" main #content></ion-nav>
</ion-split-pane>

This is how my home page looks

Please guide How to achieve this.

Answer 1

This is given in the documentation here

<ion-split-pane [when]="showSplitPane">
...
</ion-split-pane>

and when clicking on the button you can toggle the showSplitPane variable.