I have a hard time to understand how to combine navigation and side menu. My app is composed by 3 states:
List with side menu
In index.html I defined a
ion-nav-bar to handle back button and a
<ion-nav-bar class="bar-stable nav-title-slide-ios7"> <ion-nav-back-button class="button-icon"> <i class="ion-arrow-left-c"></i> Back </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view>
So when the login state is active the following code is rendered inside the
<ion-view hide-nav-bar="true" title="Login"> <ion-content> </ion-content> </ion-view>
It’s working great. Then I navigate to another state that is supposed to display a list with a side menu bar. This is where I am confused. To my understanding since the
ion-nav-bar is defined on the
index.html, it will be rendered for each state. So I set
hide-nav-bar attribute to true because I dont’ want the one defined in
index.html because it does not handle the side menu.
And inside the
ion-nav-view, I put the following code:
<ion-side-menus> <ion-side-menu-content> <ion-nav-bar class="bar-stable nav-title-slide-ios7"> </ion-nav-bar> <ion-view title="Home" hide-nav-bar="true"> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> <ion-content> </ion-content> </ion-view> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> <header class="bar bar-header bar-stable"> </header> <ion-content class="has-header"> </ion-content> </ion-side-menu> </ion-side-menus>
The issue is that the nav bar is hidden even if I defined another one within
ion-side-menus. So I removed the
hide-nav-bar and it’s working.
The one thing I don’t understand is that I have a
index.html and one within the
ion-side-menus and the one from
index.html is not displayed. Could you explain why?
In my list when I click on one item, I switch to the details state. On that state, the code is the following:
<ion-view title="Details"> <ion-content> </ion-content> </ion-view>
The back button is displayed but when I click on it, it goes back to the login state, and not the previous one which is the one with the side menus.