rename aside to menu

demos/aside/index.ts

@@ -24,9 +24,9 @@ class E2EApp {
     ];
   }
 
-  openPage(aside, page) {
+  openPage(menu, page) {
-    // close the menu when clicking a link from the aside
+    // close the menu when clicking a link from the menu
-    aside.close();
+    menu.close();
 
     // Reset the content nav to have just this page
     // we wouldn't want the back button to show in this scenario

demos/aside/main.html

@@ -1,4 +1,4 @@
-<ion-aside #aside [content]="content" id="menu">
+<ion-menu #menu [content]="content" id="menu">
 
   <ion-toolbar secondary>
     <ion-title>Left Menu</ion-title>
@@ -8,18 +8,18 @@
 
     <ion-list>
 
-      <button ion-item *ng-for="#p of pages" (click)="openPage(aside, p)">
+      <button ion-item *ng-for="#p of pages" (click)="openPage(menu, p)">
         {{p.title}}
       </button>
 
-      <button ion-item aside-toggle="menu" id="e2eCloseMenu">
+      <button ion-item menu-toggle="menu" id="e2eCloseMenu">
         Close Menu
       </button>
 
     </ion-list>
   </ion-content>
 
-</ion-aside>
+</ion-menu>
 
 
 <ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

demos/aside/page1.html

@@ -1,12 +1,12 @@
 
 <ion-navbar *navbar>
 
-  <button aside-toggle id="e2eHeaderToggleAside">
+  <button menu-toggle id="e2eHeaderToggleMenu">
     <icon menu></icon>
   </button>
 
   <ion-title>
-    Aside
+    Menu
   </ion-title>
 
 </ion-navbar>
@@ -17,7 +17,7 @@
   <h3>Page 1</h3>
 
   <p>
-    <button id="e2eContentToggleAside" aside-toggle>Toggle Aside</button>
+    <button id="e2eContentToggleMenu" menu-toggle>Toggle Menu</button>
   </p>
 
     <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

demos/aside/page2.html

@@ -1,12 +1,12 @@
 
 <ion-navbar *navbar>
 
-  <button aside-toggle id="e2eHeaderToggleAside">
+  <button menu-toggle id="e2eHeaderToggleMenu">
     <icon menu></icon>
   </button>
 
   <ion-title>
-    Aside
+    Menu
   </ion-title>
 
 </ion-navbar>
@@ -16,7 +16,7 @@
   <h3>Page 2</h3>
 
   <p>
-    <button aside-toggle id="e2eContentToggleAside">Toggle Aside</button>
+    <button menu-toggle id="e2eContentToggleMenu">Toggle Menu</button>
   </p>
 
 </ion-content>

demos/material/index.ts

@@ -5,7 +5,7 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
 @IonicView({
   template: '<ion-navbar *navbar primary>' +
     '<ion-title>Heading</ion-title>' +
-    '<button aside-toggle="menu">' +
+    '<button menu-toggle="menu">' +
       '<icon menu></icon>' +
     '</button>' +
     '<ion-nav-items secondary>' +
@@ -81,14 +81,14 @@ export class FirstPage {
 
 @App({
   template: `<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,500' rel='stylesheet' type='text/css'>
-    <ion-aside id="menu" side="left" [content]="content">
+    <ion-menu id="menu" side="left" [content]="content">
       <ion-toolbar primary><ion-title>Menu</ion-title></ion-toolbar>
       <ion-list>
         <ion-item>Your Profile</ion-item>
         <ion-item>Playlists</ion-item>
         <ion-item>Artists</ion-item>
       </ion-list>
-    </ion-aside>
+    </ion-menu>
     <ion-nav #content></ion-nav>`,
   routes: [
     {

demos/music/main.html

@@ -1,6 +1,6 @@
 <ion-view>
 
-  <ion-aside id="menu" side="left" [content]="content" (opening)="onMenuOpening($event, amt)">
+  <ion-menu id="menu" side="left" [content]="content" (opening)="onMenuOpening($event, amt)">
     <ion-list inset [parallax]="menuOpenAmount">
       <ion-item>
         Search
@@ -21,7 +21,7 @@
         Settings
       </ion-item>
     </ion-list>
-  </ion-aside>
+  </ion-menu>
 
   <ion-nav #content [root]="rootView"></ion-nav>
 

demos/native/main.html

@@ -1,12 +1,12 @@
-<ion-aside #aside [content]="content" id="mainMenu">
+<ion-menu #menu [content]="content" id="mainMenu">
   <ion-toolbar><ion-title>Plugins</ion-title></ion-toolbar>
   <ion-content>
     <ion-list>
-      <ion-item *ng-for="#p of plugins" (click)="openPage(aside, p)">
+      <ion-item *ng-for="#p of plugins" (click)="openPage(menu, p)">
         <span>{{p.title}}</span>
       </ion-item>
     </ion-list>
   </ion-content>
-</ion-aside>
+</ion-menu>
 
 <ion-nav #content swipe-back-enabled="false" [root]="firstPage"></ion-nav>

demos/native/pages/battery.ts

@@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button aside-toggle>
+    <button menu-toggle>
       <icon menu></icon>
     </button>
     <ion-title>Battery</ion-title>

demos/native/pages/camera.ts

@@ -5,7 +5,7 @@ import {Camera} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button aside-toggle>
+    <button menu-toggle>
       <icon menu></icon>
     </button>
     <ion-title>Camera</ion-title>
@@ -18,7 +18,7 @@ import {Camera} from 'ionic/ionic';
 })
 export class CameraPage {
   constructor() {
-    
+
   }
   getPicture() {
     Camera.getPicture({

demos/native/pages/contacts.ts

@@ -5,7 +5,7 @@ import {Contacts} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button aside-toggle>
+    <button menu-toggle>
       <icon menu></icon>
     </button>
     <ion-title>Contacts</ion-title>

demos/native/pages/device-motion.ts

@@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button aside-toggle>
+    <button menu-toggle>
       <icon menu></icon>
     </button>
     <ion-title>Device Motion</ion-title>

demos/native/pages/device.ts

@@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button aside-toggle>
+    <button menu-toggle>
       <icon menu></icon>
     </button>
     <ion-title>Vibration</ion-title>

demos/native/pages/geolocation.ts

@@ -5,7 +5,7 @@ import {Geolocation} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button aside-toggle>
+    <button menu-toggle>
       <icon menu></icon>
     </button>
     <ion-title>Vibration</ion-title>

demos/native/pages/vibration.ts

@@ -5,7 +5,7 @@ import {Vibration} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button aside-toggle>
+    <button menu-toggle>
       <icon menu></icon>
     </button>
     <ion-title>Vibration</ion-title>

demos/sink/index.ts

@@ -12,7 +12,7 @@ import {SearchBarPage} from './pages/search-bar'
 import {TableSearchPage} from './pages/table-search'
 import {IconsPage} from './pages/ionicons'
 import {TabsPage} from './pages/tabs'
-import {AsidePage} from './pages/aside'
+import {MenuPage} from './pages/menu'
 import {AnimationPage} from './pages/animation'
 import {SlidePage} from './pages/slides'
 import {ActionMenuPage} from './pages/action-menu'
@@ -57,8 +57,8 @@ import {ModalPage} from './pages/modal'
       path: '/icons',
       component: IconsPage
     }, {
-      path: '/aside',
+      path: '/menu',
-      component: AsidePage
+      component: MenuPage
     }, {
       path: '/animation',
       component: AnimationPage
@@ -89,15 +89,15 @@ class MyApp {
       { title: 'Search Bar', component: SearchBarPage },
       { title: 'Table Search', component: TableSearchPage },
       { title: 'Icons', component: IconsPage },
-      { title: 'Aside', component: AsidePage },
+      { title: 'Menu', component: MenuPage },
       { title: 'Animation', component: AnimationPage },
       { title: 'Slides', component: SlidePage},
       { title: 'Action Menu', component: ActionMenuPage },
     ];
   }
 
-  openPage(aside, component) {
+  openPage(menu, component) {
-    aside.close();
+    menu.close();
 
     let nav = this.app.getComponent('myNav');
     nav.setItems([component.component]);

demos/sink/main.html

@@ -1,13 +1,13 @@
-<ion-aside #aside [content]="content" id="mainMenu">
+<ion-menu #menu [content]="content" id="mainMenu">
   <ion-toolbar><ion-title>Ionic 2.0</ion-title></ion-toolbar>
   <ion-content>
     <ion-list>
-      <ion-item *ng-for="#c of components" (click)="openPage(aside, c)">
+      <ion-item *ng-for="#c of components" (click)="openPage(menu, c)">
         <span>{{c.title}}</span>
       </ion-item>
     </ion-list>
   </ion-content>
-</ion-aside>
+</ion-menu>
 
 <ion-nav #content swipe-back-enabled="false"></ion-nav>
 

demos/sink/pages/aside.ts

@@ -5,13 +5,12 @@ import {SinkPage} from '../sink-page';
 
 @IonicView({
   template: `
-  <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Aside</ion-title></ion-navbar>
+  <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Menu</ion-title></ion-navbar>
 
   <ion-content class="padding">
-    <h2>Aside</h2>
+    <h2>Menu</h2>
     <p>
-      Asides, also known as side menus or "hamburger" menus (mmmmm), are menus that slide
+      Menus slide or swipe in to show more information.
-      or swipe in to show menus or information.
     </p>
     <p>
       Try it! Just swipe from the left edge of the screen to the right to expose
@@ -26,7 +25,7 @@ import {SinkPage} from '../sink-page';
   </ion-content>
   `
 })
-export class AsidePage extends SinkPage {
+export class MenuPage extends SinkPage {
   constructor(app: IonicApp) {
     super(app);
   }

demos/sink/sink-page.ts

@@ -6,7 +6,7 @@ export class SinkPage {
     this.app = app;
   }
   toggleMenu() {
-    let aside = this.app.getComponent('mainMenu');
+    let menu = this.app.getComponent('mainMenu');
-    aside.toggle();
+    menu.toggle();
   }
 }

ionic/components.ts

@@ -2,17 +2,17 @@
 export * from 'ionic/components/app/app'
 export * from 'ionic/components/app/id'
 export * from 'ionic/components/action-menu/action-menu'
-export * from 'ionic/components/aside/aside'
-export * from 'ionic/components/aside/extensions/types'
-export * from 'ionic/components/aside/aside-toggle'
 export * from 'ionic/components/button/button'
 export * from 'ionic/components/card/card'
 export * from 'ionic/components/checkbox/checkbox'
 export * from 'ionic/components/content/content'
+export * from 'ionic/components/form/input'
 export * from 'ionic/components/icon/icon'
 export * from 'ionic/components/item/item'
 export * from 'ionic/components/item/item-group'
-export * from 'ionic/components/form/input'
+export * from 'ionic/components/menu/menu'
+export * from 'ionic/components/menu/extensions/types'
+export * from 'ionic/components/menu/menu-toggle'
 export * from 'ionic/components/text-input/text-input'
 export * from 'ionic/components/text-input/label'
 export * from 'ionic/components/list/list'

ionic/components/app/structure.scss

@@ -3,8 +3,8 @@
 // --------------------------------------------------
 // Grouped by elements which would be siblings
 
-$z-index-aside-overlay:          80 !default;
+$z-index-menu-overlay:          80 !default;
-$z-index-aside-backdrop:         79 !default;
+$z-index-menu-backdrop:         79 !default;
 $z-index-overlay:                1000 !default;
 $z-index-click-block:            9999 !default;
 

ionic/components/aside/aside.scss

@@ -1,57 +0,0 @@
-
-// Aside
-// --------------------------------------------------
-
-$aside-width:                 304px !default;
-$aside-small-width:           $aside-width - 40px !default;
-
-$aside-background:            $background-color !default;
-$aside-shadow:                0px 0px 10px rgba(0, 0, 0, 0.25) !default;
-
-
-ion-aside {
-  position: absolute;
-  top: 0;
-  right: auto;
-  bottom: 0;
-  left: 0;
-
-  width: $aside-width;
-
-  display: flex;
-  flex-direction: column;
-
-  background: $aside-background;
-}
-
-ion-aside[side=right] {
-  right: 0;
-  left: auto;
-}
-
-ion-aside backdrop {
-  z-index: -1;
-  display: none;
-}
-
-.aside-content {
-  transform: translate3d(0px, 0px, 0px);
-}
-
-.aside-content-open ion-pane,
-.aside-content-open ion-content,
-.aside-content-open .toolbar {
-  // the containing element itself should be clickable but
-  // everything inside of it should not clickable when aside is open
-  pointer-events: none;
-}
-
-
-@media (max-width: 340px) {
-
-  ion-aside {
-    width: $aside-small-width;
-  }
-
-}
-

ionic/components/aside/extensions/gestures.ts

@@ -1,100 +0,0 @@
-import {Aside} from '../aside';
-import {SlideEdgeGesture} from 'ionic/gestures/slide-edge-gesture';
-
-
-class AsideGenericGestureHandler extends SlideEdgeGesture {
-  constructor(aside: Aside, targetElement, threshold) {
-    super(targetElement, {
-      direction: (aside.side === 'left' || aside.side === 'right') ? 'x' : 'y',
-      edge: aside.side,
-      threshold: threshold
-    });
-
-    this.aside = aside;
-    this.listen();
-  }
-
-  // Set CSS, then wait one frame for it to apply before sliding starts
-  onSlideBeforeStart(slide, ev) {
-    this.aside.setProgressStart();
-  }
-
-  onSlide(slide, ev) {
-    this.aside.setProgess(slide.distance / slide.max);
-  }
-
-  onSlideEnd(slide, ev) {
-    let shouldComplete = (Math.abs(ev.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5);
-    this.aside.setProgressFinish(shouldComplete);
-  }
-
-  getElementStartPos(slide, ev) {
-    return this.aside.isOpen ? slide.max : slide.min;
-  }
-
-  getSlideBoundaries() {
-    return {
-      min: 0,
-      max: this.aside.width()
-    };
-  }
-}
-
-
-export class AsideContentGesture extends AsideGenericGestureHandler {
-  constructor(aside: Aside) {
-    super(aside, aside.getContentElement(), 75);
-  }
-  canStart(ev) {
-    return this.aside.isOpen ? true : super.canStart(ev);
-  }
-}
-
-export class LeftAsideGesture extends AsideContentGesture {
-  constructor(aside: Aside) {
-    super(aside);
-  }
-}
-
-export class RightAsideGesture extends LeftAsideGesture {
-  constructor(aside: Aside) {
-    super(aside);
-  }
-  getElementStartPos(slide, ev) {
-    return this.aside.isOpen ? slide.min : slide.max;
-  }
-  getSlideBoundaries() {
-    return {
-      min: -this.aside.width(),
-      max: 0
-    };
-  }
-
-}
-
-/*
- Not supported right now
-export class TopAsideGesture extends AsideGesture {
-  onSlide(slide, ev) {
-    this.aside.setTransform(slide.distance);
-  }
-  getSlideBoundaries() {
-    return {
-      min: 0,
-      max: this.aside.height()
-    };
-  }
-}
-
-export class BottomAsideGesture extends TopAsideGesture {
-  getElementStartPos(slide, ev) {
-    return this.aside.isOpen ? slide.min : slide.max;
-  }
-  getSlideBoundaries() {
-    return {
-      min: -this.aside.height(),
-      max: 0
-    };
-  }
-}
-*/

ionic/components/aside/test/basic/e2e.ts

@@ -1,9 +0,0 @@
-
-it('should toggle open aside', function() {
-  element(by.css('#e2eContentToggleAside')).click();
-});
-
-
-it('should close aside', function() {
-  element(by.css('#e2eCloseMenu')).click();
-});

ionic/components/menu/extensions/gestures.ts

@@ -0,0 +1,73 @@
+import {Menu} from '../menu';
+import {SlideEdgeGesture} from 'ionic/gestures/slide-edge-gesture';
+
+
+class MenuGenericGestureHandler extends SlideEdgeGesture {
+  constructor(menu: Menu, targetElement, threshold) {
+    super(targetElement, {
+      direction: (menu.side === 'left' || menu.side === 'right') ? 'x' : 'y',
+      edge: menu.side,
+      threshold: threshold
+    });
+
+    this.menu = menu;
+    this.listen();
+  }
+
+  // Set CSS, then wait one frame for it to apply before sliding starts
+  onSlideBeforeStart(slide, ev) {
+    this.menu.setProgressStart();
+  }
+
+  onSlide(slide, ev) {
+    this.menu.setProgess(slide.distance / slide.max);
+  }
+
+  onSlideEnd(slide, ev) {
+    let shouldComplete = (Math.abs(ev.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5);
+    this.menu.setProgressFinish(shouldComplete);
+  }
+
+  getElementStartPos(slide, ev) {
+    return this.menu.isOpen ? slide.max : slide.min;
+  }
+
+  getSlideBoundaries() {
+    return {
+      min: 0,
+      max: this.menu.width()
+    };
+  }
+}
+
+
+export class MenuContentGesture extends MenuGenericGestureHandler {
+  constructor(menu: Menu) {
+    super(menu, menu.getContentElement(), 75);
+  }
+  canStart(ev) {
+    return this.menu.isOpen ? true : super.canStart(ev);
+  }
+}
+
+export class LeftMenuGesture extends MenuContentGesture {
+  constructor(menu: Menu) {
+    super(menu);
+  }
+}
+
+export class RightMenuGesture extends LeftMenuGesture {
+  constructor(menu: Menu) {
+    super(menu);
+  }
+  getElementStartPos(slide, ev) {
+    return this.menu.isOpen ? slide.min : slide.max;
+  }
+  getSlideBoundaries() {
+    return {
+      min: -this.menu.width(),
+      max: 0
+    };
+  }
+
+}

ionic/components/menu/extensions/types.scss

@@ -1,31 +1,31 @@
 
-// Aside Reveal
+// Menu Reveal
 // --------------------------------------------------
-// The content slides over to reveal the aside underneath.
+// The content slides over to reveal the menu underneath.
-// The aside menu itself, which is under the content, does not move.
+// The menu itself, which is under the content, does not move.
 
-ion-aside[type=reveal] {
+ion-menu[type=reveal] {
   transform: translate3d(-9999px, 0px, 0px);
 
-  &.show-aside {
+  &.show-menu {
     transform: translate3d(0px, 0px, 0px);
   }
 }
 
-.aside-content-reveal {
+.menu-content-reveal {
-  box-shadow: $aside-shadow;
+  box-shadow: $menu-shadow;
 }
 
 
 
-// Aside Overlay
+// Menu Overlay
 // --------------------------------------------------
-// The aside menu slides over the content. The content
+// The menu slides over the content. The content
-// itself, which is under the aside, does not move.
+// itself, which is under the menu, does not move.
 
-ion-aside[type=overlay] {
+ion-menu[type=overlay] {
-  z-index: $z-index-aside-overlay;
+  z-index: $z-index-menu-overlay;
-  box-shadow: $aside-shadow;
+  box-shadow: $menu-shadow;
   transform: translate3d(-9999px, 0px, 0px);
 
   backdrop {

ionic/components/menu/extensions/types.ts

@@ -1,16 +1,16 @@
-import {Aside} from '../aside';
+import {Menu} from '../menu';
 import {Animation} from 'ionic/animations/animation';
 
 
 /**
- * Aside Type
+ * Menu Type
  * Base class which is extended by the various types. Each
  * type will provide their own animations for open and close
- * and registers itself with Aside.
+ * and registers itself with Menu.
  */
-export class AsideType {
+export class MenuType {
 
-  constructor(aside: Aside) {
+  constructor(menu: Menu) {
     this.open = new Animation();
     this.close = new Animation();
   }
@@ -76,70 +76,70 @@ export class AsideType {
 
 
 /**
- * Aside Reveal Type
+ * Menu Reveal Type
- * The content slides over to reveal the aside underneath.
+ * The content slides over to reveal the menu underneath.
- * The aside menu itself, which is under the content, does not move.
+ * The menu itself, which is under the content, does not move.
  */
-class AsideRevealType extends AsideType {
+class MenuRevealType extends MenuType {
-  constructor(aside) {
+  constructor(menu) {
     super();
 
     let easing = 'ease';
     let duration = 250;
 
-    let openedX = (aside.width() * (aside.side == 'right' ? -1 : 1)) + 'px';
+    let openedX = (menu.width() * (menu.side == 'right' ? -1 : 1)) + 'px';
 
     this.open.easing(easing).duration(duration);
     this.close.easing(easing).duration(duration);
 
-    let contentOpen = new Animation(aside.getContentElement());
+    let contentOpen = new Animation(menu.getContentElement());
     contentOpen.fromTo(TRANSLATE_X, CENTER, openedX);
     this.open.add(contentOpen);
 
-    let contentClose = new Animation(aside.getContentElement());
+    let contentClose = new Animation(menu.getContentElement());
     contentClose.fromTo(TRANSLATE_X, openedX, CENTER);
     this.close.add(contentClose);
   }
 }
-Aside.register('reveal', AsideRevealType);
+Menu.register('reveal', MenuRevealType);
 
 
 /**
- * Aside Overlay Type
+ * Menu Overlay Type
- * The aside menu slides over the content. The content
+ * The menu slides over the content. The content
- * itself, which is under the aside, does not move.
+ * itself, which is under the menu, does not move.
  */
-class AsideOverlayType extends AsideType {
+class MenuOverlayType extends MenuType {
-  constructor(aside) {
+  constructor(menu) {
     super();
 
     let easing = 'ease';
     let duration = 250;
     let backdropOpacity = 0.5;
 
-    let closedX = (aside.width() * (aside.side == 'right' ? 1 : -1)) + 'px';
+    let closedX = (menu.width() * (menu.side == 'right' ? 1 : -1)) + 'px';
 
     this.open.easing(easing).duration(duration);
     this.close.easing(easing).duration(duration);
 
-    let asideOpen = new Animation(aside.getAsideElement());
+    let menuOpen = new Animation(menu.getMenuElement());
-    asideOpen.fromTo(TRANSLATE_X, closedX, CENTER);
+    menuOpen.fromTo(TRANSLATE_X, closedX, CENTER);
-    this.open.add(asideOpen);
+    this.open.add(menuOpen);
 
-    let backdropOpen = new Animation(aside.getBackdropElement());
+    let backdropOpen = new Animation(menu.getBackdropElement());
     backdropOpen.fromTo(OPACITY, 0.01, backdropOpacity);
     this.open.add(backdropOpen);
 
-    let asideClose = new Animation(aside.getAsideElement());
+    let menuClose = new Animation(menu.getMenuElement());
-    asideClose.fromTo(TRANSLATE_X, CENTER, closedX);
+    menuClose.fromTo(TRANSLATE_X, CENTER, closedX);
-    this.close.add(asideClose);
+    this.close.add(menuClose);
 
-    let backdropClose = new Animation(aside.getBackdropElement());
+    let backdropClose = new Animation(menu.getBackdropElement());
     backdropClose.fromTo(OPACITY, backdropOpacity, 0.01);
     this.close.add(backdropClose);
   }
 }
-Aside.register('overlay', AsideOverlayType);
+Menu.register('overlay', MenuOverlayType);
 
 
 const OPACITY = 'opacity';

ionic/components/menu/menu-toggle.ts

@@ -6,30 +6,30 @@ import {IonicApp} from '../app/app';
 * TODO
 */
 @Directive({
-  selector: '[aside-toggle]',
+  selector: '[menu-toggle]',
   properties: [
-    'asideToggle'
+    'menuToggle'
   ],
   host: {
     '(click)': 'toggle($event)'
   }
 })
-export class AsideToggle {
+export class MenuToggle {
 
   constructor(private app: IonicApp) {}
 
   onInit() {
-    let toggleTarget = this.asideToggle;
-
     // Get the component with this toggleTarget tag, or use "menu" if none
-    this.aside = this.app.getComponent(toggleTarget || 'menu');
+    this.menu = this.app.getComponent(this.menuToggle || 'menu');
   }
 
   /**
   * TODO
   * @param {TODO} event  TODO
   */
-  toggle(event) {
+  toggle(ev) {
-    this.aside && this.aside.toggle();
+    this.menu && this.menu.toggle();
+    ev.preventDefault();
+    ev.stopPropagation();
   }
 }

ionic/components/menu/menu.scss

@@ -0,0 +1,57 @@
+
+// Menu
+// --------------------------------------------------
+
+$menu-width:                 304px !default;
+$menu-small-width:           $menu-width - 40px !default;
+
+$menu-background:            $background-color !default;
+$menu-shadow:                0px 0px 10px rgba(0, 0, 0, 0.25) !default;
+
+
+ion-menu {
+  position: absolute;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  left: 0;
+
+  width: $menu-width;
+
+  display: flex;
+  flex-direction: column;
+
+  background: $menu-background;
+}
+
+ion-menu[side=right] {
+  right: 0;
+  left: auto;
+}
+
+ion-menu backdrop {
+  z-index: -1;
+  display: none;
+}
+
+.menu-content {
+  transform: translate3d(0px, 0px, 0px);
+}
+
+.menu-content-open ion-pane,
+.menu-content-open ion-content,
+.menu-content-open .toolbar {
+  // the containing element itself should be clickable but
+  // everything inside of it should not clickable when menu is open
+  pointer-events: none;
+}
+
+
+@media (max-width: 340px) {
+
+  ion-menu {
+    width: $menu-small-width;
+  }
+
+}
+

ionic/components/menu/menu.ts

@@ -8,12 +8,13 @@ import * as gestures from  './extensions/gestures';
 
 
 /**
- * Aside is a side-menu navigation that can be dragged out or toggled to show. Aside supports two
+ * Menu is a side-menu navigation that can be dragged out or toggled to show.
- * display styles currently: overlay, and reveal. Overlay is the tradtional Android drawer style, and Reveal
+ * Menu supports two display styles currently: overlay, and reveal. Overlay
- * is the traditional iOS style. By default, Aside will adjust to the correct style for the platform.
+ * is the tradtional Android drawer style, and Reveal is the traditional iOS
+ * style. By default, Menu will adjust to the correct style for the platform.
  */
 @IonicComponent({
-  selector: 'ion-aside',
+  selector: 'ion-menu',
   properties: [
     'content',
     'dragThreshold',
@@ -30,9 +31,9 @@ import * as gestures from  './extensions/gestures';
 })
 @View({
   template: '<ng-content></ng-content><backdrop tappable></backdrop>',
-  directives: [forwardRef(() => AsideBackdrop)]
+  directives: [forwardRef(() => MenuBackdrop)]
 })
-export class Aside extends Ion {
+export class Menu extends Ion {
 
   constructor(app: IonicApp, elementRef: ElementRef, config: IonicConfig) {
     super(elementRef, config);
@@ -48,7 +49,7 @@ export class Aside extends Ion {
     this.contentElement = (this.content instanceof Node) ? this.content : this.content.getNativeElement();
 
     if (!this.contentElement) {
-      return console.error('Aside: must have a [content] element to listen for drag events on. Example:\n\n<ion-aside [content]="content"></ion-aside>\n\n<ion-content #content></ion-content>');
+      return console.error('Menu: must have a [content] element to listen for drag events on. Example:\n\n<ion-menu [content]="content"></ion-menu>\n\n<ion-content #content></ion-content>');
     }
 
     if (!this.id) {
@@ -59,8 +60,8 @@ export class Aside extends Ion {
     this._initGesture();
     this._initType(this.type);
 
-    this.contentElement.classList.add('aside-content');
+    this.contentElement.classList.add('menu-content');
-    this.contentElement.classList.add('aside-content-' + this.type);
+    this.contentElement.classList.add('menu-content-' + this.type);
 
     let self = this;
     this.onContentClick = function(ev) {
@@ -73,37 +74,37 @@ export class Aside extends Ion {
   _initGesture() {
     switch(this.side) {
       case 'right':
-        this._gesture = new gestures.RightAsideGesture(this);
+        this._gesture = new gestures.RightMenuGesture(this);
         break;
 
       case 'left':
-        this._gesture = new gestures.LeftAsideGesture(this);
+        this._gesture = new gestures.LeftMenuGesture(this);
         break;
     }
   }
 
   _initType(type) {
-    type = type && type.trim().toLowerCase() || FALLBACK_ASIDE_TYPE;
+    type = type && type.trim().toLowerCase() || FALLBACK_MENU_TYPE;
 
-    let asideTypeCls = asideTypes[type];
+    let menuTypeCls = menuTypes[type];
 
-    if (!asideTypeCls) {
+    if (!menuTypeCls) {
-      type = FALLBACK_ASIDE_TYPE;
+      type = FALLBACK_MENU_TYPE;
-      asideTypeCls = asideTypes[type];
+      menuTypeCls = menuTypes[type];
     }
 
-    this._type = new asideTypeCls(this);
+    this._type = new menuTypeCls(this);
     this.type = type;
   }
 
   /**
-   * Sets the state of the Aside to open or not.
+   * Sets the state of the Menu to open or not.
-   * @param {boolean} isOpen  If the Aside is open or not.
+   * @param {boolean} isOpen  If the Menu is open or not.
    * @return {Promise} TODO
    */
   setOpen(shouldOpen) {
     // _isDisabled is used to prevent unwanted opening/closing after swiping open/close
-    // or swiping open the menu while pressing down on the aside-toggle button
+    // or swiping open the menu while pressing down on the menu-toggle button
     if (shouldOpen === this.isOpen || this._isDisabled()) {
       return Promise.resolve();
     }
@@ -116,7 +117,7 @@ export class Aside extends Ion {
   }
 
   setProgressStart() {
-    // user started swiping the aside open/close
+    // user started swiping the menu open/close
     if (this._isDisabled()) return;
 
     this._before();
@@ -139,9 +140,9 @@ export class Aside extends Ion {
   }
 
   _before() {
-    // this places the aside into the correct location before it animates in
+    // this places the menu into the correct location before it animates in
     // this css class doesn't actually kick off any animations
-    this.getNativeElement().classList.add('show-aside');
+    this.getNativeElement().classList.add('show-menu');
     this.getBackdropElement().classList.add('show-backdrop');
 
     this._disable();
@@ -152,14 +153,14 @@ export class Aside extends Ion {
     this._disable();
     this.isOpen = isOpen;
 
-    this.contentElement.classList[isOpen ? 'add' : 'remove']('aside-content-open');
+    this.contentElement.classList[isOpen ? 'add' : 'remove']('menu-content-open');
 
     this.contentElement.removeEventListener('click', this.onContentClick);
     if (isOpen) {
       this.contentElement.addEventListener('click', this.onContentClick);
 
     } else {
-      this.getNativeElement().classList.remove('show-aside');
+      this.getNativeElement().classList.remove('show-menu');
       this.getBackdropElement().classList.remove('show-backdrop');
     }
 
@@ -168,7 +169,7 @@ export class Aside extends Ion {
 
   _disable() {
     // used to prevent unwanted opening/closing after swiping open/close
-    // or swiping open the menu while pressing down on the aside-toggle
+    // or swiping open the menu while pressing down on the menu-toggle
     this._disableTime = Date.now();
   }
 
@@ -202,15 +203,15 @@ export class Aside extends Ion {
 
   /**
    * TODO
-   * @return {Element} The Aside element.
+   * @return {Element} The Menu element.
    */
-  getAsideElement() {
+  getMenuElement() {
     return this.getNativeElement();
   }
 
   /**
    * TODO
-   * @return {Element} The Aside's associated content element.
+   * @return {Element} The Menu's associated content element.
    */
   getContentElement() {
     return this.contentElement;
@@ -218,14 +219,14 @@ export class Aside extends Ion {
 
   /**
    * TODO
-   * @return {Element} The Aside's associated content element.
+   * @return {Element} The Menu's backdrop element.
    */
   getBackdropElement() {
     return this.backdrop.elementRef.nativeElement;
   }
 
   static register(name, cls) {
-    asideTypes[name] = cls;
+    menuTypes[name] = cls;
   }
 
   onDestroy() {
@@ -236,8 +237,8 @@ export class Aside extends Ion {
 
 }
 
-let asideTypes = {};
+let menuTypes = {};
-const FALLBACK_ASIDE_TYPE = 'reveal';
+const FALLBACK_MENU_TYPE = 'reveal';
 
 
 /**
@@ -249,15 +250,15 @@ const FALLBACK_ASIDE_TYPE = 'reveal';
     '(click)': 'clicked($event)'
   }
 })
-class AsideBackdrop {
+class MenuBackdrop {
   /**
    * TODO
-   * @param {Aside} aside  TODO
+   * @param {Menu} menu  TODO
    */
-  constructor(@Host() aside: Aside, elementRef: ElementRef) {
+  constructor(@Host() menu: Menu, elementRef: ElementRef) {
-    this.aside = aside;
+    this.menu = menu;
     this.elementRef = elementRef;
-    aside.backdrop = this;
+    menu.backdrop = this;
   }
 
   /**
@@ -267,7 +268,7 @@ class AsideBackdrop {
   clicked(ev) {
     ev.preventDefault();
     ev.stopPropagation();
-    this.aside.close();
+    this.menu.close();
   }
 }
 

ionic/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('#e2eCloseMenu')).click();
+});

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

@@ -24,9 +24,9 @@ class E2EApp {
     ];
   }
 
-  openPage(aside, page) {
+  openPage(menu, page) {
-    // close the menu when clicking a link from the aside
+    // close the menu when clicking a link from the menu
-    aside.close();
+    menu.close();
 
     // Reset the content nav to have just this page
     // we wouldn't want the back button to show in this scenario

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

@@ -1,4 +1,4 @@
-<ion-aside #aside [content]="content" id="menu">
+<ion-menu #menu [content]="content" id="menu">
 
   <ion-toolbar secondary>
     <ion-title>Left Menu</ion-title>
@@ -8,18 +8,18 @@
 
     <ion-list>
 
-      <button ion-item *ng-for="#p of pages" (click)="openPage(aside, p)">
+      <button ion-item *ng-for="#p of pages" (click)="openPage(menu, p)">
         {{p.title}}
       </button>
 
-      <button ion-item aside-toggle="menu" id="e2eCloseMenu">
+      <button ion-item menu-toggle="menu" id="e2eCloseMenu">
         Close Menu
       </button>
 
     </ion-list>
   </ion-content>
 
-</ion-aside>
+</ion-menu>
 
 
 <ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

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

@@ -1,12 +1,12 @@
 
 <ion-navbar *navbar>
 
-  <button aside-toggle id="e2eHeaderToggleAside">
+  <button menu-toggle id="e2eHeaderToggleMenu">
     <icon menu></icon>
   </button>
 
   <ion-title>
-    Aside
+    Menu
   </ion-title>
 
 </ion-navbar>
@@ -17,7 +17,7 @@
   <h3>Page 1</h3>
 
   <p>
-    <button id="e2eContentToggleAside" aside-toggle>Toggle Aside</button>
+    <button id="e2eContentToggleMenu" menu-toggle>Toggle Menu</button>
   </p>
 
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

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

@@ -1,12 +1,12 @@
 
 <ion-navbar *navbar>
 
-  <button aside-toggle id="e2eHeaderToggleAside">
+  <button menu-toggle id="e2eHeaderToggleMenu">
     <icon menu></icon>
   </button>
 
   <ion-title>
-    Aside
+    Menu
   </ion-title>
 
 </ion-navbar>
@@ -16,7 +16,7 @@
   <h3>Page 2</h3>
 
   <p>
-    <button aside-toggle id="e2eContentToggleAside">Toggle Aside</button>
+    <button menu-toggle id="e2eContentToggleMenu">Toggle Menu</button>
   </p>
 
 </ion-content>

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

@@ -15,9 +15,9 @@ class E2EApp {
     this.rootView = Page1;
   }
 
-  openPage(aside, page) {
+  openPage(menu, page) {
-    // close the menu when clicking a link from the aside
+    // close the menu when clicking a link from the menu
-    aside.close();
+    menu.close();
 
     // Reset the content nav to have just this page
     // we wouldn't want the back button to show in this scenario

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

@@ -1,4 +1,4 @@
-<ion-aside [content]="content" id="leftMenu" type="reveal" side="left">
+<ion-menu [content]="content" id="leftMenu" type="overlay" side="left">
 
   <ion-toolbar secondary>
     <ion-title>Left Menu</ion-title>
@@ -8,17 +8,17 @@
 
     <ion-list>
 
-      <button ion-item aside-toggle="leftMenu">
+      <button ion-item menu-toggle="leftMenu">
         Close Left Menu
       </button>
 
     </ion-list>
   </ion-content>
 
-</ion-aside>
+</ion-menu>
 
 
-<!-- <ion-aside [content]="content" id="rightMenu" type="reveal" side="right">
+<!-- <ion-menu [content]="content" id="rightMenu" type="reveal" side="right">
 
   <ion-toolbar secondary>
     <ion-title>Right Menu</ion-title>
@@ -28,14 +28,14 @@
 
     <ion-list>
 
-      <button ion-item aside-toggle="rightMenu">
+      <button ion-item menu-toggle="rightMenu">
         Close Right Menu
       </button>
 
     </ion-list>
   </ion-content>
 
-</ion-aside> -->
+</ion-menu> -->
 
 
 <ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

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

@@ -1,12 +1,12 @@
 
 <ion-navbar *navbar>
 
-  <button aside-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
   </button>
 
   <ion-title>
-    Reveal Aside
+    Overlay Menu
   </ion-title>
 
 </ion-navbar>
@@ -17,11 +17,11 @@
   <h3>Content</h3>
 
   <p>
-    <button aside-toggle="leftMenu">Toggle Left Aside</button>
+    <button menu-toggle="leftMenu">Toggle Left Menu</button>
   </p>
 
   <p>
-    <button aside-toggle="rightMenu">Toggle Right Aside</button>
+    <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>

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

@@ -15,9 +15,9 @@ class E2EApp {
     this.rootView = Page1;
   }
 
-  openPage(aside, page) {
+  openPage(menu, page) {
-    // close the menu when clicking a link from the aside
+    // close the menu when clicking a link from the menu
-    aside.close();
+    menu.close();
 
     // Reset the content nav to have just this page
     // we wouldn't want the back button to show in this scenario

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

@@ -1,4 +1,4 @@
-<ion-aside [content]="content" id="leftMenu" type="overlay" side="left">
+<ion-menu [content]="content" id="leftMenu" type="reveal" side="left">
 
   <ion-toolbar secondary>
     <ion-title>Left Menu</ion-title>
@@ -8,17 +8,17 @@
 
     <ion-list>
 
-      <button ion-item aside-toggle="leftMenu">
+      <button ion-item menu-toggle="leftMenu">
         Close Left Menu
       </button>
 
     </ion-list>
   </ion-content>
 
-</ion-aside>
+</ion-menu>
 
 
-<!-- <ion-aside [content]="content" id="rightMenu" type="reveal" side="right">
+<!-- <ion-menu [content]="content" id="rightMenu" type="reveal" side="right">
 
   <ion-toolbar secondary>
     <ion-title>Right Menu</ion-title>
@@ -28,14 +28,14 @@
 
     <ion-list>
 
-      <button ion-item aside-toggle="rightMenu">
+      <button ion-item menu-toggle="rightMenu">
         Close Right Menu
       </button>
 
     </ion-list>
   </ion-content>
 
-</ion-aside> -->
+</ion-menu> -->
 
 
 <ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

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

@@ -1,12 +1,12 @@
 
 <ion-navbar *navbar>
 
-  <button aside-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
   </button>
 
   <ion-title>
-    Overlay Aside
+    Reveal Menu
   </ion-title>
 
 </ion-navbar>
@@ -17,11 +17,11 @@
   <h3>Content</h3>
 
   <p>
-    <button aside-toggle="leftMenu">Toggle Left Aside</button>
+    <button menu-toggle="leftMenu">Toggle Left Menu</button>
   </p>
 
   <p>
-    <button aside-toggle="rightMenu">Toggle Right Aside</button>
+    <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>

ionic/components/nav-bar/nav-bar.ts

@@ -26,7 +26,7 @@ import {ViewItem} from '../view/view-item';
           <span class="back-title" [text-content]="bbText"></span>
         </span>
       </button>
-      <ng-content select="[aside-toggle]"></ng-content>
+      <ng-content select="[menu-toggle]"></ng-content>
       <div class="toolbar-title">
         <div class="toolbar-inner-title">
           <ng-content select="ion-title"></ng-content>

ionic/components/toolbar/modes/ios.scss

@@ -4,7 +4,7 @@
 
 $toolbar-order-ios: (
   back-button: 10,
-  aside-toggle: 20,
+  menu-toggle: 20,
   primary: 30,
   title: 40,
   secondary: 50
@@ -33,8 +33,8 @@ $toolbar-ios-title-font-size:               1.7rem !default;
     order: map-get($toolbar-order-ios, secondary);
   }
 
-  [aside-toggle] {
+  [menu-toggle] {
-    order: map-get($toolbar-order-ios, 'aside-toggle');
+    order: map-get($toolbar-order-ios, 'menu-toggle');
   }
 
   ion-title {

ionic/components/toolbar/modes/material.scss

@@ -46,14 +46,14 @@ $toolbar-md-button-font-size:        1.4rem !default;
     min-width: 28px;
   }
 
-  button[aside-toggle],
+  button[menu-toggle],
-  [aside-toggle].activated {
+  [menu-toggle].activated {
     margin: -$toolbar-padding 0 -$toolbar-padding -$toolbar-padding;
     padding-bottom: $toolbar-padding / 2;
     height: $toolbar-md-height;
   }
 
-  [aside-toggle] icon {
+  [menu-toggle] icon {
     padding: 0 33px 0 20px;
   }
 

ionic/components/toolbar/test/scenarios/main.html

@@ -1,9 +1,9 @@
 
 <ion-toolbar>
-  <button aside-toggle>
+  <button menu-toggle>
     <icon menu></icon>
   </button>
-  <ion-title>aside-toggle left. This is the title that never ends. It just goes on and on my friend.</ion-title>
+  <ion-title>menu-toggle left. This is the title that never ends. It just goes on and on my friend.</ion-title>
 </ion-toolbar>
 
 

ionic/components/toolbar/toolbar.scss

@@ -6,7 +6,7 @@ $toolbar-padding:        4px !default;
 
 $toolbar-order: (
   backButton: 10,
-  aside-toggle: 20,
+  menu-toggle: 20,
   title: 30,
   primary: 40,
   secondary: 50
@@ -78,15 +78,15 @@ ion-title {
   color: $toolbar-text-color;
 }
 
-.toolbar [aside-toggle] {
+.toolbar [menu-toggle] {
   margin: 0;
   padding: 0;
   min-width: 48px;
-  order: map-get($toolbar-order, 'aside-toggle');
+  order: map-get($toolbar-order, 'menu-toggle');
   box-shadow: none;
 }
 
-.toolbar [aside-toggle] icon {
+.toolbar [menu-toggle] icon {
   padding: 0 12px;
 }
 

ionic/components/toolbar/toolbar.ts

@@ -110,7 +110,7 @@ export class ToolbarBase extends Ion  {
 @View({
   template: `
     <div class="toolbar-inner">
-      <ng-content select="[aside-toggle]"></ng-content>
+      <ng-content select="[menu-toggle]"></ng-content>
       <div class="toolbar-title">
         <div class="toolbar-inner-title">
           <ng-content select="ion-title"></ng-content>

ionic/config/annotations.ts

@@ -4,7 +4,7 @@ import * as util from 'ionic/util';
 import {IonicConfig} from './config';
 import {ionicBootstrap} from '../components/app/app';
 import {
-  Aside, AsideToggle, Button, Content, Scroll, Refresher,
+  Menu, MenuToggle, Button, Content, Scroll, Refresher,
   Slides, Slide, SlideLazy,
   Tabs, Tab,
   Card, List, ListHeader, Item, ItemGroup, ItemGroupTitle,
@@ -34,8 +34,8 @@ export const IonicDirectives = [
   NgStyle,
 
   // Content
-  forwardRef(() => Aside),
+  forwardRef(() => Menu),
-  forwardRef(() => AsideToggle),
+  forwardRef(() => MenuToggle),
 
   forwardRef(() => Button),
   forwardRef(() => Content),

ionic/ionic.core.scss

@@ -16,8 +16,6 @@
 @import
   "components/toolbar/toolbar",
   "components/action-menu/action-menu",
-  "components/aside/aside",
-  "components/aside/extensions/types",
   "components/badge/badge",
   "components/button/button",
   "components/button/button-clear",
@@ -35,6 +33,8 @@
   "components/text-input/label",
   "components/list/list",
   "components/card/card",
+  "components/menu/menu",
+  "components/menu/extensions/types",
   "components/modal/modal",
   "components/nav-bar/nav-bar",
   "components/popup/popup",