Ionic's Side Menu [ion-menu] Not Opening when clicking on the Menu button after navigating...

I'm very new to Ionic and I'm trying to develop an app that contains a side menu, for that I used the [ion-menu] element in my code:

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

I started my project from scrath I know there is a template for a side menu but I don't want all my pages to contain the Side Menu like in the template, since I just want a limited number of pages to use this same Side Menu, I created a component named side-nav and here is the code for that:

<ion-menu side="start" contentId="main-content">

<!-- Sidebar -->
<ion-header>
<ion-toolbar>
<ion-title>Sidebar</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
@for (p of sideMenuElements;track p; let i = $index){ <!-- Here I load routes to items -->
<ion-menu-toggle>
<ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" RouterLinkSelected="selected">
<ion-icon aria-hidden="true" slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label>{{p.nombre}}</ion-label>
</ion-item>
</ion-menu-toggle>
}
</ion-content>

</ion-menu>



With this Side Menu I can browse to different pages when clicking on an item.

I also created a component that manages the Header, here is the code

<ion-header>
<ion-toolbar>
<ion-title>{{nombre}}</ion-title>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button> <!-- **button that opens Side Menu** -->
</ion-buttons>
</ion-toolbar>
</ion-header>


So basically I have 2 components that I need to use on pages that use this SideMenu

1. SideMenu component
2. Header component - This component has the button that opens the SideMenu

Once I use this components on a page, It Works

<app-sidenav></app-sidenav>

<div class="ion-page" id="main-content" >
<app-header [nombre]="`Prueba`"></app-header>
<ion-content>
<p>Hola</p>
</ion-content>
</div>


It looks like in this picture A sample of how the Side Menu looks

However as soon as I change to a different page when clicking on an item in the Side Menu and try opening the Side Menu on that different page, the button stops working. If I try to drag the Side Menu from the border It opens, but when trying to use the button from the Header, it doesn't work, here is the sample code of the other website but i don't think the problem is there...

<app-sidenav></app-sidenav>
<div class="ion-page" id="main-content">
<app-header [nombre]="`Usuario`"></app-header>
<ion-content color="light">
<!-- ... -->
</ion-content>
</div>



If I refresh the page, the Side Menu works once again on this page, however if I change to any other page it stops working, and the cycle repeats.

I read some solutions some people say that in order for the Side Menu to work it has to verify the an id, id='main-Content', I still can't wrap my head around that and It confuses me, since the the element since the id is delcared in the div that wraps all the content I want inside it, I'm really having trouble figuring out how it works.

Also as I said I'm not trying to change the app component so that it contains the Side Menu and add the ID to the router outlet since I don't want all of my pages to have a Side Menu.

So, the question is, How can I make mide Side Menu button work even if I change to a different route..?

Thanks you for reading.

Continue reading...