Disable side menu on login page conference app

Ionic Framework ionic-v3
1

Hi,

On ionic conference app how can i disable the side menu on login page?

THnaks

1 Like
2

So you can disable (or enable) the menu using the following: this.menu.enable(false, 'leftMenu');

An example is our API demo:

import { Component } from '@angular/core';
import { MenuController } from 'ionic-angular';

@Component({
  templateUrl: 'page-one.html'
})
export class PageOne {
  activeMenu: string;

  constructor(public menu: MenuController) {
    this.menu1Active();
  }

  menu1Active() {
    this.activeMenu = 'menu1';
    this.menu.enable(true, 'menu1');
    this.menu.enable(false, 'menu2');
  }

  menu2Active() {
    this.activeMenu = 'menu2';
    this.menu.enable(false, 'menu1');
    this.menu.enable(true, 'menu2');
  }
}

See the MenuController API Docs for more usage info and a live demo: http://ionicframework.com/docs/api/components/app/MenuController/

12 Likes
3

Thanks @brandyshea for your response it worked

1 Like
4

hi @brandyshea, menu is now disabled on login screen but when i log out and return to login screen, clicks on the screen open the side menu and closes it. is this a bug. (Android Platform)

Also on iphone platform, screen hangs after logout

Thanks

5

You are correct, this is a bug. I created an issue here for it:

https://github.com/driftyco/ionic2/issues/674

Thanks for letting me know. :smile:

2 Likes
6

@brandyshea one more issue sometimes when i open the side menu it remain opened, menu item is clickable and navigation is working but menu donā€™t close. Toggle donā€™t work either (Android Version)

Thanks

7

Can you create an issue for this with more details? What version of Android is it, what device, etc. Please and thank you!

https://github.com/driftyco/ionic2/issues

8

With the latest version of the conference app (as of Feb 14, 2016) I get an error on the following line:

this.app.getComponent('leftMenu').enable(false);

ORIGINAL EXCEPTION: TypeError: Cannot read property ā€˜enableā€™ of undefined

Any ideas?

9

We refactored the menu to simplify the API. See the breaking changes in the changelog:

https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#200-alpha55-2016-02-05

It should work using:

this.menu.enable(false);

For reference: https://github.com/driftyco/ionic-conference-app/blob/master/app/pages/tutorial/tutorial.ts#L51

6 Likes
10

@brandyshea not sure if this is a bug or not but the menu is no longer there (expected), the menu icon is still showing (should not display) and the swipe effect for the menu is still there (should not be there).

How can I completely hide/disable/remove the menu on the login page?

import {IonicApp, Page, NavController, MenuController} from 'ionic/ionic';
import {TabsPage} from '../tabs/tabs';
import {SignupPage} from '../signup/signup';
import {UserData} from '../../providers/user-data';


@Page({
  templateUrl: 'build/pages/login/login.html'
})
export class LoginPage {
  constructor(nav: NavController, userData: UserData, menu: MenuController) {
    this.nav = nav;
    this.userData = userData;

    this.login = {};
    this.submitted = false;
    
    this.menu = menu;
    
  }

  onLogin(form) {
    this.submitted = true;

    if (form.valid) {
      this.userData.login();
      this.nav.push(TabsPage);
    }
  }

  onSignup() {
    this.nav.push(SignupPage);
  }
  
  onPageDidEnter() {
    // the left menu should be disabled on the login page
    this.menu.enable(false);
  }

  onPageDidLeave() {
    // enable the left menu when leaving the login page
    this.menu.enable(true);
  }
  
}
11

UPDATE

I got rid of the swipe effect by adding the following

.menu.swipeEnable(false);

and I was able to remove the menu button/icon by removing the following markup from the login.html file

<button menuToggle>
    <ion-icon name="menu"></ion-icon>
</button>

I was under the impression that this.menu.enable(false) would take care of everything

4 Likes
12

Is it possible to dynamically change menu orientation from left to right ?

Iā€™ve tried with Menu service but wasnā€™t able to find any method related to this.

ā€¦ or is there some known mambo jambo ninja workaround ?

13

Menu side is defined with side property:

<ion-menu side="left" [content]="content" id="side-menu"></ion-menu>

You could try to implement some method which updates this property based on your needs.

14

@sava999 if you change orientation from ltr to rtl and change side="right" menu doesnā€™t open fully.

Actually it opens up to the deffiniton of right margin when it is in side="left" mode.

So if visibility of side="left" is around 70% of screen, side="right" has visibility of 30% of the screen.

Iā€™ll say that this is but in Ionic2.

@brandyshea - please can you confirm ?

15

Reference giving -> 404 error

16

loginPage.ts file

import {NavController, MenuController} from ā€˜ionic-angularā€™;

constructor(public navCtrl: NavController, private menuCtrl: MenuController) {
this.menuCtrl.enable(false);
}

============================================

Be sure to set ā€œthis.menuCtrl.enable(true)ā€ in your landing page (mainPage) after login, eg.
If I want the menu to work after successful login, I set:

constructor(public navCtrl: NavController, private menuCtrl: MenuController) {
this.menuCtrl.enable(true);
}

in my mainPage.ts, the menu should work for all pages after login.
Mine seems toā€¦

5 Likes
17

the right way to do this for any page is by overriding the ionViewWillEnter function and addingg : this.menu.enable(false); to it

ionViewWillEnter() {
this.menu.enable(false);
}

and add the ionWillLeave function override like this :

ionViewWillLeave() {
this.menu.enable(true);
}

also import the following

import {MenuController} from ā€˜ionic-angularā€™;

5 Likes
18

As of the latest version of Ionic 2 to date (3/16/2017) I had to do this.menu.get().enable(false)

4 Likes
19

Thanks for this answer!!! This is the right way to do it in the ionic 2.2.1 !!

20

Thanks for the solution.