feat(menu): enable/disable side menus

ionic/components/menu/menu-toggle.ts

@@ -16,7 +16,8 @@ import {Navbar} from '../nav-bar/nav-bar';
   ],
   host: {
     '(click)': 'toggle()',
-    '[hidden]': 'isHidden'
+    '[hidden]': 'isHidden',
+    'menu-toggle': '' //ensures the attr is there for css when using [menu-toggle]
   }
 })
 export class MenuToggle extends Ion {

ionic/components/menu/menu.ts

@@ -79,6 +79,7 @@ export class Menu extends Ion {
     this.opening = new EventEmitter('opening');
     this.isOpen = false;
     this._disableTime = 0;
+    this.isEnabled = true;
   }
 
   /**
@@ -107,9 +108,11 @@ export class Menu extends Ion {
 
     let self = this;
     this.onContentClick = function(ev) {
-      ev.preventDefault();
+      if (self.isEnabled) {
-      ev.stopPropagation();
+        ev.preventDefault();
-      self.close();
+        ev.stopPropagation();
+        self.close();
+      }
     };
   }
 
@@ -253,6 +256,23 @@ export class Menu extends Ion {
     return this.setOpen(!this.isOpen);
   }
 
+  enabled(isEnabled) {
+    if (!this.isEnabled && isEnabled && !this._gesture) {
+      // was previously disabled, and is being enabled again
+      // re-add the gestures
+      this._initGesture();
+
+    } else if (this.isEnabled && !isEnabled) {
+      // is currently enabled, and is being disabled
+      // remove the gestures
+      this._gesture && this._gesture.destroy();
+      this._targetGesture && this._targetGesture.destroy();
+      this._gesture = this._targetGesture = null;
+    }
+
+    this.isEnabled = isEnabled;
+  }
+
   /**
    * TODO
    * @return {Element} The Menu element.

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

@@ -0,0 +1,33 @@
+import {App, IonicApp, Page, NavController} from 'ionic/ionic';
+
+
+@Page({
+  templateUrl: 'page1.html'
+})
+class Page1 {
+  constructor(app: IonicApp) {
+    this.app = app;
+    this.menu1Active();
+  }
+  menu1Active() {
+    this.activeMenu = 'menu1';
+    this.app.getComponent('menu1').enabled(true);
+    this.app.getComponent('menu2').enabled(false);
+  }
+  menu2Active() {
+    this.activeMenu = 'menu2';
+    this.app.getComponent('menu1').enabled(false);
+    this.app.getComponent('menu2').enabled(true);
+  }
+}
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor(app: IonicApp) {
+    this.app = app;
+    this.rootPage = Page1;
+  }
+}

ionic/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 menu-close="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 menu-close="menu2" detail-none>
+        Close Menu 2
+      </button>
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+
+<ion-nav [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

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

@@ -0,0 +1,30 @@
+
+<ion-navbar *navbar>
+  <a [menu-toggle]="activeMenu">
+    <icon menu></icon>
+  </a>
+  <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 [menu-toggle]="activeMenu">Toggle Menu</button>
+  </p>
+
+  <p>This page has two left menus, but only one is active at a time.</p>
+
+</ion-content>