How can I make the menus being displayed correctly when navigating between pages

user_6347013 0
Viewed 109

The application I'm developing has this structure: there's two main pages with each a different side menu.

When accessing the first page, the right menu is being displayed. When accessing the second page from the first page, the right menu is also being displayed. The problem will occurred when trying to go the the first page again. The second menu is correctly hidden, but the menu from the first page is never displayed.

enter image description here

This is small repo to show the problem: https://github.com/iamkinetic/ionic4-multiple-menus-bug

Every version of Ionic (from 4.6 to 4.10) seems to have this issue and even manually enabling the menu doesn't fully fix the issue. Am I doing something wrong? Is there a better way to do this?

ionic4 angular8 typescript
1 Answers

I had the exact same problem. I just made a new angular component called menu and just introduced it into all the components that needed it. This happens because the ionicMenu is not referenced again when you go back. You cannot use ionic cli here. You may have to manually work it out. I will edit again if I find the code and put it here.

UPDATE: Here's the steps.

  1. Make a ionic page component called menu using ionic-cli
  2. Throw this in its HTML
<ion-header>
  <ion-toolbar [color]="currentColor">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      My App
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-menu contentId="child-content" side="start" menuId="custom" class="my-custom-menu" type="overlay">
  <ion-header>
    <ion-toolbar [color]="currentColor">
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list (click) = "closeMenu()">
      <ion-item routerLink="/dashboard/home" closeMenu>Home</ion-item>
      <ion-item routerLink="/dashboard/myorder" menuClose>My Order</ion-item>
      <ion-item routerLink="/dashboard/aboutus" menuClose>About us</ion-item>
      <ion-item routerLink="/dashboard/contactus" menuClose>Contact us</ion-item>
      <ion-item routerLink="/dashboard/feedback" menuClose>Feedback</ion-item>
      <ion-item (click) = "logout()">Log Out</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-content overflow-scroll="true">
  <ion-router-outlet id="child-content"></ion-router-outlet>
</ion-content>
  1. Copy all the routes for which you want the menu component from app-routing.module.ts and paste them into menu.module.ts like
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { MenuPage } from './dashboard.page';

const routes: Routes = [
  {
    path: '',
    component: MenuPage,
    children: [
      {
        path: '', redirectTo: 'home', pathMatch: 'full'
      },
      { path: 'schedule', loadChildren: '../schedule/schedule.module#SchedulePageModule' },
      { path: 'orderstatus/:id', loadChildren: '../orderstatus/orderstatus.module#OrderstatusPageModule' },
      { path: 'payment', loadChildren: '../payment/payment.module#PaymentPageModule' },
      { path: 'aboutus', loadChildren: '../aboutus/aboutus.module#AboutusPageModule' },
      { path: 'contactus', loadChildren: '../contactus/contactus.module#ContactusPageModule' },
      { path: 'howitworks', loadChildren: '../howitworks/howitworks.module#HowitworksPageModule' },
      { path: 'myorder', loadChildren: '../myorder/myorder.module#MyorderPageModule' },
      { path: 'orderdetails/:id', loadChildren: '../orderdetails/orderdetails.module#OrderdetailsPageModule' },
      { path: 'feedback', loadChildren: '../feedback/feedback.module#FeedbackPageModule' },
      { path: 'home', loadChildren: '../home/home.module#HomePageModule' },
    ]
  },
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [MenuPage]
})
export class MenuPageModule { }
  1. You should now have a common menu for all the routes under Menu Page. And should be able to access them as /menu/somepage if you don't like the menu in the path, change it to somethinglike dashboard or something in app-routing.module.ts
user_75534500
Related