Create a side menu on specific pages


#1

Hello everyone,

Is it possible to create a side menu on specific pages, is that possible?
My goal is to display a side menu when the user isn’t on the homepage, ie, when he is on the main page, and each page would be open with parameters. Moreover, according to the user who is connected to the application, I would need to display a new button in the side menu.
Thanks


#2

Sure, just create a side menu component and do it yourself.


#3

thanks for your reply.
I create a new project with the ionic start testApp sidemenu command line to have a better view of how to make a side menu, so, in my app.html page, I put this code :

<ion-menu [content]="content">
        <ion-header>
          <ion-toolbar>
            <ion-title>Menu</ion-title>
          </ion-toolbar>
        </ion-header>
      
        <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>
      
      <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
      <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

In my app.components.ts page, I have this code :

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage:any = HomePage;
  pages: Array<{title: string, component: any}>;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    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();
    });

    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'Home 2', component: HomePage }
    ];
  }

  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);
  }
}

From my root page, I open the main page with the navController component, and on my main page, in my html main page, I I put this code in my ion-header tag :

<ion-header>
  <ion-navbar hideBackButton>
      <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
    <ion-title>Mon espage personnel</ion-title>
  </ion-navbar>
</ion-header>

When I open my main page, the hamburger button doesn’t appear. Is that normal?