chore(build): rename ionic directory to src and update all references in the build process.

src/components/menu/test/basic/e2e.ts

@@ -0,0 +1,9 @@
+
+it('should toggle open menu', function() {
+  element(by.css('.e2eContentToggleMenu')).click();
+});
+
+
+it('should close menu', function() {
+  element(by.css('.e2eCloseLeftMenu')).click();
+});

src/components/menu/test/basic/index.ts

@@ -0,0 +1,73 @@
+import {App, IonicApp, MenuController, Page, NavController, Alert} from '../../../../../ionic';
+
+
+@Page({
+  templateUrl: 'page1.html'
+})
+class Page1 {
+  constructor(private nav: NavController) {}
+
+  presentAlert() {
+    let alert = Alert.create({
+      title: "New Friend!",
+      message: "Your friend, Obi wan Kenobi, just accepted your friend request!",
+      cssClass: 'my-alert',
+      buttons: ['Ok']
+    });
+    this.nav.present(alert);
+  }
+}
+
+
+@Page({templateUrl: 'page3.html'})
+class Page3 {}
+
+
+@Page({templateUrl: 'page2.html'})
+class Page2 {
+  constructor(private nav: NavController) {}
+
+  page3() {
+    this.nav.push(Page3);
+  }
+}
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  rootPage;
+  changeDetectionCount: number = 0;
+  pages: Array<{title: string, component: any}>;
+
+  constructor(private app: IonicApp, private menu: MenuController) {
+    this.rootPage = Page1;
+
+    this.pages = [
+      { title: 'Page 1', component: Page1 },
+      { title: 'Page 2', component: Page2 },
+      { title: 'Page 3', component: Page3 },
+    ];
+  }
+
+  openPage(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).then(() => {
+      // wait for the root page to be completely loaded
+      // then close the menu
+      this.menu.close();
+    });
+  }
+
+  onMenuOpening(ev) {
+    console.log('onMenuOpening', ev);
+  }
+
+  isChangeDetecting() {
+    console.log('Change detection', ++this.changeDetectionCount);
+    return true;
+  }
+}

src/components/menu/test/basic/main.html

@@ -0,0 +1,143 @@
+<ion-menu [content]="content" side="left" persistent="true">
+
+  <ion-toolbar secondary>
+    <ion-title>Left Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list>
+
+      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
+        {{p.title}}
+      </button>
+
+      <button ion-item menuClose="left" class="e2eCloseLeftMenu" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="left" detail-none>
+        Close Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+
+<ion-menu [content]="content" side="right">
+
+  <ion-toolbar danger>
+    <ion-title>Right Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list>
+
+      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
+        {{p.title}}
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+      <button ion-item menuClose="right" detail-none>
+        Close Menu
+      </button>
+
+    </ion-list>
+
+  </ion-content>
+
+</ion-menu>
+
+<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
+
+<div [hidden]="isChangeDetecting()"></div>

src/components/menu/test/basic/page1.html

@@ -0,0 +1,56 @@
+
+<ion-navbar *navbar>
+
+  <button menuToggle="left">
+    <ion-icon name="menu"></ion-icon>
+  </button>
+
+  <ion-title>
+    Menu
+  </ion-title>
+
+  <ion-buttons end>
+    <button>
+      <ion-icon name="football"></ion-icon>
+    </button>
+  </ion-buttons>
+
+  <ion-buttons start>
+    <button>
+      <ion-icon name="baseball"></ion-icon>
+    </button>
+  </ion-buttons>
+
+  <button menuToggle="right" right secondary>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+
+</ion-navbar>
+
+
+<ion-content padding>
+
+  <h3>Page 1</h3>
+
+  <p>
+    <button class="e2eContentToggleMenu" menuToggle="left">Toggle Left Menu</button>
+  </p>
+
+  <p>
+    <button menuToggle="right">Toggle Right Menu</button>
+  </p>
+
+  <ion-card>
+    <ion-item>
+      <ion-label>Username:</ion-label>
+      <ion-input></ion-input>
+    </ion-item>
+  </ion-card>
+
+  <p>
+    <button (click)="presentAlert()">Open alert</button>
+  </p>
+
+  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+
+</ion-content>

src/components/menu/test/basic/page2.html

@@ -0,0 +1,26 @@
+
+<ion-navbar *navbar>
+
+  <button menuToggle>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+
+  <ion-title>
+    Menu
+  </ion-title>
+
+</ion-navbar>
+
+<ion-content padding>
+
+  <h3>Page 2</h3>
+
+  <p>
+    <button menuToggle class="e2eContentToggleMenu">Toggle Left Menu</button>
+  </p>
+
+  <p>
+    <button (click)="page3()">Go to page 3</button>
+  </p>
+
+</ion-content>

src/components/menu/test/basic/page3.html

@@ -0,0 +1,29 @@
+
+<ion-navbar *navbar>
+
+  <button menuToggle="left">
+    <ion-icon name="menu"></ion-icon>
+  </button>
+
+  <ion-title>
+    Menu
+  </ion-title>
+
+  <button menuToggle="right" right>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+
+</ion-navbar>
+
+
+<ion-content padding>
+
+  <h3>Page 3</h3>
+
+  <p>
+    <button menuToggle="right">Toggle Right Menu</button>
+  </p>
+
+  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+
+</ion-content>

src/components/menu/test/disable-swipe/index.ts

@@ -0,0 +1,35 @@
+import {App, Page, NavController, MenuController} from '../../../../../ionic';
+
+@Page({
+  templateUrl: 'page1.html'
+})
+class Page1 {
+  leftMenuSwipeEnabled: boolean = true;
+  rightMenuSwipeEnabled: boolean = false;
+
+  constructor(menu: MenuController) {
+    this.menu = menu;
+  }
+
+  toggleLeftMenuSwipeable() {
+    this.leftMenuSwipeEnabled = !this.leftMenuSwipeEnabled;
+
+    this.menu.swipeEnable(this.leftMenuSwipeEnabled, 'left');
+  }
+
+  toggleRightMenuSwipeable() {
+    this.rightMenuSwipeEnabled = !this.rightMenuSwipeEnabled;
+
+    this.menu.swipeEnable(this.rightMenuSwipeEnabled, 'right');
+  }
+}
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor() {
+    this.rootView = Page1;
+  }
+}

src/components/menu/test/disable-swipe/main.html

@@ -0,0 +1,36 @@
+<ion-menu [content]="content" side="left">
+
+  <ion-toolbar secondary>
+    <ion-title>Left Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list>
+      <button ion-item>
+        Left Item 1
+      </button>
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+
+<ion-menu [content]="content" side="right" swipeEnabled="false">
+
+  <ion-toolbar danger>
+    <ion-title>Right Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list>
+      <button ion-item>
+        Right Item 1
+      </button>
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+<ion-nav id="nav" [root]="rootView" #content swipeBackEnabled="false"></ion-nav>

src/components/menu/test/disable-swipe/page1.html

@@ -0,0 +1,33 @@
+<ion-navbar *navbar>
+
+  <button menuToggle="left">
+    <ion-icon name="menu"></ion-icon>
+  </button>
+
+  <ion-title>
+    Main
+  </ion-title>
+
+  <button menuToggle="right" right secondary>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+</ion-navbar>
+
+
+<ion-content padding>
+
+  <h3>Page 1</h3>
+
+  <p>Left Menu Swipe Enabled: {{ leftMenuSwipeEnabled }}</p>
+
+  <p>
+    <button (click)="toggleLeftMenuSwipeable()">Toggle Left Menu Swipeable</button>
+  </p>
+
+  <p>Right Menu Swipe Enabled: {{ rightMenuSwipeEnabled }}</p>
+
+  <p>
+    <button (click)="toggleRightMenuSwipeable()">Toggle Right Menu Swipeable</button>
+  </p>
+
+</ion-content>

src/components/menu/test/enable-disable/index.ts

@@ -0,0 +1,56 @@
+import {App, Page, IonicApp, MenuController} from '../../../../../ionic';
+
+
+@Page({
+  templateUrl: 'page1.html'
+})
+class Page1 {
+}
+
+@Page({
+  templateUrl: 'page2.html'
+})
+class Page2 {
+}
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  rootPage;
+  activeMenu: string;
+
+  constructor(app: IonicApp, menu: MenuController) {
+    this.app = app;
+    this.menu = menu;
+
+    this.page1 = Page1;
+    this.page2 = Page2;
+
+    this.rootPage = Page1;
+    this.menu1Active();
+  }
+
+  openPage(p) {
+    // Get the <ion-nav> by id
+    let nav = this.app.getComponent('nav');
+    nav.setRoot(p);
+  }
+
+  menu1Active() {
+    this.menu.enable(true, 'menu1');
+    this.menu.enable(false, 'menu2');
+    this.menu.enable(false, 'menu3');
+  }
+  menu2Active() {
+    this.menu.enable(false, 'menu1');
+    this.menu.enable(true, 'menu2');
+    this.menu.enable(false, 'menu3');
+  }
+  menu3Active() {
+    this.menu.enable(false, 'menu1');
+    this.menu.enable(false, 'menu2');
+    this.menu.enable(true, 'menu3');
+  }
+}

src/components/menu/test/enable-disable/main.html

@@ -0,0 +1,79 @@
+
+<ion-menu [content]="content" id="menu1">
+
+  <ion-toolbar secondary>
+    <ion-title>Menu 1</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+    <ion-list>
+      <button ion-item menuClose (click)="menu1Active()">Make Menu 1 Active</button>
+      <button ion-item menuClose (click)="menu2Active()">Make Menu 2 Active</button>
+      <button ion-item menuClose (click)="menu3Active()">Make Menu 3 Active</button>
+      <button ion-item menuClose (click)="openPage(page1)">
+        Page 1
+      </button>
+      <button ion-item menuClose (click)="openPage(page2)">
+        Page 2
+      </button>
+      <button ion-item menuClose detail-none>
+        Close Menu 1
+      </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 (click)="menu1Active()">Make Menu 1 Active</button>
+      <button ion-item menuClose (click)="menu2Active()">Make Menu 2 Active</button>
+      <button ion-item menuClose (click)="menu3Active()">Make Menu 3 Active</button>
+      <button ion-item menuClose (click)="openPage(page1)">
+        Page 1
+      </button>
+      <button ion-item menuClose (click)="openPage(page2)">
+        Page 2
+      </button>
+      <button ion-item menuClose detail-none>
+        Close Menu 2
+      </button>
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+<ion-menu [content]="content" id="menu3">
+
+  <ion-toolbar primary>
+    <ion-title>Menu 3</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+    <ion-list>
+      <button ion-item menuClose (click)="menu1Active()">Make Menu 1 Active</button>
+      <button ion-item menuClose (click)="menu2Active()">Make Menu 2 Active</button>
+      <button ion-item menuClose (click)="menu3Active()">Make Menu 3 Active</button>
+      <button ion-item menuClose (click)="openPage(page1)">
+        Page 1
+      </button>
+      <button ion-item menuClose (click)="openPage(page2)">
+        Page 2
+      </button>
+      <button ion-item menuClose detail-none>
+        Close Menu 3
+      </button>
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+
+<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

src/components/menu/test/enable-disable/page1.html

@@ -0,0 +1,21 @@
+
+<ion-navbar *navbar>
+  <button menuToggle="left">
+    <ion-icon name="menu"></ion-icon>
+  </button>
+  <ion-title>
+    Multiple Menus
+  </ion-title>
+</ion-navbar>
+
+
+<ion-content padding>
+  <h3> Page 1 </h3>
+
+  <p>
+    <button menuToggle="left">Toggle Menu</button>
+  </p>
+
+  <p>This page has two left menus, but only one is active at a time.</p>
+
+</ion-content>

src/components/menu/test/enable-disable/page2.html

@@ -0,0 +1,21 @@
+
+<ion-navbar *navbar>
+  <button menuToggle="left">
+    <ion-icon name="menu"></ion-icon>
+  </button>
+  <ion-title>
+    Multiple Menus
+  </ion-title>
+</ion-navbar>
+
+
+<ion-content padding>
+  <h3> Page 2 </h3>
+
+  <p>
+    <button menuToggle="left">Toggle Menu</button>
+  </p>
+
+  <p>This page has two left menus, but only one is active at a time.</p>
+
+</ion-content>

src/components/menu/test/menu.spec.ts

@@ -0,0 +1,250 @@
+import {MenuController, Menu} from '../../../../ionic';
+
+export function run() {
+  describe('MenuController', () => {
+
+    describe('get() without menuId', () => {
+
+      it('should not get a menu if no menus', () => {
+        let menu = menuCtrl.get();
+        expect(menu).toEqual(null);
+      });
+
+      it('should get the only menu', () => {
+        let someMenu = mockMenu();
+        menuCtrl.register(someMenu);
+
+        let menu = menuCtrl.get();
+        expect(menu).toEqual(someMenu);
+      });
+
+      it('should get the only menu if menuId === ""', () => {
+        let someMenu = mockMenu();
+        menuCtrl.register(someMenu);
+
+        let menu = menuCtrl.get('');
+        expect(menu).toEqual(someMenu);
+      });
+
+      it('should get the enabled menu when multiple menus', () => {
+        let someMenu1 = mockMenu();
+        someMenu1.enabled = false;
+        menuCtrl.register(someMenu1);
+
+        let someMenu2 = mockMenu();
+        someMenu2.enabled = true;
+        menuCtrl.register(someMenu2);
+
+        let menu = menuCtrl.get();
+        expect(menu).toEqual(someMenu2);
+      });
+
+    });
+
+    describe('get() by id', () => {
+
+      it('should be null if no menus', () => {
+        let menu = menuCtrl.get('myid');
+        expect(menu).toEqual(null);
+      });
+
+      it('should be null if no matching menus with id', () => {
+        let someMenu = mockMenu();
+        someMenu.id = 'whatever';
+        menuCtrl.register(someMenu);
+
+        let menu = menuCtrl.get('myMenu');
+        expect(menu).toEqual(null);
+      });
+
+      it('should get the menu by id with matching id', () => {
+        let someMenu = mockMenu();
+        someMenu.id = 'myMenu';
+        menuCtrl.register(someMenu);
+
+        let menu = menuCtrl.get('myMenu');
+        expect(menu).toEqual(someMenu);
+      });
+
+      it('should get the menu by id with left', () => {
+        let someMenu = mockMenu();
+        someMenu.id = 'myMenu';
+        someMenu.side = 'left';
+        menuCtrl.register(someMenu);
+
+        let menu = menuCtrl.get('myMenu');
+        expect(menu).toEqual(someMenu);
+      });
+
+      it('should get the menu by id with matching id when multiple menus', () => {
+        let someMenu1 = mockMenu();
+        someMenu1.id = 'myMenu1';
+        menuCtrl.register(someMenu1);
+
+        let someMenu2 = mockMenu();
+        someMenu2.id = 'myMenu2';
+        menuCtrl.register(someMenu2);
+
+        let menu = menuCtrl.get('myMenu1');
+        expect(menu).toEqual(someMenu1);
+
+        menu = menuCtrl.get('myMenu2');
+        expect(menu).toEqual(someMenu2);
+      });
+
+    });
+
+    describe('get() by side', () => {
+
+      it('should not get a menu with a left side if no menus', () => {
+        let menu = menuCtrl.get('left');
+        expect(menu).toEqual(null);
+      });
+
+      it('should not get a menu with a right side if no menus', () => {
+        let menu = menuCtrl.get('right');
+        expect(menu).toEqual(null);
+      });
+
+      it('should get the only left menu', () => {
+        let someMenu = mockMenu();
+        someMenu.side = 'left';
+        menuCtrl.register(someMenu);
+
+        let menu = menuCtrl.get('left');
+        expect(menu).toEqual(someMenu);
+      });
+
+      it('should get the enabled left menu', () => {
+        let someMenu1 = mockMenu();
+        someMenu1.side = 'left';
+        someMenu1.enabled = false;
+        menuCtrl.register(someMenu1);
+
+        let someMenu2 = mockMenu();
+        someMenu2.side = 'left';
+        someMenu2.enabled = true;
+        menuCtrl.register(someMenu2);
+
+        let menu = menuCtrl.get('left');
+        expect(menu).toEqual(someMenu2);
+      });
+
+      it('should get the first left menu when all are disabled', () => {
+        let someMenu1 = mockMenu();
+        someMenu1.side = 'left';
+        someMenu1.enabled = false;
+        menuCtrl.register(someMenu1);
+
+        let someMenu2 = mockMenu();
+        someMenu2.side = 'left';
+        someMenu2.enabled = false;
+        menuCtrl.register(someMenu2);
+
+        let menu = menuCtrl.get('left');
+        expect(menu).toEqual(someMenu1);
+      });
+
+      it('should get the only right menu', () => {
+        let someMenu = mockMenu();
+        someMenu.side = 'right';
+        menuCtrl.register(someMenu);
+
+        let menu = menuCtrl.get('right');
+        expect(menu).toEqual(someMenu);
+      });
+
+      it('should get the menu by left with id', () => {
+        let someMenu = mockMenu();
+        someMenu.id = 'myMenu';
+        someMenu.side = 'left';
+        menuCtrl.register(someMenu);
+
+        let menu = menuCtrl.get('left');
+        expect(menu).toEqual(someMenu);
+      });
+
+    });
+
+    describe('enable()', () => {
+
+      it('should enable a menu', () => {
+        let someMenu = mockMenu();
+        someMenu.enabled = true;
+        menuCtrl.register(someMenu);
+        someMenu._menuCtrl = menuCtrl;
+
+        let menu = menuCtrl.enable(true);
+        expect(menu.enabled).toEqual(true);
+
+        menu = menuCtrl.enable(false);
+        expect(menu.enabled).toEqual(false);
+      });
+
+      it('should be only one enabled menu on the same side', () => {
+        let someMenu1 = mockMenu();
+        someMenu1.enabled = true;
+        someMenu1.side = 'left';
+        someMenu1.id = 'menu1';
+        someMenu1._menuCtrl = menuCtrl;
+        menuCtrl.register(someMenu1);
+
+        let someMenu2 = mockMenu();
+        someMenu2.enabled = false;
+        someMenu2.side = 'left';
+        someMenu2.id = 'menu2';
+        someMenu2._menuCtrl = menuCtrl;
+        menuCtrl.register(someMenu2);
+
+        let someMenu3 = mockMenu();
+        someMenu3.enabled = true;
+        someMenu3.side = 'right';
+        someMenu3.id = 'menu2';
+        someMenu3._menuCtrl = menuCtrl;
+        menuCtrl.register(someMenu3);
+
+        menuCtrl.enable(true, 'menu1');
+        expect(someMenu1.enabled).toEqual(true);
+        expect(someMenu2.enabled).toEqual(false);
+        expect(someMenu3.enabled).toEqual(true);
+
+        menuCtrl.enable(true, 'menu2');
+        expect(someMenu1.enabled).toEqual(false);
+        expect(someMenu2.enabled).toEqual(true);
+        expect(someMenu3.enabled).toEqual(true);
+
+        menuCtrl.enable(true, 'menu1');
+        expect(someMenu1.enabled).toEqual(true);
+        expect(someMenu2.enabled).toEqual(false);
+        expect(someMenu3.enabled).toEqual(true);
+      });
+
+    });
+
+    it('should register a menu', () => {
+      let menu = mockMenu();
+      menuCtrl.register(menu);
+      expect(menuCtrl.getMenus().length).toEqual(1);
+
+      let menu2 = mockMenu();
+      menuCtrl.register(menu2);
+      expect(menuCtrl.getMenus().length).toEqual(2);
+
+      menuCtrl.unregister(menu2);
+      menuCtrl.unregister(menu);
+
+      expect(menuCtrl.getMenus().length).toEqual(0);
+    });
+
+    let menuCtrl: MenuController;
+
+    beforeEach(() => {
+      menuCtrl = new MenuController();
+    });
+
+    function mockMenu(): Menu {
+      return new Menu(null, null, null, null, null, null, null);
+    }
+
+  });
+}

src/components/menu/test/multiple/index.ts

@@ -0,0 +1,35 @@
+import {App, Page, MenuController} from '../../../../../ionic';
+
+
+@Page({
+  templateUrl: 'page1.html'
+})
+class Page1 {
+  activeMenu: string;
+
+  constructor(private menu: MenuController) {
+    this.menu1Active();
+  }
+  menu1Active() {
+    this.activeMenu = 'menu1';
+    this.menu.enable(true, 'menu1');
+    this.menu.enable(false, 'menu2');
+  }
+  menu2Active() {
+    this.activeMenu = 'menu2';
+    this.menu.enable(false, 'menu1');
+    this.menu.enable(true, 'menu2');
+  }
+}
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  rootPage;
+
+  constructor() {
+    this.rootPage = Page1;
+  }
+}

src/components/menu/test/multiple/main.html

@@ -0,0 +1,36 @@
+
+<ion-menu [content]="content" id="menu1">
+
+  <ion-toolbar secondary>
+    <ion-title>Menu 1</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+    <ion-list>
+      <button ion-item menuClose="menu1" detail-none>
+        Close Menu 1
+      </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 [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

src/components/menu/test/multiple/page1.html

@@ -0,0 +1,30 @@
+
+<ion-navbar *navbar>
+  <button menuToggle>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+  <ion-title>
+    Multiple Menus
+  </ion-title>
+</ion-navbar>
+
+
+<ion-content padding>
+
+  <h4>Active Menu: {{ activeMenu }}</h4>
+
+  <p>
+    <button secondary (click)="menu1Active()">Make Menu 1 Active</button>
+  </p>
+
+  <p>
+    <button danger (click)="menu2Active()">Make Menu 2 Active</button>
+  </p>
+
+  <p>
+    <button [menuToggle]="activeMenu">Toggle Menu</button>
+  </p>
+
+  <p>This page has two left menus, but only one is active at a time.</p>
+
+</ion-content>

src/components/menu/test/overlay/index.ts

@@ -0,0 +1,27 @@
+import {App, IonicApp, Page} from '../../../../../ionic';
+
+
+@Page({templateUrl: 'page1.html'})
+class Page1 {}
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+
+  constructor(app: IonicApp) {
+    this.app = app;
+    this.rootView = Page1;
+  }
+
+  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');
+    nav.setRoot(page.component);
+  }
+}

src/components/menu/test/overlay/main.html

@@ -0,0 +1,40 @@
+<ion-menu [content]="content" id="myMenuId" type="overlay" side="left">
+
+  <ion-toolbar secondary>
+    <ion-title>Left Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list>
+
+      <button ion-item menuToggle="myMenuId" detail-none>
+        Close Left Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+<ion-menu [content]="content" id="myMenuId2" type="overlay" side="right">
+
+  <ion-toolbar danger>
+    <ion-title>Right Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list>
+
+      <button ion-item menuToggle="myMenuId2" detail-none>
+        Close Right Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+
+<ion-nav id="nav" [root]="rootView" #content swipeBackEnabled="false"></ion-nav>

src/components/menu/test/overlay/page1.html

@@ -0,0 +1,31 @@
+
+<ion-navbar *navbar>
+
+  <button menuToggle="myMenuId">
+    <ion-icon name="menu"></ion-icon>
+  </button>
+
+  <ion-title>
+    Overlay Menu
+  </ion-title>
+
+  <button menuToggle="myMenuId2" end>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+
+</ion-navbar>
+
+
+<ion-content #content padding>
+
+  <p>
+    <button menuToggle="myMenuId">Toggle Left Overlay Menu</button>
+  </p>
+
+  <p>
+    <button menuToggle="myMenuId2">Toggle Right Overlay Menu</button>
+  </p>
+
+  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+
+</ion-content>

src/components/menu/test/push/index.ts

@@ -0,0 +1,27 @@
+import {App, IonicApp, Page} from '../../../../../ionic';
+
+
+@Page({templateUrl: 'page1.html'})
+class Page1 {}
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+
+  constructor(app: IonicApp) {
+    this.app = app;
+    this.rootView = Page1;
+  }
+
+  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');
+    nav.setRoot(page.component);
+  }
+}

src/components/menu/test/push/main.html

@@ -0,0 +1,40 @@
+<ion-menu [content]="content" type="push" side="left">
+
+  <ion-toolbar secondary>
+    <ion-title>Left Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list>
+
+      <button ion-item menuToggle="left" detail-none>
+        Close Left Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+<ion-menu [content]="content" type="push" side="right">
+
+  <ion-toolbar danger>
+    <ion-title>Right Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list>
+
+      <button ion-item menuToggle="right" detail-none>
+        Close Right Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+
+<ion-nav id="nav" [root]="rootView" #content swipeBackEnabled="false"></ion-nav>

src/components/menu/test/push/page1.html

@@ -0,0 +1,31 @@
+
+<ion-navbar *navbar>
+
+  <button menuToggle="left">
+    <ion-icon name="menu"></ion-icon>
+  </button>
+
+  <ion-title>
+    Push Menu
+  </ion-title>
+
+  <button menuToggle="right" end>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+
+</ion-navbar>
+
+
+<ion-content #content padding>
+
+  <p>
+    <button menuToggle="left">Toggle Left Push Menu</button>
+  </p>
+
+  <p>
+    <button menuToggle="right">Toggle Right Push Menu</button>
+  </p>
+
+  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+
+</ion-content>

src/components/menu/test/reveal/index.ts

@@ -0,0 +1,27 @@
+import {App, IonicApp, Page} from '../../../../../ionic';
+
+
+@Page({templateUrl: 'page1.html'})
+class Page1 {}
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+
+  constructor(app: IonicApp) {
+    this.app = app;
+    this.rootView = Page1;
+  }
+
+  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');
+    nav.setRoot(page.component);
+  }
+}

src/components/menu/test/reveal/main.html

@@ -0,0 +1,39 @@
+<ion-menu [content]="content" type="reveal">
+
+  <ion-toolbar secondary>
+    <ion-title>Left Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list>
+
+      <button ion-item menuToggle detail-none>
+        Close Left Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+<ion-menu [content]="content" type="reveal" side="right">
+
+  <ion-toolbar danger>
+    <ion-title>Right Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list>
+
+      <button ion-item menuToggle="right" detail-none>
+        Close Right Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+<ion-nav id="nav" [root]="rootView" #content swipeBackEnabled="false"></ion-nav>

src/components/menu/test/reveal/page1.html

@@ -0,0 +1,31 @@
+
+<ion-navbar *navbar>
+
+  <button menuToggle>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+
+  <ion-title>
+    Reveal Menu
+  </ion-title>
+
+  <button menuToggle="right" end>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+
+</ion-navbar>
+
+
+<ion-content #content padding>
+
+  <p>
+    <button menuToggle>Toggle Left Reveal Menu</button>
+  </p>
+
+  <p>
+    <button menuToggle="right">Toggle Right Reveal Menu</button>
+  </p>
+
+  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+
+</ion-content>