How to add SideBar Menu to my existing ionic project

Ionic Framework ionic-v3
1

I am already working in an Ionic2 project, but I am facing difficulties in adding a sidebar menu.

Currently my code looks like the following, when I click on the menu icon, the menu seems to show behind the navbar and the whole view itself.

I believe the way I am following is a wrong way to implement the sidebar.

Home.html

      <ion-header>
      <ion-navbar mainPageNavBarColor>
           <button menuToggle start>
          <ion-icon name="menu"></ion-icon>
         </button>
        <ion-menu [content]="mycontent">
        <ion-content>
          <ion-list>
            <button menuClose ion-item detail-none>Close Menu</button>
          </ion-list>
             <ion-list>
            <button menuClose ion-item detail-none>Close Menu 2</button>
          </ion-list>
             <ion-list>
            <button menuClose ion-item detail-none>Close Menu 3</button>
          </ion-list>
        </ion-content>
      </ion-menu>
      <ion-nav #mycontent [root]="rootPage"></ion-nav>
      </ion-navbar>
      </ion-header>

Can you please tell me what’s wrong?

1 Like
2

You can see the docs http://ionicframework.com/docs/v2/components/#menus
I think you should not enclose the ion-menu inside ion-header and ion-navbar.

In app.html

<ion-menu [content]="content">

  <ion-toolbar>
    <ion-title>Pages</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

and in app.ts

import {Component, ViewChild} from '@angular/core';
import {App, ionicBootstrap, Platform, Nav} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {ListPage} from './pages/list/list';



@Component({
  templateUrl: 'build/app.html'
})
class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = TabsPage;
  pages: Array<{title: string, component: any}>

  constructor(private platform: Platform) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'List', component: ListPage }
    ];

  }

  initializeApp() {
    this.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();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }



}

ionicBootstrap(MyApp);

and rest of your pages of existing app.
eg. home.html

<ion-navbar *navbar>
    <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
    <ion-title>Getting Started</ion-title>
</ion-navbar>

<ion-content padding class="page1">
    <h2>Welcome to Ionic!</h2>
</ion-content>
2 Likes
3

@nabinkumarn I can to make menu in Home page for example, its possble ?

4

No I don’t think it’s possible.

https://ionicframework.com/docs/api/components/menu/Menu/

To add a menu to an app, the element should be added as a sibling to the ion-nav it will belongs to. A local variable should be added to the ion-nav and passed to the ion-menus content property.

By default, the only place that has <ion-nav> is app.html. <ion-nav> is essentially your NavController. I am not sure if you can have multiple <ion-nav> in your project, but I believe it will mess with how your NavController work.

5

ionic-angular/umd"’ has no exported member 'ionicBootstrap

6

In this scenario, How to navigate to previous page using hardware back button?
because we dont use nav.push method.

How is it possible?