I’m working on a new Ionic app, one of my own ideas. For the layout of the app I’m using the Sidemenu template instead of the Tabs template, which I’ve used a few times before.
In this app I wanted to have a New button in the top right corner of the app. So you can add a new item to the app from anywhere within the app.
Now I wasn’t to sure how to add this in the Sidemenu template. It looks as though all the views load into <ion-nav-view> which is in the main index.html page. So adding the new button in <ion-nav-buttons> in the index.html page doesn’t work.
In order to add this New button I needed to add it to the menu.html page where the toggle menu button is. This view is displayed all the time, so my New button is available either in a list view or the details view.
To position the button to the right of the app I simply added the side attribute as ‘right’. This is how my page was set up:
<ion-side-menu-content>
<ion-nav-bar class=”bar-stable”>
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side=”left”>
<button class=”button button-icon button-clear ion-navicon” menu-toggle=”left”>
</button>
</ion-nav-buttons>
<ion-nav-buttons side=”right”>
<button class=”button”>New</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name=”menuContent”></ion-nav-view>
</ion-side-menu-content>