How to properly setup an app having home side-menu screen navigating to a tabbed screen?


#1

Hi *,

I would need some help.
I am trying to build an app where my main landing page (after the user navigates through signups/logins) is a side-menu enabled screen and a click on a button on this takes the user to a tabbed screen. Something like this:

Now the home and the tabbed screens can have other nav-header-right buttons moving to other views and back. I have something in place, but i see some problems during the navigation. e.g., if i go from home > next (lands on tab1) - all is fine. if i go to tab2 (which has a different right header icon) and i click back, the home screen nav-header has the same icon as in tab 2 - which is not correct.

Also, i have set my nav-title to be an centered image. but on navigating from home > next (lands on tab 1) > click on tab2 : the images gets left-aligned overlapping the “back-button”

What is the right way to configure the nav-bars to avoid these issues?

in my index.html:


		<ion-nav-title>
			<img class="s-nav-bar-logo" src="img/logo_green_black_BG.jpg">
		</ion-nav-title>
	</ion-nav-bar>

	<ion-nav-view></ion-nav-view>
</body>

My Home screen:







			<ion-nav-buttons side="left">
				<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
			</ion-nav-buttons>
			<ion-nav-buttons side="right">
				<button class="button button-icon icon ion-ios-gear" ng-click="goToSettings()"
				        nav-direction="forward"></button>
			</ion-nav-buttons>
		</ion-nav-bar>

		<!-- Content -->
		<ion-content padding="false" class=" manual-remove-top-padding has-header" scroll="false">
			<a ui-sref="sonect.nearest" class="button button-positive button-large button-full s-button"
			   nav-direction="forward">Next</a>
		</ion-content>
	</ion-side-menu-content>

	<ion-side-menu id="side-menu" side="left">
		<ion-content ng-controller="menuCtrl" padding="false" style="top:0px !important;"
		             class="side-menu-left s-side-menu">
			<div data-componentid="user-image"
			     style="margin: 0px; line-height: 250px; background-color: rgb(232, 235, 239); text-align: center;">
				<i class="icon ion-image" style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;"></i>
			</div>

			<ion-list id="menu-items" data-componentid="list3">
				<ion-item class="item-icon-left s-side-menu-item" id="menu-list-item13" data-componentid="list-item13">
					<i class="icon ion-ionic"></i>Item
				</ion-item>
				<ion-item class="item-icon-left s-side-menu-item" id="menu-list-item14" data-componentid="list-item14">
					<i class="icon ion-ionic"></i>Item
				</ion-item>
				<ion-item class="item-icon-left s-side-menu-item" id="menu-list-item15" data-componentid="list-item15">
					<i class="icon ion-ionic"></i>Item
				</ion-item>
			</ion-list>
		</ion-content>
	</ion-side-menu>
</ion-side-menus>

tab 1 (tab 2, 3 have different layouts with different nav-header-right buttons)






<!-- Content -->
<ion-content padding="false" class=" manual-remove-top-padding has-header">
	<div style="margin: 0px; line-height: 250px; background-color: rgb(232, 235, 239); text-align: center;">
		<i class="icon ion-image" style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;"></i>
	</div>
	<button id="nearest-button6" class="button button-positive button-large button-full s-button">Click Me!</button>
</ion-content>

Any help is much appreciated. I am new to ionic, but have enough AngularJS experience.

Thanks in advance!
Ari.


#2

Try out the code demo from these links https://github.com/vincurekf/Native-like-Framework http://nlmd.vincurekf.cz/#/app to add side menu and then add Tabs template in other STATE.