Source: https://www.youtube.com/watch?

v=_yFoStldYLI

1. ionic start sidemenu blank --type=angular

2. cd sidemenu
3. Create pages in menus folder

ionic g page menus/menu #menu template

ionic g page menus/main #single page

ionic g page menus/ionic #child page

ionic g page menus/flutter #child page

SIDEMENU
 4. Update app-routing.module.ts

import { NgModule } from '@angular/core';

import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [

  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m =>
m.HomePageModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'menu',
    loadChildren: () => import('./menus/menu/menu.module').then( m =>
m.MenuPageModule)
  }
  // {
  //   path: 'main',
  //   loadChildren: () => import('./menus/main/main.module').then( m =>
m.MainPageModule)
  // },
  // {
  //   path: 'ionic',
  //   loadChildren: () => import('./menus/ionic/ionic.module').then( m =>
m.IonicPageModule)
  // },
  // {
  //   path: 'flutter',
  //   loadChildren: () => import('./menus/flutter/flutter.module').then( m =>
m.FlutterPageModule)
  // },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

We will use later the children path that have been commented (see green color with comments //)
(main,ionic and flutter) later.
 5. Create a button at home page

6. Update home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  <div id="container">
    <ion-button color="warning"  (click)="menupage()">Go to Menu Page</ion-
button> </div>
</ion-content>

7. Update home.page.ts

import { Component } from '@angular/core';

import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private route: Router) {}
  menupage() {
    this.route.navigate(['/menu']);
  }
}
We will create a menu like this
 8. Update menu-routing.module.ts

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

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

const routes: Routes = [

  {
    path: '',
    redirectTo: 'main',
    pathMatch: 'full'

  },
  {
    path: '',
    component: MenuPage,
    children: [
      {
        path: 'main',
        loadChildren: () => import('../main/main.module').then( m =>
m.MainPageModule)
      },
      {
        path: 'ionic',
        loadChildren: () => import('../ionic/ionic.module').then( m =>
m.IonicPageModule)
      },
      {
        path: 'flutter',
        loadChildren: () => import('../flutter/flutter.module').then( m =>
m.FlutterPageModule)
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class MenuPageRoutingModule {}

You may copy the path codes from the app-rounting.module.ts

 9. Update menu.page.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.page.html',
  styleUrls: ['./menu.page.scss'],
})
export class MenuPage implements OnInit {

  pages = [
    {
      title: 'Main',
      url: '/menu/main',
      icon: 'home'
    },
    {
      title: 'Tambahan Menu',
      url: 'abc',
      icon: 'pencil'
    },
    {
      title: 'Cool Frameworks',
      children : [
        {
          title: 'Ionic',
          url: '/menu/ionic',
          icon: 'logo-ionic'
        },
        {
          title: 'Flutter',
          url: '/menu/flutter',
          icon: 'logo-google'
        }
      ]
    }
  ];

  constructor() { }

  ngOnInit() {
  }
}
 10. Update menu.page.html

<ion-menu contentId="content">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
  <div *ngFor="let p of pages">
    <ion-menu-toggle *ngIf="p.url">
      <ion-item [routerLink] = "p.url" routerDirection="root"
routerLinkActive="active">
        <ion-icon [name]= "p.icon" slot="start">  </ion-icon>
          <ion-label>
          {{ p.title }}
          </ion-label>
      </ion-item>
    </ion-menu-toggle>
    <ion-item button *ngIf="p.children?.length >0" (click) = "p.open = !
p.open" [class.active-parent] = "p.open" detail="false">
      <ion-icon slot = "start" name="arrow-forward" *ngIf="!p.open"></ion-
icon>
      <ion-icon slot = "start" name="arrow-down" *ngIf="p.open"></ion-icon>
      <ion-label>{{p.title}}</ion-label>
    </ion-item>
    <ion-list *ngIf="p.open">
      <ion-menu-toggle>
        <ion-item *ngFor="let sub of p.children" [routerLink] = "sub.url"
routerDirection="root" routerLinkActive="active">
          <ion-icon [name]= "sub.icon" slot="start">    </ion-icon>
            <ion-label>
              {{sub.title}}
            </ion-label>

        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </div>
  </ion-content>
</ion-menu>
<ion-router-outlet id="content"></ion-router-outlet>
 11. Update main.page.html, ionic.page.html and flutter.page.html by adding the ion-menu-button

main.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>main</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

flutter.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>flutter</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

ionic.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>ionic</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>