feat(menu): allow persistent menus

Closes #5204

ionic/components/menu/menu-controller.ts

@@ -120,7 +120,25 @@ import {MenuType} from './menu-types';
  * but this can be overriden using the `type` property:
  *
  * ```html
- * <ion-menu type="overlay" [content]="mycontent"></ion-menu>
+ * <ion-menu type="overlay" [content]="mycontent">...</ion-menu>
+ * ```
+ *
+ *
+ * ### Persistent Menus
+ *
+ * By default, menus, and specifically their menu toggle buttons in the navbar,
+ * only show on the root page within its `NavController`. For example, on Page 1
+ * the menu toggle will show in the navbar. However, when navigating to Page 2,
+ * because it is not the root Page for that `NavController`, the menu toggle
+ * will not show in the navbar.
+ *
+ * Not showing the menu toggle button in the navbar is commonly seen within
+ * native apps after navigating past the root Page. However, it is still possible
+ * to always show the menu toggle button in the navbar by setting
+ * `persistent="true"` on the `ion-menu` component.
+ *
+ * ```html
+ * <ion-menu persistent="true" [content]="content">...</ion-menu>
  * ```
  *
  * @demo /docs/v2/demos/menu/

ionic/components/menu/menu-toggle.ts

@@ -68,7 +68,17 @@ export class MenuToggle {
   */
   get isHidden() {
     if (this._inNavbar && this._viewCtrl) {
-      return !this._viewCtrl.isRoot();
+      if (this._viewCtrl.isRoot()) {
+        // this is the root view, so it should always show
+        return false;
+      }
+
+      let menu = this._menu.get(this.menuToggle);
+      if (menu) {
+        // this is not the root view, so see if this menu
+        // is configured to still be enabled if it's not the root view
+	      return !menu.persistent;
+      }
     }
     return false;
   }

ionic/components/menu/menu.ts

@@ -5,7 +5,6 @@ import {Config} from '../../config/config';
 import {Platform} from '../../platform/platform';
 import {Keyboard} from '../../util/keyboard';
 import {MenuContentGesture, MenuTargetGesture} from  './menu-gestures';
-import {Gesture} from '../../gestures/gesture';
 import {MenuController} from './menu-controller';
 import {MenuType} from './menu-types';
 import {isTrueProperty} from '../../util/util';
@@ -27,13 +26,14 @@ import {isTrueProperty} from '../../util/util';
 export class Menu extends Ion {
   private _preventTime: number = 0;
   private _cntEle: HTMLElement;
-  private _cntGesture: Gesture;
-  private _menuGesture: Gesture;
+  private _cntGesture: MenuTargetGesture;
+  private _menuGesture: MenuContentGesture;
   private _type: MenuType;
   private _resizeUnreg: Function;
   private _isEnabled: boolean = true;
   private _isSwipeEnabled: boolean = true;
   private _isListening: boolean = false;
+  private _isPers: boolean = false;
   private _init: boolean = false;
 
   /**
@@ -51,7 +51,6 @@ export class Menu extends Ion {
    */
   onContentClick: EventListener;
 
-
   /**
    * @private
    */
@@ -101,12 +100,24 @@ export class Menu extends Ion {
   /**
    * @private
    */
-  @Input() maxEdgeStart;
+  @Input()
+  get persistent(): boolean {
+    return this._isPers;
+  }
+
+  set persistent(val: boolean) {
+    this._isPers = isTrueProperty(val);
+  }
 
   /**
    * @private
    */
-  @Output() opening: EventEmitter<any> = new EventEmitter();
+  @Input() maxEdgeStart: number;
+
+  /**
+   * @private
+   */
+  @Output() opening: EventEmitter<number> = new EventEmitter();
 
   constructor(
     private _menuCtrl: MenuController,

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

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

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

@@ -1,6 +1,10 @@
 
 <ion-navbar *navbar>
 
+  <button menuToggle="left">
+    <ion-icon name="menu"></ion-icon>
+  </button>
+
   <ion-title>
     Menu
   </ion-title>