SplitPane not showing sidemenu

Hi,

I’m trying to use SplitPane component to automatically show sidemenu on large screens.

I start from sidemenu template like this:

ionic start SplitPaneTest sidemenu

Then, I’ve modified /src/app/app.html code to match this:

Added split pane component to my root component and added main attribute to my ion-nav, no more changes.

<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>
</ion-split-pane>

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

When I run ionic serve the sidemenu is not showing:

I’m doing something wrong?

Related Github Issue:

Any help will be appreciated.

Thanks in advance!

Try to add a menu toggle button to your header

<ion-toolbar>
  <button ion-button menuToggle right>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>
       Title
       ......

I already have this menu toggle button on my pages/home/home.html file:

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

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>

  <button ion-button secondary menuToggle>Toggle Menu</button>
</ion-content>

Take a look at the linked github.

I use it for http://jacktools.net

Thanks @Jacktoolsnet.

I tried your template and works well and helped me to find my mistake.

The ion-nav component must be inside splitpane, just like this:

<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>

  <!-- ION NAV MUST BE INSIDE ION SPLIT PANE -->
  <ion-nav [root]="rootPage" #content main swipeBackEnabled="false"></ion-nav>

</ion-split-pane>

@ramon You’re welcome!