From 3cd31c3d17b358f6b6afa5c9512ff605517d781b Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 28 Jun 2016 16:22:39 -0500
Subject: [PATCH] fix(menu): fix content going under header

Closes #7084
---
 demos/events/app.html                         |  8 ++++---
 demos/menu/app.html                           | 16 ++++++++-----
 src/components/app/test/cordova/app.html      |  8 ++++---
 src/components/menu/menu.scss                 |  6 +++++
 src/components/menu/test/basic/main.html      | 22 ++++++++++++-----
 .../menu/test/disable-swipe/main.html         | 16 ++++++++-----
 .../menu/test/enable-disable/main.html        | 24 ++++++++++++-------
 src/components/menu/test/multiple/main.html   | 16 ++++++++-----
 src/components/menu/test/overlay/main.html    | 16 ++++++++-----
 src/components/menu/test/push/main.html       | 16 ++++++++-----
 src/components/menu/test/reveal/main.html     | 16 ++++++++-----
 src/components/nav/test/nested/index.ts       |  8 ++++---
 src/components/range/test/basic/main.html     | 16 ++++++++-----
 src/components/tabs/test/basic/index.ts       |  8 ++++---
 src/components/tabs/test/ghost/index.ts       |  8 ++++---
 15 files changed, 132 insertions(+), 72 deletions(-)

diff --git a/demos/events/app.html b/demos/events/app.html
index d263e7c708d..258c7d8b9fc 100644
--- a/demos/events/app.html
+++ b/demos/events/app.html
@@ -1,8 +1,10 @@
 <ion-menu #menu [content]="content">
 
-  <ion-toolbar secondary>
-    <ion-title>Left Menu</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar secondary>
+      <ion-title>Left Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
 
diff --git a/demos/menu/app.html b/demos/menu/app.html
index fc2abf25b7f..0b2b78b1b45 100644
--- a/demos/menu/app.html
+++ b/demos/menu/app.html
@@ -1,8 +1,10 @@
 <ion-menu [content]="content" id="menu1">
 
-  <ion-toolbar secondary>
-    <ion-title>Menu 1</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar secondary>
+      <ion-title>Menu 1</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
     <ion-list>
@@ -17,9 +19,11 @@
 
 <ion-menu [content]="content" id="menu2">
 
-  <ion-toolbar danger>
-    <ion-title>Menu 2</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar danger>
+      <ion-title>Menu 2</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
     <ion-list>
diff --git a/src/components/app/test/cordova/app.html b/src/components/app/test/cordova/app.html
index c78b33c23bd..589e6b890ba 100644
--- a/src/components/app/test/cordova/app.html
+++ b/src/components/app/test/cordova/app.html
@@ -1,8 +1,10 @@
 <ion-menu [content]="content" side="left">
 
-  <ion-toolbar secondary>
-    <ion-title>Left Menu</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar secondary>
+      <ion-title>Left Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
 
diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss
index 79798a02076..da19380e138 100644
--- a/src/components/menu/menu.scss
+++ b/src/components/menu/menu.scss
@@ -23,6 +23,12 @@ ion-menu {
   transform: translate3d(-9999px, 0, 0);
 }
 
+ion-menu > ion-header,
+ion-menu > ion-content,
+ion-menu > ion-footer {
+  position: relative;
+}
+
 ion-menu[side=right] {
   right: 0;
   left: auto;
diff --git a/src/components/menu/test/basic/main.html b/src/components/menu/test/basic/main.html
index f0d9002f85a..3ce5cb68384 100644
--- a/src/components/menu/test/basic/main.html
+++ b/src/components/menu/test/basic/main.html
@@ -1,8 +1,10 @@
 <ion-menu [content]="content" side="left" persistent="true" (ionDrag)="onDrag($event)" (ionOpen)="onOpen($event)" (ionClose)="onClose($event)">
 
-  <ion-toolbar secondary>
-    <ion-title>Left Menu</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar secondary>
+      <ion-title>Left Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
 
@@ -63,14 +65,22 @@
     </ion-list>
   </ion-content>
 
+  <ion-footer>
+    <ion-toolbar secondary>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+
 </ion-menu>
 
 
 <ion-menu [content]="content" side="right">
 
-  <ion-toolbar danger>
-    <ion-title>Right Menu</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar danger>
+      <ion-title>Right Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
 
diff --git a/src/components/menu/test/disable-swipe/main.html b/src/components/menu/test/disable-swipe/main.html
index 5d7a9d14d26..09bf203a8c7 100644
--- a/src/components/menu/test/disable-swipe/main.html
+++ b/src/components/menu/test/disable-swipe/main.html
@@ -1,8 +1,10 @@
 <ion-menu [content]="content" side="left">
 
-  <ion-toolbar secondary>
-    <ion-title>Left Menu</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar secondary>
+      <ion-title>Left Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
 
@@ -18,9 +20,11 @@
 
 <ion-menu [content]="content" side="right" swipeEnabled="false">
 
-  <ion-toolbar danger>
-    <ion-title>Right Menu</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar danger>
+      <ion-title>Right Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
 
diff --git a/src/components/menu/test/enable-disable/main.html b/src/components/menu/test/enable-disable/main.html
index e2dc36b16eb..c8ee431dcb6 100644
--- a/src/components/menu/test/enable-disable/main.html
+++ b/src/components/menu/test/enable-disable/main.html
@@ -1,8 +1,10 @@
 <ion-menu [content]="content" id="menu1">
 
-  <ion-toolbar secondary>
-    <ion-title>Menu 1</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar secondary>
+      <ion-title>Menu 1</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
     <ion-list>
@@ -26,9 +28,11 @@
 
 <ion-menu [content]="content" id="menu2">
 
-  <ion-toolbar danger>
-    <ion-title>Menu 2</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar danger>
+      <ion-title>Menu 2</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
     <ion-list>
@@ -51,9 +55,11 @@
 
 <ion-menu [content]="content" id="menu3">
 
-  <ion-toolbar primary>
-    <ion-title>Menu 3</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar primary>
+      <ion-title>Menu 3</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
     <ion-list>
diff --git a/src/components/menu/test/multiple/main.html b/src/components/menu/test/multiple/main.html
index 9e963742862..2064d057d45 100644
--- a/src/components/menu/test/multiple/main.html
+++ b/src/components/menu/test/multiple/main.html
@@ -1,8 +1,10 @@
 <ion-menu [content]="content" id="menu1">
 
-  <ion-toolbar secondary>
-    <ion-title>Menu 1</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar secondary>
+      <ion-title>Menu 1</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
     <ion-list>
@@ -17,9 +19,11 @@
 
 <ion-menu [content]="content" id="menu2">
 
-  <ion-toolbar danger>
-    <ion-title>Menu 2</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar danger>
+      <ion-title>Menu 2</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
     <ion-list>
diff --git a/src/components/menu/test/overlay/main.html b/src/components/menu/test/overlay/main.html
index 566ee8a40f4..3c41e4b2c7a 100644
--- a/src/components/menu/test/overlay/main.html
+++ b/src/components/menu/test/overlay/main.html
@@ -1,8 +1,10 @@
 <ion-menu [content]="content" id="myMenuId" type="overlay" side="left">
 
-  <ion-toolbar secondary>
-    <ion-title>Left Menu</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar secondary>
+      <ion-title>Left Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
 
@@ -22,9 +24,11 @@
 
 <ion-menu [content]="content" id="myMenuId2" type="overlay" side="right">
 
-  <ion-toolbar danger>
-    <ion-title>Right Menu</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar danger>
+      <ion-title>Right Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
 
diff --git a/src/components/menu/test/push/main.html b/src/components/menu/test/push/main.html
index dd74678e77a..44c5e4df00a 100644
--- a/src/components/menu/test/push/main.html
+++ b/src/components/menu/test/push/main.html
@@ -1,8 +1,10 @@
 <ion-menu [content]="content" type="push" side="left">
 
-  <ion-toolbar secondary>
-    <ion-title>Left Menu</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar secondary>
+      <ion-title>Left Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
 
@@ -22,9 +24,11 @@
 
 <ion-menu [content]="content" type="push" side="right">
 
-  <ion-toolbar danger>
-    <ion-title>Right Menu</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar danger>
+      <ion-title>Right Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
 
diff --git a/src/components/menu/test/reveal/main.html b/src/components/menu/test/reveal/main.html
index f2407974c24..c9c62246927 100644
--- a/src/components/menu/test/reveal/main.html
+++ b/src/components/menu/test/reveal/main.html
@@ -1,8 +1,10 @@
 <ion-menu [content]="content" type="reveal">
 
-  <ion-toolbar secondary>
-    <ion-title>Left Menu</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar secondary>
+      <ion-title>Left Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
 
@@ -19,9 +21,11 @@
 
 <ion-menu [content]="content" type="reveal" side="right">
 
-  <ion-toolbar danger>
-    <ion-title>Right Menu</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar danger>
+      <ion-title>Right Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
 
diff --git a/src/components/nav/test/nested/index.ts b/src/components/nav/test/nested/index.ts
index e25a027eba5..bdfc2036172 100644
--- a/src/components/nav/test/nested/index.ts
+++ b/src/components/nav/test/nested/index.ts
@@ -32,9 +32,11 @@ export class Login {
 @Component({
   template: `
     <ion-menu [content]="content">
-     <ion-toolbar secondary>
-       <ion-title>Account Menu</ion-title>
-     </ion-toolbar>
+     <ion-header>
+      <ion-toolbar secondary>
+        <ion-title>Account Menu</ion-title>
+      </ion-toolbar>
+     </ion-header>
      <ion-content>
        <ion-list>
          <button ion-item (click)="goToProfile()">
diff --git a/src/components/range/test/basic/main.html b/src/components/range/test/basic/main.html
index 91895e039c2..5eb2d113f71 100644
--- a/src/components/range/test/basic/main.html
+++ b/src/components/range/test/basic/main.html
@@ -1,8 +1,10 @@
 <ion-menu [content]="content" side="left" persistent="true">
 
-  <ion-toolbar secondary>
-    <ion-title>Left Menu</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar secondary>
+      <ion-title>Left Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
 
@@ -64,9 +66,11 @@
 
 <ion-menu [content]="content" side="right">
 
-  <ion-toolbar danger>
-    <ion-title>Right Menu</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar danger>
+      <ion-title>Right Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
 
diff --git a/src/components/tabs/test/basic/index.ts b/src/components/tabs/test/basic/index.ts
index 51969334f33..a8dbfdeb752 100644
--- a/src/components/tabs/test/basic/index.ts
+++ b/src/components/tabs/test/basic/index.ts
@@ -219,9 +219,11 @@ export class Tab3 {
 @Component({
   template: `
     <ion-menu [content]="content">
-      <ion-toolbar secondary>
-        <ion-title>Menu</ion-title>
-      </ion-toolbar>
+      <ion-header>
+        <ion-toolbar secondary>
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
       <ion-content>
         <ion-list>
           <button ion-item menuClose detail-none>
diff --git a/src/components/tabs/test/ghost/index.ts b/src/components/tabs/test/ghost/index.ts
index 3fa2b233323..db9b8619698 100644
--- a/src/components/tabs/test/ghost/index.ts
+++ b/src/components/tabs/test/ghost/index.ts
@@ -87,9 +87,11 @@ class QuesaritoPage {
 @Component({
   template: `
     <ion-menu [content]="content">
-      <ion-toolbar secondary>
-        <ion-title>Secret Menu</ion-title>
-      </ion-toolbar>
+      <ion-header>
+        <ion-toolbar secondary>
+          <ion-title>Secret Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
       <ion-content>
         <ion-list>
           <button ion-item menuClose detail-none (click)="openPage('quesarito')">