I have a hard time to understand how to combine navigation and side menu. My app is composed by 3 states:
Login
List with side menu
Details
In index.html I defined a ion-nav-bar
to handle back button and a ion-nav-view
.
<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-nav-view
<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 ion-nav-bar
in 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.