ionic 2 side menu after login not working
<p>I'm trying to set the <strong>root page</strong> depending on if the user <strong>is logged</strong> in or not. The <strong>side menu</strong> not working after the user logged in . But if refresh the page the menu working perfectly. So i figured that something must be wrong with the page or the navigation, but I can't seem to figure it out.</p>

<p><strong>app.component.ts</strong></p>

<pre><code>import {Component, ViewChild} from '@angular/core';
import {Platform, ionicBootstrap, Nav} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import { Login } from '../pages/login/login';

@Component({
  template: 'app.html'
})

export class MyApp {

  @ViewChild(Nav) nav: Nav;
  rootPage: any;

  constructor(platform: Platform) {

    platform.ready().then(() =&gt; {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      this.isLoggedIn();
    });


  }

  isLoggedIn() {
    this.userData.hasLoggedIn().then((value)=&gt;{
      if(value == true) {
        this.rootPage = TabsPage;
      }else {
        this.rootPage = Login;
      }
    });
  }
}
</code></pre>

<p><strong>app.html</strong></p>

<pre><code>&lt;!-- logged in menu --&gt;
&lt;ion-menu side="right" id="loggedInMenu" [content]="content"&gt;

  &lt;ion-content class="outer-content"&gt;

    &lt;ion-list&gt;
      &lt;ion-list-header&gt;
        Navigate
      &lt;/ion-list-header&gt;
      &lt;button ion-item tappable detail-none ion-item menuClose *ngFor="let p of appPages" (click)="openPage(p)"&gt;
        &lt;ion-icon item-left [name]="p.icon"&gt;&lt;/ion-icon&gt;
        {{ p.title | translate }}
      &lt;/button&gt;
    &lt;/ion-list&gt;

    &lt;ion-list&gt;
      &lt;ion-list-header&gt;
        Account
      &lt;/ion-list-header&gt;
      &lt;button ion-item tappable detail-none ion-item menuClose *ngFor="let p of loggedInPages" (click)="openPage(p)"&gt;
        &lt;ion-icon item-left [name]="p.icon"&gt;&lt;/ion-icon&gt;
        {{ p.title | translate }}
      &lt;/button&gt;
    &lt;/ion-list&gt;

  &lt;/ion-content&gt;

&lt;/ion-menu&gt;

&lt;!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus --&gt;
&lt;ion-nav [root]="rootPage" #content swipeBackEnabled="false"&gt;&lt;/ion-nav&gt;
</code></pre>

<p><strong>Login.ts</strong></p>

<pre><code>import {Component} from '@angular/core';
import { TabsPage } from '../tabs/tabs';

@Component({
  template: 'app.html'
})

export class Login {

  @ViewChild(Nav) nav: Nav;
  rootPage: any;

  constructor(platform: Platform) {}

  onLogin(form) {
    let me = this;
      if (form.valid) {
        me.navCtrl.setRoot(TabsPage);
      }
  }
}
</code></pre>

<p><strong>Login.html</strong></p>

<pre><code>&lt;ion-content class="login"&gt;
  &lt;ion-list padding class="login_list"&gt;
    &lt;div class="logo"&gt;
      &lt;img src="assets/img/logo.png"&gt;
    &lt;/div&gt;

    &lt;form #loginForm="ngForm" (ngSubmit)="onLogin(loginForm)" novalidate&gt;
      &lt;ion-item&gt;
        &lt;ion-input [(ngModel)]="login.email" name="email" type="text" #email="ngModel" placeholder="{{ 'login.EMAIL' | translate }}" spellcheck="false" autocapitalize="off" required&gt;
        &lt;/ion-input&gt;
        &lt;ion-icon name="person" item-left color="white"&gt;&lt;/ion-icon&gt;
      &lt;/ion-item&gt;

      &lt;ion-item class="no-margin-buttom"&gt;
        &lt;ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" placeholder="{{ 'login.PASSWORD' | translate }}" required&gt;
        &lt;/ion-input&gt;
        &lt;ion-icon name="lock" item-left color="white"&gt;&lt;/ion-icon&gt;
      &lt;/ion-item&gt;

      &lt;ion-row responsive-sm&gt;
        &lt;ion-col&gt;
          &lt;button ion-button tappable type="submit" full class="loginBtn"&gt;{{ 'login.LOGIN_Btn' | translate }}&lt;/button&gt;
        &lt;/ion-col&gt;
      &lt;/ion-row&gt;
    &lt;/form&gt;
  &lt;/ion-list&gt;
  &lt;ion-list no-lines padding class="footer"&gt;
  &lt;ion-item&gt;
    &lt;button ion-button small clear color="white" item-right (click)="onSignup()"&gt;
      {{ 'login.Register' | translate }}
    &lt;/button&gt;
    &lt;button ion-button small clear color="white" item-left (click)="resetPassword()"&gt;
      {{ 'login.Forgot_password' | translate }}
    &lt;/button&gt;
  &lt;/ion-item&gt;
&lt;/ion-list&gt;
&lt;/ion-content&gt;
</code></pre>

<p>After Logged in the side menu not working properly but it's working if reloading the page.</p>

<p>So my Question:  <strong>Any suggestion about that ?</strong></p>