I'm created my Ionic app for the SplitPane , that one is working fine. but I faced some conflict The split pane is displayed in large screens, but the toggle-menu button is not displayed in small screens. and When I swap it , then after the menu shows. Any one know how fix that issue in small devices look my code Stackblitz here
code part app.html
<ion-split-pane>
<ion-menu [content]="someContent">
<ion-header>
<ion-toolbar>
<ion-title>
Menu
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item (click)="setCategory('nature')">
<ion-avatar item-left>
</ion-avatar>
<h3>Home</h3>
</ion-item>
<ion-item (click)="setCategory('food')">
<ion-avatar item-left>
</ion-avatar>
<h3>Categories</h3>
</ion-item>
<ion-item (click)="setCategory('people')">
<ion-avatar item-left>
</ion-avatar>
<h3>Get One</h3>
</ion-item>
<ion-item (click)="setCategory('people')">
<ion-avatar item-left>
</ion-avatar>
<h3>Settings</h3>
</ion-item>
<ion-item (click)="setCategory('people')">
<ion-avatar item-left>
</ion-avatar>
<h3>My Partner</h3>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #someContent main></ion-nav>
</ion-split-pane>
You forgot to add the menu toggle button in your page header like this:
<ion-header>
<ion-navbar>
<!-- Add this button in the pages you want to show the menu button -->
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
About
</ion-title>
</ion-navbar>
</ion-header>
This way when the pane is shown it'll not show the menu button, but when in smaller screens and the pane is hidden, the button is shown.