diff --git a/ionic/components/menu/menu-controller.ts b/ionic/components/menu/menu-controller.ts index 25f1df0f90..1c1fd69ac3 100644 --- a/ionic/components/menu/menu-controller.ts +++ b/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 - * + * ... + * ``` + * + * + * ### 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 + * ... * ``` * * @demo /docs/v2/demos/menu/ diff --git a/ionic/components/menu/menu-toggle.ts b/ionic/components/menu/menu-toggle.ts index 05180d52b4..6826f0d9b6 100644 --- a/ionic/components/menu/menu-toggle.ts +++ b/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; } diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts index 2875f6f76b..ac6331892b 100644 --- a/ionic/components/menu/menu.ts +++ b/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 = new EventEmitter(); + @Input() maxEdgeStart: number; + + /** + * @private + */ + @Output() opening: EventEmitter = new EventEmitter(); constructor( private _menuCtrl: MenuController, diff --git a/ionic/components/menu/test/basic/main.html b/ionic/components/menu/test/basic/main.html index d6f560da6e..9c1a9f1ca3 100644 --- a/ionic/components/menu/test/basic/main.html +++ b/ionic/components/menu/test/basic/main.html @@ -1,4 +1,4 @@ - + Left Menu diff --git a/ionic/components/menu/test/basic/page3.html b/ionic/components/menu/test/basic/page3.html index 1b631ce4a1..e05fc4807b 100644 --- a/ionic/components/menu/test/basic/page3.html +++ b/ionic/components/menu/test/basic/page3.html @@ -1,6 +1,10 @@ + + Menu