
<!-- ForceAndroid -->
<ons-navigator id="pushpage_navigator" animation="slide">
	<ons-page>
		<ons-splitter>
			<ons-splitter-side id="menu" side="left" width="220px" collapse>
				<ons-page id="pgMenuPage">
					<ons-list>
						<ons-list-item onclick="fn.load('tab1.html')" tappable>1</ons-list-item>
						<ons-list-item onclick="fn.load('tab6.html')" tappable>6</ons-list-item>
						<ons-list-item onclick="fn.load('tab8.html')" tappable>8</ons-list-item>
					</ons-list>
				</ons-page>
			</ons-splitter-side>

			<ons-splitter-content id="content" page="tab1.html"></ons-splitter-content>
		</ons-splitter>
	</ons-page>
</ons-navigator>

<template id="tab1.html">
	<ons-page id="pgTab1"> 
		<ons-toolbar id="mainTB">
			<div class="left">
				<ons-toolbar-button onclick="fn.open()">
					<ons-icon icon="md-menu" id="menuBarButton"></ons-icon>
				</ons-toolbar-button>
			</div>

			<div class="center" id="MainTitle"><!-- AppName --></div>

			<div class="right"><ons-toolbar-button id="icoSettings">
				<ons-icon id="icoSettingsicon" icon="md-settings" onclick="change('tab4.html')"></ons-icon><!--    <span id="bgGear" class="notification">1</span>      -->
			</ons-toolbar-button></div>
		</ons-toolbar>

		<!-- Include Templates for each tab - shown as pages below -->
		<ons-tabbar id="tabBarMain" swipeable position="bottom">
			<ons-tab id="Tab1" page="tab3.html" label="Tab 3" icon="ion-home, material:md-home" badge="7" active></ons-tab>
			<ons-tab id="Tab2" page="tab2.html" label="Tab 2" icon="md-settings" active-icon="md-face"></ons-tab>
		</ons-tabbar>

	</ons-page>
</template>