I have a side menu in app.html and when I click the side menu icon in ios it does not animate properly as shown in the docs. It is not pushing the navbar with it. I can’t see why this is happening but maybe I am implementing it incorrectly.
I understand the navbar isnt part of the page it is pushing but I want the side menu to be on the navbar inside the app.html, not on individual pages as I will be implementing tabs into the application and having a global side menu over the tabs. I have attached a gif to show what I mean.
app.html code:
<ion-menu [content]="mycontent">
<ion-header no-border>
<ion-navbar color="primary">
<ion-buttons right>
</ion-buttons>
<ion-title>menu title</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<p>some menu content, could be list items</p>
</ion-list>
</ion-content>
</ion-menu>
<ion-header no-border>
<ion-navbar>
<ion-buttons right>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>global title</ion-title>
</ion-navbar>
</ion-header>
<ion-nav #mycontent [root]="rootPage" swipeBackEnabled="false">
</ion-nav>
Ionic info:
global packages:
@ionic/cli-utils : 1.4.0
Cordova CLI : 7.0.1
Ionic CLI : 3.4.0
local packages:
@ionic/app-scripts : 1.3.7
@ionic/cli-plugin-cordova : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.4.2
System:
Node : v6.10.3
OS : Windows 10
Xcode : not installed
ios-deploy : not installed
ios-sim : not installed
npm : 4.6.1