//app.html----
<ion-menu [content]="content" persistent="true" id="menu1">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div style="height:100%;">
<div style="height:20%;">
<ion-thumbnail class='mtitle' item-start style="z-index:999999;margin-top: 5%; height:120px;width:100%;">
<img src="./assets/imgs/eliteadmin-logo.png" style="height: 100%;width: 100%;">
</ion-thumbnail>
</div>
<div style="height:80%;margin-top: 10%;background: #1370a7;">
<ion-list style="background: #1370a7;margin:0;">
<button style="background: transparent;color: #fff;" menuClose ion-item *ngFor="let p of mainmenus" (click)="openPage(p)">
{{p.title}}
<!-- <ion-icon name="ios-arrow-forward" style="color:#fff;font-size: 2rem;" item-right></ion-icon> -->
</button>
</ion-list>
<ion-list style="background: #1370a7;margin:0;">
<ion-item text-wrap (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}" style="margin: 0;color: #fff;background-color: transparent;padding-right: 0px;">
<ion-row style="border-top: 1px solid;">
<ion-col col-11 style="line-height: 2;font-size: 16px;">Master</ion-col>
<ion-col col-1 *ngIf="sublevel" style="line-height: 2.5;"><ion-icon color="success" style="margin-top: 0px;font-size: 2rem;" item-right [name]="isGroupShown(i) ? 'ios-arrow-down-outline' : 'ios-arrow-forward'"></ion-icon></ion-col>
</ion-row>
<ion-row *ngIf="isGroupShown(i)">
<ion-list style="background: #1370a7;width: 100%;">
<button style="background: transparent;color: #fff;" menuClose ion-item *ngFor="let p of submenus" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-row>
</ion-item>
</ion-list>
</div>
</div>
</ion-content>
</ion-menu>
//app_component.ts--------
variables-
submenus: Array<{title: string, component: any}>;
mainmenus: Array<{title: string, component: any}>;
shownGroup = null;
in constructor -
this.mainmenus = [
//main menu-list
];
this.submenus = [
//child menu-list
]