How does navigation work with side menu

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.

i have same problem, do you fixed it ~

Yes I did. You need to keep the same structure for your state by wrapping them with <ion-view>. So to fix the issue with side menu:

<ion-view hide-nav-bar="true">
	<ion-content>

		<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>

	</ion-content>
</ion-view>

The back issue is gone. My guess is that ion-view will register the state in history. Can someone confirm the behaviour?

thank you so much.

but i find the silde page flash across, do you have the problem?

Hey, I copied you code and put ion-side-menus in ion-content, but the ion-side-menus content does not show, have you check this? Thanks

I solved it this way:

In the index, you just put

 <ion-nav-view name="appContent"></ion-nav-view>

In the side menus tag:

  <ion-side-menu-content ng-controller="ContentController" >
       <ion-nav-view name="menuContent">
      </ion-nav-view>
 </ion-side-menu-content> 

And you put the nav-bar in every page that you link from side-menu, for example:

<ion-view title="My page title">
<ion-nav-bar class="bar-dark">
          <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> 
          <ion-nav-back-button class="button-icon ion-arrow-left-c"> </ion-nav-back-button>
</ion-nav-bar>
<ion-content>
<p> Hello Ionic! </p>
</ion-content>
</ion-view>

Notice where the ion-content tag is: the nav-bar is outside it but both are in view tag.