docs(demos): add menu demo

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

@@ -0,0 +1,15 @@
+<ion-navbar *navbar>
+
+  <a menu-toggle>
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    Events
+  </ion-title>
+
+</ion-navbar>
+
+
+<ion-content #content padding>
+</ion-content>

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

@@ -0,0 +1,15 @@
+<ion-navbar *navbar>
+
+  <a menu-toggle>
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    Friends
+  </ion-title>
+
+</ion-navbar>
+
+
+<ion-content #content padding>
+</ion-content>

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

@@ -0,0 +1,16 @@
+<ion-navbar *navbar>
+
+  <a menu-toggle>
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    Menus
+  </ion-title>
+
+</ion-navbar>
+
+
+<ion-content #content padding>
+  <button block menu-toggle>Toggle Menu</button>
+</ion-content> 

demos/component-docs/menus/menus.html

@@ -1,12 +1,24 @@
+<ion-menu #menu [content]="content">
 
-<ion-navbar *navbar class="show-navbar">
-  <ion-title>Menus</ion-title>
-</ion-navbar>
+  <ion-toolbar primary>
+    <ion-title>Menu</ion-title>
+  </ion-toolbar>
 
-<ion-content class="has-header padding">
-  TODO
-</ion-content>
+  <ion-content>
 
+    <ion-list>
 
+      <button ion-item *ng-for="#p of pages" (click)="openPage(menu, p)">
+        {{p.title}}
+      </button>
 
+      <button ion-item menu-toggle>
+        Close Menu
+      </button>
 
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+<ion-nav id="menuNav" #content [root]="rootView"></ion-nav> 

demos/component-docs/menus/menus.ts

@@ -1,10 +1,58 @@
-import {IonicPlatform, IonicView} from 'ionic/ionic';
+import {App, IonicApp, IonicView, NavController, NavParams} from 'ionic/ionic';
+import {IonicView, Events} from 'ionic/ionic';
+import * as helpers from 'helpers';
 
 @IonicView({
-    templateUrl: 'menus/menus.html',
+  templateUrl: 'menus/menu-home.html'
+})
+class PageOne{
+  constructor(nav: NavController, events: Events) {
+      this.nav = nav;
+      this.events = events;
+  }
+}
+
+@IonicView({
+  templateUrl: 'menus/menu-friends.html'
+})
+class PageTwo{
+}
+
+@IonicView({
+  templateUrl: 'menus/menu-events.html'
+})
+class PageThree{
+}
+
+@IonicView({
+  templateUrl: 'menus/menus.html'
 })
 export class MenusPage {
-    constructor() {
 
-    }
-}
+  constructor(app: IonicApp, events: Events, nav: NavController) {
+    this.nav = nav;
+    this.app = app;
+    this.rootView = PageOne;
+    this.pages = [
+      { title: 'Home', component: PageOne },
+      { title: 'Friends', component: PageTwo },
+      { title: 'Events', component: PageThree }
+    ];
+
+  }
+
+  onViewWillUnload() {
+  }
+
+  openPage(menu, page) {
+    // close the menu when clicking a link from the menu
+    menu.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');
+    this.nav.setRoot(page.component);
+  }
+}
+
+