CODEWITHSUNDEEP
javascriptnode.jstypescriptmenuionic2
547n00n
547n00n

Reputation: 1536

Ionic 2 menu transition

I followed the menu documentation of ionic 2 and I want to display the menu like this: enter image description here

so the menu is displayed below the content page and the menu button still displayed.

but when I run my app I got this :

enter image description here

the menu is displayed above the content page and the button disappear ! here is app.html code : 

<ion-split-pane>
    <ion-menu side="left" id="loggedInMenu" [content]="content">
        <ion-header>
            <ion-toolbar>
                <ion-title>Menu</ion-title>
            </ion-toolbar>
        </ion-header>

        <ion-content>
            <ion-list>
                <button ion-item menuClose="loggedInMenu" *ngFor="let p of appPages" (click)="openPage(p)">
                    <ion-icon item-start [name]="p.icon" [color]="isActive(p)" ></ion-icon>
                    {{p.title}}
                </button>
            </ion-list>
        </ion-content>
    </ion-menu>
    <!-- main navigation -->
    <ion-nav [root]="rootPage" #content swipeBackEnabled="false" main name="app"></ion-nav>

</ion-split-pane>

app.componenent.ts :

import { Component, ViewChild } from '@angular/core';
import { Platform,MenuController, Nav, } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { MainPage } from '../pages/main/main';
import { MyDogsPage } from '../pages/my-dogs/my-dogs';
import { MyCoursesPage } from '../pages/my-courses/my-courses';
import { FriendsPage } from '../pages/friends/friends';
import { TrainersPage } from '../pages/trainers/trainers';
import { AuthenticationProvider } from '../providers/authentication/authentication'



export interface PageInterface {
  title: string;
  component: any;
  icon: string;
  index?: number;

}


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  appPages: PageInterface[] = [
    { title: 'Account', component: MainPage, index: 0, icon: 'finger-print' },
    { title: 'My Dogs',  component: MyDogsPage,index: 1, icon: 'paw' },
    { title: 'My Course', component: MyCoursesPage, index: 2, icon: 'book' },
    { title: 'Friends', component: FriendsPage, index: 3, icon: 'people' },
    { title: 'My Trainers', component: TrainersPage, index: 4, icon: 'man' },

  ];
  rootPage:any;
  currentTitle ='';
  activePage:any;
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public userData: AuthenticationProvider, public menuctrl: MenuController) {
    this.rootPage=(localStorage.disableintro? LoginPage:HomePage)
    this.userData.hasLoggedIn().then((hasLoggedIn) => {
      this.enableMenu(hasLoggedIn === true);
    });
    this.enableMenu(false);

    platform.ready().then(() => {
      // 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();
      splashScreen.hide();
    });
  }

  enableMenu(loggedIn: boolean) {
    this.menuctrl.enable(loggedIn, 'loggedInMenu');
  }


  openPage(page) {
    let params = {};
    console.log('dd');

    this.nav.setRoot(page.component, params).catch((err: any) => {
      console.log('rr');

        console.log(`Didn't set nav root: ${err}`);
    });

    this.activePage=page;
  }

  isActive(page: PageInterface) {
    let childNav = this.nav.getActiveChildNavs()[0];

    // Tabs are a special case because they have their own navigation
    if (childNav) {
      if (childNav.getSelected() ) {
        return 'primary';
      }
      return;
    }

    if (this.nav.getActive() && this.nav.getActive().name === page.title) {
      return 'primary';
    }
    return;
  }
}

some help please.

Upvotes: 1

Views: 1036

Answers (1)

robbannn
robbannn

Reputation: 5013

Try adding type='reveal to your <ion-menu>-element:

<ion-menu type='reveal' side="left" id="loggedInMenu" [content]="content">

The docs say:
'The default type for both Material Design and Windows mode is overlay, and reveal is the default type for iOS mode.'

The wanted result you're showing is displayed in iOS mode. The result you're getting is in Material Design mode.

Upvotes: 2

Related Questions