docs(demos): use root level menu in example

demos/component-docs/app.html

@@ -1,3 +1,7 @@
+<img src="img/android-statusbar-blue.png" style="display:none" id="md-only">
+<img src="img/ios-statusbar.png" style="display:none" id="ios-only">
+
+
 <ion-menu [content]="content" id="leftMenu">
 
   <ion-toolbar primary>
@@ -8,7 +12,7 @@
 
     <ion-list>
 
-      <button ion-item *ng-for="#p of pages" (click)="openPage(menu, p)">
+      <button ion-item *ng-for="#p of pages" (click)="openPage(p)">
         {{p.title}}
       </button>
 
@@ -21,4 +25,6 @@
 
 </ion-menu>
 
-<ion-nav id="menuNav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
+<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
+
+<ion-overlay></ion-overlay>

demos/component-docs/index.ts

@@ -1,14 +1,12 @@
 import {App, IonicApp, Platform, ActionSheet} from 'ionic/ionic';
 import {Page, Config, Events} from 'ionic/ionic';
+import {PageOne, PageTwo, PageThree} from './menus/menus';
 import {ActionSheetPage} from './actionSheet/actionSheet';
 import * as helpers from './helpers';
 
 
 @App({
-  template: '<img src="img/android-statusbar-blue.png" style="display:none" id="md-only">' +
+  templateUrl: 'app.html',
-            '<img src="img/ios-statusbar.png" style="display:none" id="ios-only">' +
-            '<ion-nav id="nav" [root]="rootPage" #content></ion-nav>' +
-            '<ion-overlay></ion-overlay>',
 })
 class DemoApp {
 
@@ -20,6 +18,12 @@ class DemoApp {
     this.platform = platform;
     this.androidAttribute = helpers.AndroidAttribute;
 
+    this.pages = [
+      { title: 'Home', component: PageOne },
+      { title: 'Friends', component: PageTwo },
+      { title: 'Events', component: PageThree }
+    ];
+
     this.platform.ready().then( () => {
       window.addEventListener('message', (e) => {
         zone.run(() => {
@@ -40,4 +44,14 @@ class DemoApp {
 
   }
 
+  openPage(page) {
+    // close the menu when clicking a link from the menu
+    this.app.getComponent('leftMenu').close();
+
+    // Reset the content nav to have just this page
+    // we wouldn't want the back button to show in this scenario
+    let nav = this.app.getComponent('nav');
+    nav.setRoot(page.component);
+  }
+
 }

demos/component-docs/menus/menu-events.html

@@ -1,6 +1,6 @@
 <ion-navbar *navbar class="android-attr">
 
-  <a menu-toggle>
+  <a menu-toggle="leftMenu">
     <icon menu></icon>
   </a>
 
@@ -11,5 +11,5 @@
 </ion-navbar>
 
 
-<ion-content #content padding>
+<ion-content padding>
 </ion-content>

demos/component-docs/menus/menu-home.html

@@ -1,6 +1,6 @@
 <ion-navbar *navbar class="android-attr">
 
-  <a menu-toggle>
+  <a menu-toggle="leftMenu">
     <icon menu></icon>
   </a>
 
@@ -11,6 +11,6 @@
 </ion-navbar>
 
 
-<ion-content #content padding>
+<ion-content padding>
-  <button block menu-toggle>Toggle Menu</button>
+  <button block menu-toggle="leftMenu">Toggle Menu</button>
 </ion-content> 

demos/component-docs/menus/menu-places.html

@@ -0,0 +1,15 @@
+<ion-navbar *navbar class="android-attr">
+
+  <a menu-toggle="leftMenu">
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    Places
+  </ion-title>
+
+</ion-navbar>
+
+
+<ion-content padding>
+</ion-content>

demos/component-docs/menus/menus.ts

@@ -2,12 +2,20 @@ import {App, IonicApp, Page} from 'ionic/ionic';
 import {forwardRef} from 'angular2/angular2';
 import * as helpers from '../helpers';
 
-
 @Page({
   templateUrl: 'menus/menu-home.html',
   directives: [forwardRef(() => helpers.AndroidAttribute)]
 })
-class PageOne{
+export class MenusPage{
+  constructor() {
+  }
+}
+
+@Page({
+  templateUrl: 'menus/menu-home.html',
+  directives: [forwardRef(() => helpers.AndroidAttribute)]
+})
+export class PageOne{
   constructor() {
   }
 }
@@ -16,40 +24,12 @@ class PageOne{
   templateUrl: 'menus/menu-friends.html',
   directives: [forwardRef(() => helpers.AndroidAttribute)]
 })
-class PageTwo{
+export class PageTwo{
 }
 
 @Page({
   templateUrl: 'menus/menu-events.html',
   directives: [forwardRef(() => helpers.AndroidAttribute)]
 })
-class PageThree{
+export class PageThree{
-}
-
-@Page({
-  templateUrl: 'menus/menus.html',
-  directives: [forwardRef(() => helpers.AndroidAttribute)]
-})
-export class MenusPage {
-
-  constructor(app: IonicApp) {
-    this.app = app;
-    this.rootPage = PageOne;
-    this.pages = [
-      { title: 'Home', component: PageOne },
-      { title: 'Friends', component: PageTwo },
-      { title: 'Events', component: PageThree }
-    ];
-
-  }
-
-  openPage(menu, page) {
-    // close the menu when clicking a link from the menu
-    this.app.getComponent('leftMenu').close();
-
-    // Reset the content nav to have just this page
-    // we wouldn't want the back button to show in this scenario
-    let nav = this.app.getComponent('menuNav');
-    nav.setRoot(page.component);
-  }
 }