feat(menu): push type. Fixes #380

ionic/components/menu/menu-types.scss

@@ -12,6 +12,9 @@ ion-menu[type=reveal].show-menu {
   box-shadow: $menu-shadow;
 }
 
+.menu-content-push {
+  box-shadow: $menu-shadow;
+}
 
 
 // Menu Overlay
@@ -40,3 +43,7 @@ ion-menu[type=overlay] {
 ion-menu[type=overlay][side=right] {
   left: 8px;
 }
+
+ion-menu[type=push][side=right] {
+  left: 0px;
+}

ionic/components/menu/menu-types.ts

@@ -104,6 +104,54 @@ class MenuRevealType extends MenuType {
 }
 Menu.register('reveal', MenuRevealType);
 
+/**
+ * Menu Push Type
+ * The content slides over to reveal the menu underneath.
+ * The menu itself also slides over to reveal its bad self.
+ */
+class MenuPushType extends MenuType {
+  constructor(menu) {
+    super();
+
+    let easing = 'ease';
+    let duration = 250;
+
+    let contentClosedX, contentOpenedX, menuClosedX, menuOpenedX;
+
+    if (menu.side == 'right') {
+      contentOpenedX = -menu.width() + 'px';
+      contentClosedX =  '0px';
+      menuOpenedX = (menu.platform.width() - menu.width()) + 'px';
+      menuClosedX = menu.platform.width() + 'px';
+    } else {
+      contentOpenedX = menu.width() + 'px';
+      contentClosedX =  '0px';
+      menuOpenedX = '0px';
+      menuClosedX = -menu.width() + 'px';
+    }
+    // left side
+
+    this.open.easing(easing).duration(duration);
+    this.close.easing(easing).duration(duration);
+
+    let menuOpen = new Animation(menu.getMenuElement());
+    menuOpen.fromTo(TRANSLATE_X, menuClosedX, menuOpenedX);
+    this.open.add(menuOpen);
+
+    let contentOpen = new Animation(menu.getContentElement());
+    contentOpen.fromTo(TRANSLATE_X, contentClosedX, contentOpenedX);
+    this.open.add(contentOpen);
+
+    let menuClose = new Animation(menu.getMenuElement());
+    menuClose.fromTo(TRANSLATE_X, menuOpenedX, menuClosedX);
+    this.close.add(menuClose);
+
+    let contentClose = new Animation(menu.getContentElement());
+    contentClose.fromTo(TRANSLATE_X, contentOpenedX, contentClosedX);
+    this.close.add(contentClose);
+  }
+}
+Menu.register('push', MenuPushType);
 
 /**
  * Menu Overlay Type

ionic/components/menu/menu.scss

@@ -56,4 +56,3 @@ ion-menu backdrop {
   }
 
 }
-

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

@@ -1,4 +1,4 @@
-<ion-menu [content]="content" id="leftMenu">
+<ion-menu [content]="content" id="leftMenu" side="left">
 
   <ion-toolbar secondary>
     <ion-title>Left Menu</ion-title>

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

@@ -0,0 +1,27 @@
+import {App, IonicApp, Page} from 'ionic/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);
+  }
+}

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

@@ -0,0 +1,41 @@
+<ion-menu [content]="content" id="leftMenu" type="push" side="left">
+
+  <ion-toolbar secondary>
+    <ion-title>Left Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list>
+
+      <button ion-item menu-toggle="leftMenu" detail-none>
+        Close Left Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+
+<!-- <ion-menu [content]="content" id="rightMenu" type="reveal" side="right">
+
+  <ion-toolbar secondary>
+    <ion-title>Right Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list>
+
+      <button ion-item menu-toggle="rightMenu">
+        Close Right Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-menu> -->
+
+
+<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

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

@@ -0,0 +1,29 @@
+
+<ion-navbar *navbar>
+
+  <a menu-toggle="leftMenu">
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    Push Menu
+  </ion-title>
+
+</ion-navbar>
+
+
+<ion-content #content padding>
+
+  <h3>Content</h3>
+
+  <p>
+    <button menu-toggle="leftMenu">Toggle Left Menu</button>
+  </p>
+
+  <p>
+    <button menu-toggle="rightMenu">Toggle Right Menu</button>
+  </p>
+
+  <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+
+</ion-content>