fix(menu): fix content going under header

Closes #7084
ionic-team · Jun 28, 2016 · 3cd31c3 · 3cd31c3
1 parent 4980659
commit 3cd31c3
Show file tree

Hide file tree

Showing 15 changed files with 132 additions and 72 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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')">