I am making an ionic app and I am trying to create a home page with side menu, but it does not show properly. I ve seen multiple examples and I tried to do exactly the same steps, without success. The problem is that the ion-nav-buttons on the main menu and the ion-header-bar in the side menu do not show.
This is the home.html:
<ion-side-menus enable-menu-with-back-views="true">
<!-- Left Menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ui-sref="">Test 1</ion-item>
<ion-item ui-sref="">Test 2</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<!-- Main Menu -->
<ion-side-menu-content>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button-icon icon ion-email"></button>
</ion-nav-buttons>
<ion-nav-view name="homeContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
This is the menu-content.html:
<ion-view style="" title="Home">
<ion-content padding="true">
<label style="" class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input placeholder="Search" type="search">
</label>
<br>
<ion-list style="">
<ion-item style="" ui-sref="ad">Ad 1</ion-item>
<ion-item style="" ui-sref="ad">Ad 2</ion-item>
<ion-item style="" ui-sref="ad">Ad 3</ion-item>
</ion-list>
</ion-content>
</ion-view>
These are the states inside the route.js:
.state('home', {
url: '/home',
abstract:true,
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
.state('home.menu-content', {
url: '/home-menu-content',
views: {
'homeContent' :{
templateUrl: 'templates/home-menu-content.html',
controller : 'HomeMenuCtrl'
}
}
})
and these are the controllers:
.controller('HomeCtrl', function ($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function () {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('HomeMenuCtrl', function ($scope) {
})
This is the home.html:
<ion-side-menus enable-menu-with-back-views="false">
<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" data-menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item data-menu-close href="#/app/home">
Search
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
This is the menu-content.html
<ion-view style="" title="Home">
<ion-content padding="true">
<label style="" class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input placeholder="Search" type="search">
</label>
<br>
<ion-list style="">
<ion-item style="" ui-sref="ad">Ad 1</ion-item>
<ion-item style="" ui-sref="ad">Ad 2</ion-item>
<ion-item style="" ui-sref="ad">Ad 3</ion-item>
</ion-list>
</ion-content>
</ion-view>
These are the states inside the app.js:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/home.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home-menu-content.html',
controller: 'HomeMenuCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/home');
});
and these are the controllers:
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
$scope.toggleLeft = function () {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('HomeMenuCtrl', function ($scope, $ionicModal, $timeout) {
})
Its works fine.Tested
I found the problem to this and it was very simple. I had to create an <ion-nav-bar> for the main menu. The <nav-buttons> were not showing in the main header bar of my project. Now, the snippet for the main menu is this:
<!-- Main Menu -->
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button-icon icon ion-email"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="homeContent"></ion-nav-view>
</ion-side-menu-content>
Related
I'm new member in ionic and I want create a simple app with menu sidebar left and in fist page I have a list item, when I click item on list I will show new sceen detail item, but I want hold navigation bar in top. Here is my sceen app I want create.
I created a menu sidebar and list item same left picture but when I set event ng-click for item in list I can't create new page same right picture.
How I can hold navigationbar and change content to new page?
Here is my code:
menu.html:
<ion-side-menus enable-menu-with-back-views="false">
<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-bar>
<ion-nav-view name="menuContent" ></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" width="{{dev_width}}">
<ion-header-bar class="bar-stable">
<div class="bar-header">
</div>
</ion-header-bar>
<ion-content class="custom">
<ion-list>
<ion-item menu-close href="#/menu/groupa">
<img src="{{availableImages[0].src}}" />{{availableImages[0].text}}
</ion-item>
<ion-item menu-close href="#/menu/groupb">
<img src="{{availableImages[1].src}}" />{{availableImages[1].text}}
</ion-item>
<ion-item menu-close href="#/menu/groupc">
<img src="{{availableImages[1].src}}"/>{{availableImages[0].text}}
</ion-item>
<ion-item menu-close href="#/login">
Logout
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar >
<span class="color-title" ><img src="{{availableImages[2].src}}" width="30" style="vertical-align:middle ;margin-right:15px"/>{{availableImages[2].text}} </span>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
Groupb.html:
<ion-view align-title="center">
<ion-nav-title>
<span class="color-title">Group B</span>
</ion-nav-title>
<ion-content class="list-groupa">
<div ng-show="isLoading">Loading.....</div>
<ion-list>
<ion-item ng-repeat="employee in datashow" type="item-text-wrap" ng-click="clicker(datashow)">
<span class="item-group"><b>{{employee.Type}}</b></span>
<p><span class="item-group">test desc2 {{employee.Distance.Value}}</span></p>
</ion-item>
</ion-list>
<!-- </view> -->
</ion-content>
</ion-view>
$scope.clicker = function(myValue){
$scope.dataToShare = myValue;
srvShareData.setData($scope.dataToShare);
$state.go('detailgroupb');
};
Detailgroupb.html
<ion-view align-title="center">
<ion-nav-bar >
<button ng-click="goBack()">
Set title to banana!
</button>
</ion-nav-bar>
<ion-content class="list-groupa">
<ion-list>
<ion-item ng-repeat="employee in sharedData" type="item-text-wrap" ng-click="clicker(employee)">
<!-- href="#/employee/{{employee.id}}" -->
<span class="item-group"><b>{{employee.Type}}</b></span>
<p><span class="item-group">test desc2 {{employee.Distance.Value}}</span></p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
app.js
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('login',{
url:'/login',
templateUrl:'templates/login.html',
controller: 'LoginCtrl'
})
.state('menu',{
url:'/menu',
templateUrl:'templates/menu.html',
controller:'MenuCtrl'
})
.state('menu.groupa', {
url: '/groupa',
views: {
'menuContent': {
templateUrl: 'templates/groupa.html',
controller:'GroupaCtrl'
}
}
})
.state('menu.groupc', {
url: '/groupc',
views: {
'menuContent': {
templateUrl: 'templates/groupc.html',
controller:'GroupcCtrl'
}
}
})
.state('menu.groupb', {
url: '/groupb',
views: {
'menuContent': {
templateUrl: 'templates/groupb.html',
controller:'GroupbCtrl'
}
}
})
.state('detailgroupb',{
url:'/detailgroupb',
templateUrl:'templates/detailgroupb.html',
controller:'GroupbDetailCtrl'
})
;
$urlRouterProvider.otherwise("/login");
})
.config(function($ionicConfigProvider) {
// note that you can also chain configs
$ionicConfigProvider.navBar.alignTitle('center');
});
My result:
Hi first of all let me say thanks you for reading my post.
I am new to ionic, I managed to use side menu, tabs, and master detail pattern to structure my app. My problem is that I cant go back when I am in the detail page, I only see the menu toggle button, not the back arrow.
I allready tried some "solutions" but none of them work well.
Here is my code and states.
Part of app.js
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html'
}
}
})
.state('app.training', {
url: '/training',
abstract: true,
views: {
'menuContent': {
templateUrl: 'templates/training.html'
}
}
})
.state('app.training.standard.exercise-details', {
url: "/exercise-details/:id",
views: {
'menuContent#app': {
templateUrl: 'templates/exercise-details.html',
controller: 'ExerciseDetailsCtrl'
}}
})
.state('app.training.custom', {
url: '/custom',
views: {
'training-custom': {
templateUrl: 'templates/training-custom.html'
}
}
})
.state('app.training.standard', {
url: '/standard',
views: {
'training-standard': {
templateUrl: 'templates/training-standard.html',
controller: 'TrainingStandardCtrl'
}
}
})
part menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content >
<ion-nav-bar class="bar-balanced">
<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-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-balanced">
<h1 class="title">Fitness</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ui-sref="app.home">
Home
</ion-item>
<ion-item menu-close ui-sref="app.objective">
Objective
</ion-item>
<ion-item menu-close ui-sref="app.training.standard">
Training
</ion-item>
part index.html
<ion-nav-view></ion-nav-view>
training-standard.html
<ion-view view-title="Training standard">
<ion-content>
<img src="img/{{training[1].image}}" style="width: 50%;
height: auto; " align="right" >
<p class="text-left"><strong>Objective: </strong>{{training[1].objectiveName}} </p>
<p class="text-left"><strong>Level: </strong>{{training[1].level}} </p>
<p class="text-left"><strong>Description: </strong>{{training[1].description}} </p>
<ion-list>
<ion-item class="item" ng-repeat="exercise in training[1].myTraining[0].day1.exercises" ui-sref='app.training.standard.exercise-details({id: exercise.exerciseId})'>
<img src="img/{{exercise.thumb}}"/><h2>{{exercise.exerciseName}}</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
training.html
<ion-tabs class="tabs-balanced tabs-top">
<ion-tab title="Standard" ui-sref="app.training.standard">
<ion-nav-view name="training-standard"></ion-nav-view>
</ion-tab>
<ion-tab title="Custom" ui-sref="app.training.custom">
<ion-nav-view name="training-custom"></ion-nav-view>
</ion-tab>
</ion-tabs>
part exercise-details.html
<ion-view view-title="{{exercise.exerciseName}}">
<ion-content>
<h2>{{exercise.exerciseName}} </h2>
<p>{{exercise.exerciseDesc}}</p>
<p>{{exercise.exerciseTip}}</p>
</ion-content>
</ion-view>
I hope you could help me, I am pretty stuck with this, thanks for all!
George.
There are various ways to do it. One of it is to have a back button in the ion's subheader and link a function to it.
In your detail page:
<ion-view>
<div class="bar bar-subheader bar-calm">
<a class="button icon-left fa fa-arrow-left button-clear" ng-click='goBack()'></a>
</div>
</ion-view>
In your detailPageController.js
app.module('yourAppName').controller('detailPageCtrl',function($scope,$ionicHistory){
$scope.goBack = function(){
$ionicHistory.goBack();
}
});
1) Main page is index.html
2) By default, Using router config i redirect to login page - template/login.html
3) From login page, if login successful, i will redirect to the home page with sidemenu - template/landing.html
4) In homepage, when i click the hamburger icon, i get sidemenu with options
5) But when i click an option in sidemenu, for example "updateProfile" template/updateProfile.html , i'm not able to see the corresponding updateProfile page in homepage
i tried making changes in config, but i'm not making any progress. kindly help me out.
Below is my code.
index.html
<body ng-app="myapp">
<ion-nav-view></ion-nav-view>
</body>
template/login.html
<ion-view view-title="Sign in">
<ion-nav-bar class="bar-stable">
</ion-nav-bar>
<ion-content>
<input type="text" placeholder="#handle" ng-model="userName" />
<button class="button button-block button-positive" ng-click="signIn()">Sign in</button>
</ion-content>
</ion-view>
app.js
app.controller('LoginController',function($scope,$state){
$state.go('landing');
};
});
app.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state('login',{
url : '/',
templateUrl : 'template/login.html',
controller : 'LoginController',
cache : false
});
$stateProvider.state('landing',{
url : '/landing',
templateUrl : 'template/landing.html',
controller : 'LandingController'
}).state('landing.updateProfile', {
url: "/updateProfile",
views: {
'menuContent' : {
templateUrl: "template/updateProfile.html"
}
}
});
$urlRouterProvider.otherwise('/');
});
template/landing.html
<ion-view view-title="Landing">
<ion-nav-bar class="bar-stable">
</ion-nav-bar>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon button-clear ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable"><h4>Do your thing</h4></ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/updateProfile">Update Profile</ion-item>
<ion-item menu-close href="#/yourDishes">Your Events</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-view>
template/updateProfile.html
<ion-view view-title="Update Profile">
<ion-content>
update profile
</ion-content>
</ion-view>
i got the issue fixed.
in template/landing.html href should be of below format, only then it will match the corresponding url mentioned in the config function.
<ion-item menu-close href="#/landing/updateProfile">Update Profile</ion-item>
<ion-item menu-close href="#/landing/yourDishes">Your Events</ion-item>
I have issue is my back button is not showing in detail page, after navigating it from tab. I have my states like
$stateProvider
.state('poets', {abstract: true, url: '/poets', templateUrl: 'views/poets/index.html'})
.state('poets.list', {url: '/poet-list', views: {'poets-list': {templateUrl: 'views/poets/poet.list.html', controller: 'PoetCtrl'}}})
.state('poets.popular', {url: '/poet-popular', views: {'poets-popular': {templateUrl: 'views/poets/poet.popular.html', controller: 'PoetPopularCtrl'}}})
.state('poets-detail', {url: '/poets/detail/:itemId', templateUrl: 'views/poets/detail.html', controller: 'PoetDetailCtrl'})
'poets.popular' & 'poets.popular' are two tabs both are navigating to detail page. I would like to add back button on my detail page so that, it navigate back to the previous state.
index.html
<ion-view>
<ion-tabs class="tabs-striped tabs-color-balanced tabs-icon-left">
<ion-tab icon="ion-home" title="All Poets" href="#/poets/poet-list">
<ion-nav-view name="poets-list"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-home" title="Popular" href="#/poets/poet-popular">
<ion-nav-view name="poets-popular"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
poet.list.html or poet.popular.html are almost same, I have written single as.
<ion-view title="Poets">
<ion-nav-buttons side="primary">
<button class="button button-icon" menu-toggle="left"><i class="icon ion-navicon"></i></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button ng-click="popover.show($event)" class="button button-icon"><i class="icon ion-more"></i></button>
</ion-nav-buttons>
<ion-content>
<ion-list>
<ion-item href="#/poets/detail/{{item.id}}" class="item-icon-right item item-text-wrap"
ng-repeat="item in data" type="item-link">
<h2>{{item.name}}</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
<ion-infinite-scroll ng-if="!end" on-infinite="fetchMore()"></ion-infinite-scroll>
</ion-content>
</ion-view>
detail.html
<ion-view view-title="{{data.name}}">
<ion-nav-bar class="bar bar-balanced">
<ion-nav-back-button class="button-clear"><i class="ion-arrow-left-a"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="primary">
<button class="button button-icon" menu-toggle="left"><i class="icon ion-navicon"></i></button>
</ion-nav-buttons>
<ion-content>
....
</ion-content>
</ion-view>
I am trying to use ionic Framework to build a content menu which has 2 parts, coming from different controllers. I have specified them as view: menuContent and view: menuSubcontent below.
HTML
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="main bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon"></i></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
<ion-nav-view name="menuSubcontent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close ng-click="login()">
Login
</ion-item>
<ion-item nav-clear menu-close href="#/app/morestuff">
etc.
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
ROUTER
.state('app.playlists', {
url: "/playlists",
views: {
'menuContent': {
templateUrl: "templates/playlists.html",
controller: 'PlaylistsCtrl'
},
'menuSubcontent': {
template: "<span>subcontent of playlists</span>"
}
}
})
When the page renders, the <ion-nav-view name="menuSubcontent"> is not visible although it is in the DOM. I added some CSS properties to make it visible:
z-index: 2
margin-top: 400px; /* some arbit large number */
I was wondering if this is the right approach (adding my own css classes to menuSubcontent) or is there systematic way of using the framework which takes out the guesswork in positioning with multiple views. I am still learning how to use this framework.
<ion-side-menus ng-controller="SideMenuController">
<!-- Header Changes -->
<ion-side-menu-content drag-content="false">
<ion-nav-bar class="bar bar-header bar-positive">
<!-- Open Sidebar Menu Start-->
<ion-nav-buttons side="left">
<button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<!-- Open Sidebar Menu End -->
<ion-nav-back-button class="button-clear">
<i class="ion-chevron-left"></i> Back
</ion-nav-back-button>
<!-- Open Sidebar Menu Start-->
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-refresh" ng-click="doRefresh()"></button>
</ion-nav-buttons>
<!-- Open Sidebar Menu End -->
</ion-nav-bar>
<ion-nav-view name="main" animation="slide-left-right">
</ion-nav-view>
</ion-side-menu-content>
<!-- Header Changes -->
<!-- SideMenu Contents -->
<ion-side-menu side="left" class="light-bg dark-border">
<header class="bar bar-header bar-light">
<h1 class="title">Route Menu</h1>
</header>
<ion-content class="has-header">
<div class="list">
<a menu-close class="item item-icon-left" href="#/app/home">
<i class="icon fa fa-bank fa-ionicon"></i>
Home
</a>
</ion-content>
<!-- SideMenu Contents -->
</ion-side-menu>
</ion-side-menus>
//** abstract route for sidemenu
$stateProvider.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/sidemenu.tpl.htm'
});
//!** Home
$stateProvider.state('app.home', {
url: '/home',
views: {
'main': {
templateUrl: 'app/home/home.tpl.htm'
}
}
});
Define your template as abstract in your routes :
Sources : http://codepen.io/ionic/pen/vqhzt
If you keep multiple in same page then you have to configure like below,
<ion-tab title="Rooms" icon-off="ion-ios7-box-outline" icon-on="ion-ios7-box" href="#/tab/rooms">
<ion-nav-view name="tab-rooms"></ion-nav-view>
</ion-tab>
<ion-tab title="Chat" icon-off="ion-ios7-chatboxes-outline" icon-on="ion-ios7-chatboxes" href="#/tab/chat">
<ion-nav-view name="tab-chat"></ion-nav-view>
</ion-tab>
So based on url appropriate view will get render,
Else you can create separate state for each view like below,
.state('menuLogin', {
url: '/menuLogin',
abstract: true,
templateUrl: 'templates/loginMenu.html'
})
.state('menuMain', {
url: '/menuMain',
cache:false,
abstract: true,
templateUrl: 'templates/mainMenu.html'
})
.state('menuLogin.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
.state('menuMain.main', {
url: '/main',
views: {
'menuContent': {
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
}
}
})
So first state is belongs to login menu and second is belongs to main menu.
Loginmenu.html :
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button class="no-text">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" align-title="center"></ion-nav-view>
and Mainmenu.html :
<ion-nav-bar class="bar-positive" align-title="center" style="text-align:center;">
<ion-nav-back-button class="no-text">
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent" align-title="center"></ion-nav-view>
So you can customize state like this.
Hope this helps you.