<ion-header>
  <ion-toolbar class="header-toolbar">
    <ion-title color="light">{{headerTitle}}</ion-title>
    <ion-buttons slot="start">
      <nav-buttons backLink=""></nav-buttons>
      </ion-buttons>
  </ion-toolbar>
</ion-header>




<ion-content padding>

  <ion-list>
    <ion-item lines="none" class="custCollabs ion-item-styling" *ngFor="let menuItem of menu;  let i=index"
      (click)="openPage(menuItem, i);">
      <ion-row>
        <!-- Parent Pages  -->
        <ion-col size="12" class="menu-name">
          <div [ngClass]="{'selectedDiv': selectedMenu == i,'notSelected': selectedMenu != i }">
            <ion-text>
              <b>{{menuItem.PROMPT}}</b>
              
            </ion-text>
          </div>
          <!-- Child Pages  -->
          <ion-list [hidden]="selectedMenu != i">
            <ion-item lines="none" class="childItem" *ngFor="let subPage of menuItem.children;let i2=index" text-wrap
              (click)="openPage(subPage)">
              <ion-row>
                <ion-col size="12"  class="menu-name"><span ion-text color="color2">&nbsp;{{subPage.PROMPT}}</span>
                </ion-col>
              </ion-row>
            </ion-item>
          </ion-list>
        </ion-col>
      </ion-row>
      <ion-icon [name]="selectedMenu == i? 'ios-arrow-down' : 'ios-arrow-forward'"
                *ngIf="menuItem.children && menuItem.MENU_ENTRY_TYPE=='MENU'" slot="end" class="arrow-down"></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>