If you are tired of searching online for a simpe, straight forward way to add a side menu to an IONIC project. I wil show you how.
Step 1: Create a blank project (If you need to)
Step 2: app.Component.html
In app.Component.html I am adding the ion-menu component, when you first create a project, app.Component.html will look like this:
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
Change it to this to add the ion-menu code which includes all the necessary code
<ion-app>
<ion-menu menuId="main-manu" content-id="main" side="end">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
Menu 1
</ion-item>
<ion-item>
<ion-menu-toggle>
<ion-button color="danger">Close</ion-button>
</ion-menu-toggle>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main"></ion-router-outlet>
</ion-app>
Step 3. Open home.app.html and change the following header code:
<ion-header>
<ion-toolbar color="primary">
<ion-title>BLANK</ion-title>
<ion-buttons slot="end">
<ion-menu-button menu="main-manu"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
Step 4. Save your changes and see it in action.
Notice that the side menu is on the right side instead of the left side, this is done simply by changing side="end" to side="start" which is the default.
Hope that works.
This is not my video, but I found this video very helpful and straight forward to how to make a side menu in IONIC.