How does navigation work with side menu


#1

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.


Side menu for some views inside navigation system
#2

i have same problem, do you fixed it ~


#3

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?


#4

thank you so much.

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


#5

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


#6

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.