sidebar second level menu using ionic and typescript

I'm new to using ionic and I need your help :(, I have homework at school, I need to make a menu with ionic and typescript, I know how to make a normal menu but for example, in the settings option I have other options but I want them to appear in the menu but separately , I don't know if I'm explaining myself well but I'm adding this image as an example, the other options should appear in the same place in the main menu

if I click on the settings option, the "new menu" appears with the options that have settings

here is my code: //app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
  },
  {
    path: 'profile',
    loadChildren: () => import('./modules/profile/profile.module').then(m => m.ProfileModule)
  },
  {
    path: 'settings',
    loadChildren: () => import('./modules/settings/settings.module').then(m => m.SettingsModule)
  },
  {
    path: '**',
    redirectTo: 'login',
    pathMatch: 'full'
  }
]

// app.component.html

<ion-app>
  <ion-split-pane contentId="maincontent" [when]="showSplitPane && false">
    <ion-menu swipe-gesture="false" contentId="maincontent" id="mainmenu" menuId="mainmenu" type="overlay">
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index; let l = last; let f = first">
            <ion-item (click)="selectedIndex = i" routerDirection="root" (click)="navigate(p.url)" lines="none"
              detail="false" [color]="p.color" [class]="{'ion-margin-vertical': !l && ! f}">
              <ion-icon *ngIf="p.icon" slot="start" [icon]="p.icon"></ion-icon>
              <ion-icon *ngIf="p.image" slot="start" [icon]="p.image"></ion-icon>
              <ion-label class="lighter" [class.bold]="selectedIndex == i">{{ p.title }}</ion-label>
              <ion-icon class="ion-no-margin" icon="chevron-forward-sharp" color="black"></ion-icon>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="maincontent" maincontent></ion-router-outlet>
  </ion-split-pane>
</ion-app>