docs(demos): update menu API demo to use multiple menus

This is actually the same as the ID demo but I figured I would keep
them separate in case we decide to do something different in them.

references driftyco/ionic-site#397

demos/menu/index.ts

@@ -1,12 +1,22 @@
 import {App, IonicApp, Page} from 'ionic/ionic';
 
-
 @Page({templateUrl: 'page1.html'})
-class Page1 {}
+class Page1 {
-
+  constructor(app: IonicApp) {
-
+    this.app = app;
-@Page({templateUrl: 'page2.html'})
+    this.menu1Active();
-class Page2 {}
+  }
+  menu1Active() {
+    this.activeMenu = 'menu1';
+    this.app.getComponent('menu1').enable(true);
+    this.app.getComponent('menu2').enable(false);
+  }
+  menu2Active() {
+    this.activeMenu = 'menu2';
+    this.app.getComponent('menu1').enable(false);
+    this.app.getComponent('menu2').enable(true);
+  }
+}
 
 @App({
   templateUrl: 'main.html'
@@ -15,17 +25,5 @@ class ApiDemoApp {
   constructor(app: IonicApp) {
     this.app = app;
     this.rootView = Page1;
-
-    this.pages = [
-      { title: 'Page 1', component: Page1 },
-      { title: 'Page 2', component: Page2 },
-    ];
-  }
-
-  openPage(menu, page) {
-    // 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/menu/main.html

@@ -1,25 +1,34 @@
-<ion-menu #menu [content]="content">
+<ion-menu [content]="content" id="menu1">
 
   <ion-toolbar secondary>
-    <ion-title>Left Menu</ion-title>
+    <ion-title>Menu 1</ion-title>
   </ion-toolbar>
 
   <ion-content>
-
     <ion-list>
-
+      <button ion-item menuClose="menu1" detail-none>
-      <button ion-item menuClose *ngFor="#p of pages" (click)="openPage(menu, p)">
+        Close Menu 1
-        {{p.title}}
       </button>
-
-      <button ion-item menuToggle>
-        Close Menu
-      </button>
-
     </ion-list>
   </ion-content>
 
 </ion-menu>
 
 
+<ion-menu [content]="content" id="menu2">
+
+  <ion-toolbar danger>
+    <ion-title>Menu 2</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+    <ion-list>
+      <button ion-item menuClose="menu2" detail-none>
+        Close Menu 2
+      </button>
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
 <ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

demos/menu/page1.html

@@ -1,25 +1,23 @@
-
 <ion-navbar *navbar>
-
+  <button [menuToggle]="activeMenu">
-  <button menuToggle>
     <ion-icon name="menu"></ion-icon>
   </button>
-
   <ion-title>
     Menu
   </ion-title>
-
 </ion-navbar>
 
 
-<ion-content #content padding>
+<ion-content padding>
 
-  <h3>Page 1</h3>
+  <h4>Active Menu: <b primary>{{ (activeMenu == 'menu1') ? 'Menu 1' : 'Menu 2' }}</b></h4>
 
-  <p>
+  <p>This page has two menus with different id's, but only one is active at a time.</p>
-    <button menuToggle>Toggle Menu</button>
-  </p>
 
-    <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  <button block secondary (click)="menu1Active()">Make Menu 1 Active</button>
+
+  <button block danger (click)="menu2Active()">Make Menu 2 Active</button>
+
+  <button block [menuToggle]="activeMenu">Toggle Menu</button>
 
 </ion-content>

demos/menu/page2.html

@@ -1,22 +0,0 @@
-
-<ion-navbar *navbar>
-
-  <button menuToggle>
-    <ion-icon name="menu"></ion-icon>
-  </button>
-
-  <ion-title>
-    Menu
-  </ion-title>
-
-</ion-navbar>
-
-<ion-content #content padding>
-
-  <h3>Page 2</h3>
-
-  <p>
-    <button menuToggle>Toggle Menu</button>
-  </p>
-
-</ion-content>