toolbar menu-toggle to use link

demos/aside/page1.html

@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle id="e2eHeaderToggleMenu">
+  <a menu-toggle id="e2eHeaderToggleMenu">
     <icon menu></icon>
-  </button>
+  </a>
 
   <ion-title>
     Menu

demos/aside/page2.html

@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle id="e2eHeaderToggleMenu">
+  <a menu-toggle id="e2eHeaderToggleMenu">
     <icon menu></icon>
-  </button>
+  </a>
 
   <ion-title>
     Menu

demos/material/index.ts

@@ -5,9 +5,9 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
 @IonicView({
   template: '<ion-navbar *navbar primary>' +
     '<ion-title>Heading</ion-title>' +
-    '<button menu-toggle="menu">' +
+    '<a menu-toggle="menu">' +
       '<icon menu></icon>' +
-    '</button>' +
+    '</a>' +
     '<ion-nav-items secondary>' +
       '<button><ion-icon md="ion-android-search" ios="ion-ios-search-strong"></i></button>' +
       '<button (click)="showMoreMenu()"><i class="icon ion-android-more-vertical"></i></button>' +

demos/native/pages/battery.ts

@@ -4,9 +4,9 @@ import {IonicView} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button menu-toggle>
+    <a menu-toggle>
       <icon menu></icon>
-    </button>
+    </a>
     <ion-title>Battery</ion-title>
   </ion-navbar>
   <ion-content class="padding">

demos/native/pages/camera.ts

@@ -5,9 +5,9 @@ import {Camera} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button menu-toggle>
+    <a menu-toggle>
       <icon menu></icon>
-    </button>
+    </a>
     <ion-title>Camera</ion-title>
   </ion-navbar>
   <ion-content class="padding">

demos/native/pages/contacts.ts

@@ -5,9 +5,9 @@ import {Contacts} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button menu-toggle>
+    <a menu-toggle>
       <icon menu></icon>
-    </button>
+    </a>
     <ion-title>Contacts</ion-title>
   </ion-navbar>
   <ion-content class="padding">

demos/native/pages/device-motion.ts

@@ -4,9 +4,9 @@ import {IonicView} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button menu-toggle>
+    <a menu-toggle>
       <icon menu></icon>
-    </button>
+    </a>
     <ion-title>Device Motion</ion-title>
   </ion-navbar>
   <ion-content class="padding">

demos/native/pages/device.ts

@@ -4,9 +4,9 @@ import {IonicView} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button menu-toggle>
+    <a menu-toggle>
       <icon menu></icon>
-    </button>
+    </a>
     <ion-title>Vibration</ion-title>
   </ion-navbar>
   <ion-content class="padding">

demos/native/pages/geolocation.ts

@@ -5,9 +5,9 @@ import {Geolocation} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button menu-toggle>
+    <a menu-toggle>
       <icon menu></icon>
-    </button>
+    </a>
     <ion-title>Vibration</ion-title>
   </ion-navbar>
   <ion-content class="padding">

demos/native/pages/vibration.ts

@@ -5,9 +5,9 @@ import {Vibration} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button menu-toggle>
+    <a menu-toggle>
       <icon menu></icon>
-    </button>
+    </a>
     <ion-title>Vibration</ion-title>
   </ion-navbar>
   <ion-content class="padding">

ionic/components/button/button.ts

@@ -5,7 +5,7 @@ import {Directive} from 'angular2/angular2';
  * TODO
  */
 @Directive({
-  selector: 'button,[button]',
+  selector: 'button,[button],[menu-toggle]',
   host: {
     '[class.icon-left]': 'iconLeft',
     '[class.icon-right]': 'iconRight',

ionic/components/menu/menu-toggle.ts

@@ -11,7 +11,8 @@ import {IonicApp} from '../app/app';
     'menuToggle'
   ],
   host: {
-    '(click)': 'toggle($event)'
+    '(click)': 'toggle($event)',
+    'button': ''
   }
 })
 export class MenuToggle {

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

@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle id="e2eHeaderToggleMenu">
+  <a menu-toggle id="e2eHeaderToggleMenu">
     <icon menu></icon>
-  </button>
+  </a>
 
   <ion-title>
     Menu

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

@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle id="e2eHeaderToggleMenu">
+  <a menu-toggle id="e2eHeaderToggleMenu">
     <icon menu></icon>
-  </button>
+  </a>
 
   <ion-title>
     Menu

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

@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle="leftMenu">
+  <a menu-toggle="leftMenu">
     <icon menu></icon>
-  </button>
+  </a>
 
   <ion-title>
     Overlay Menu

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

@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle="leftMenu">
+  <a menu-toggle="leftMenu">
     <icon menu></icon>
-  </button>
+  </a>
 
   <ion-title>
     Reveal Menu

ionic/components/toolbar/modes/ios.scss

@@ -35,6 +35,7 @@ $toolbar-ios-title-font-size:               1.7rem !default;
 
   [menu-toggle] {
     order: map-get($toolbar-order-ios, 'menu-toggle');
+    margin-left: 10px;
   }
 
   ion-title {

ionic/components/toolbar/modes/material.scss

@@ -46,15 +46,11 @@ $toolbar-md-button-font-size:        1.4rem !default;
     min-width: 28px;
   }
 
-  button[menu-toggle],
+  a[menu-toggle],
   [menu-toggle].activated {
-    margin: -$toolbar-padding 0 -$toolbar-padding -$toolbar-padding;
+    margin: ($toolbar-padding * -1) 20px ($toolbar-padding * -1) 8px;
     padding-bottom: $toolbar-padding / 2;
     height: $toolbar-md-height;
   }
 
-  [menu-toggle] icon {
-    padding: 0 33px 0 20px;
-  }
-
 }

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

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