So I was trying to use the ionic menu to simplify my work and at first I thought everything was okay but I found that when I navigate out of a page and then back to it the button to open the menu just stops working.
Any idea why?
Please share some code, and make sure you use the code formatting with triple back ticks:
Code goes here
<template>
<ion-header :translucent="true">
<ion-toolbar>
<div class="header">
<div class="left-toolbar">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
</div>
<div @click="() => router.push('/profile')" class="right-toolbar">
<ion-icon :icon="person"></ion-icon>
</div>
</div>
</ion-toolbar>
</ion-header>
<div class="menu">
<ion-header>
<ion-toolbar>
<ion-title class="ion-text-center">Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="menu-pages">
<ion-list>
<ion-item>
<ion-button @click="router.push('/home')" class="button-native">
Home
</ion-button>
</ion-item>
<ion-item>
<ion-button @click="router.push('/profile')" class="button-native">
Profile
</ion-button>
</ion-item>
<ion-item>
<ion-button @click="router.push('/myreadlists')" class="button-native">
Collections
</ion-button>
</ion-item>
<ion-item>
<ion-button @click="router.push('/reserved')" class="button-native">
Reserved Books
</ion-button>
</ion-item>
</ion-list>
</ion-content>
</div>
</template>
<script lang="ts">
import {
IonContent,
IonHeader,
IonTitle,
IonToolbar,
IonList,
IonItem,
IonButton,
} from '@ionic/vue';
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import { person } from "ionicons/icons"
export default defineComponent({
name: 'MenuComponent',
components: {
IonContent,
IonHeader,
IonTitle,
IonToolbar,
IonList,
IonItem,
IonButton,
},
setup() {
const router = useRouter();
return { router, person };
},
});
</script>
<style scoped>
ion-icon {
font-size: 50px;
}
.menu-pages {
pointer-events: all;
}
</style>
This is my menu component, on my App.Vue I define the ion-router-outlet with id=“main-component”
I have the exact same problem. In my case, the side menu is programmed in a component called AppHeader, that has a property called “dialog” that allow me to use the component in both the main screens or in “dialog” auxiliary screens.
page-header.html
<ion-header mode="md" id="app-header">
<ion-toolbar color="{{color}}">
<ion-buttons slot="start">
<ion-back-button
defaultHref="home"
*ngIf="dialog && onbackbutton.observers.length == 0">
</ion-back-button>
<ion-button
*ngIf="dialog && onbackbutton.observers.length > 0"
(click)="back()">
<ion-icon slot="start" name="arrow-back"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>
<ion-row class="ion-align-items-center" *ngIf="!dialog">
<ion-col size="2">
<ion-img src="assets/Luna.logo.png" />
</ion-col>
<ion-col size="1" class="title-col">
<ion-label>{{title}}</ion-label>
</ion-col>
</ion-row>
<ion-label *ngIf="dialog">{{title}}</ion-label>
</ion-title>
<ion-buttons slot="end">
<ion-button aria-label="Favorite" *ngIf="refreshButton" (click)="onRefresh()">
<ion-icon name="reload" aria-hidden="true"></ion-icon>
</ion-button>
<ion-menu-button auto-hide="false" *ngIf="!dialog"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-menu contentId="app-header" side="end">
<ion-header >
<ion-toolbar color="primary">
<div class="logo ion-align-items-center">
<ion-img src="assets/Luna.logo.png"></ion-img>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<app-menu-option icon="information-circle" caption="Acerca de nosotros" (onclick)="about()"></app-menu-option>
<app-menu-option icon="bug" caption="Reportar un error" (onclick)="bugReport()"></app-menu-option>
<app-menu-option icon="accessibility" caption="UI Tests" (onclick)="uiTests()"></app-menu-option>
<app-menu-option icon="log-out" caption="Cerrar tu sesión" (onclick)="logout()"></app-menu-option>
</ion-content>
<ion-footer>
<ion-toolbar class="ion-text-center">
<ion-label color="secondary">Versión {{app.fullVersion}}</ion-label>
</ion-toolbar>
</ion-footer>
</ion-menu>
page-header.ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { AppService } from '../../services/app.service';
import { UIService } from '../../services/ui.service';
@Component({
selector: 'app-page-header',
templateUrl: './page-header.component.html',
styleUrls: ['./page-header.component.scss'],
})
export class PageHeaderComponent implements OnInit {
@Input() title: string;
@Input() dialog: boolean;
@Input() refreshButton = false;
@Output() onrefresh:EventEmitter<any> = new EventEmitter();
@Output() onbackbutton:EventEmitter<any> = new EventEmitter();
get color(): string
{
return (this.dialog) ? 'secondary' : 'primary';
}
constructor(
public app: AppService,
private ui: UIService
) {
this.title = "Luna Escorts";
this.dialog = false;
}
ngOnInit() {}
about() {
alert("About");
} // about
bugReport() {
alert("bugReport");
} // bugReport
async logout() {
const confirmed = await this.ui.presentConfirmDialog('Deseas cerrar tu sesión?','Si','No');
if (confirmed) {
this.app.logout();
}
} // logout
onRefresh() {
if (this.onrefresh.observers.length > 0) {
this.onrefresh.emit(null);
}
}
uiTests() {
this.app.navTo("/tests/ui");
}
back() {
console.log("[PageHeaderComponent][back()]", this.onbackbutton.observers.length);
if (this.onbackbutton.observers.length > 0) {
this.onbackbutton.emit(null);
}
}
}
When dialog=false, it looks like this:
When dialog=true, it looks like this:
to go back from a secondary screen (dialog=true) to the main screen (dialog=false), I use NavController:
this.navCtrl.back();
When I load the main screen, the menu button works perfectly and display the side menu:
but once I navigate to the secondary page and navs back to the main page, the menu button just won’t show anymore.
I am on Ionic 7.1.1, Angular 16.1.7, on browser mode.
I believe I found a solution.
In my case, because the side menu is included inside a custom header component, is being recreated in every page, regarding being used or not. When navigating back to the main page, the side menu from the previous page is still the last “side menu declared”, and therefore doesn’t work.
The trick for me was to use *ngIf on the ion-menu tag to only declare the side menu on the main page (dialog=false); this way when I call the secondary page, the side menu is not being redeclared and I when I nav back the last side menu declared is still the one on the main page, so the menu button works again.