frontend/src/app/app.component.html

<ion-app class="dark">
  <ion-split-pane contentId="main-content" *ngIf="ready$ | async">
    <ion-menu class="sidebar" contentId="main-content" content="content" type="push" side="start">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title style="font-weight: bold; color: white;">{{ appName }}
            <ion-menu-toggle menu="first" autoHide="false"></ion-menu-toggle>
          </ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-list-header>
            <ion-buttons>
              <ion-button fill="outline" [color]="refreshingMenu ? 'success' : 'light'" (click)="onMenuRefresh()">
                <ion-icon color="tertiary" name="refresh"></ion-icon>
              </ion-button>
              <ion-button fill="outline" color="light" (click)="onTopLevelCreate()">
                <ion-icon color="primary" name="add-circle"></ion-icon>
              </ion-button>
              <ion-button fill="outline" color="light" (click)="onChildCreate()" [disabled]="!addChildTarget">
                <ion-icon color="primary" name="add-circle"></ion-icon>&nbsp;<span class="button-text">Child</span>
              </ion-button>
              <ion-button fill="outline" color="light" (click)="onDeleteClick()" [disabled]="!deleteTarget">
                <ion-icon color="danger" name="trash"></ion-icon>
              </ion-button>
              <ion-button fill="outline" color="light" (click)="onNodeMenuClick($event)" [disabled]="!menuTarget">
                <ion-icon color="dark" name="more"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-list-header>

          <tree-root style="font-size: 15px;" #menuTree [nodes]="nodes" [options]="options"></tree-root>
        </ion-list>
      </ion-content>
      <ion-footer>
        <ion-searchbar placeholder="Filter pages..." (ionChange)="onFilterChange($event)"></ion-searchbar>
        <ion-item button lines="full" (click)="showOptions($event)">
          <ion-icon name="list" slot="start"></ion-icon>
          <ion-label>Menu</ion-label>
        </ion-item>
      </ion-footer>
    </ion-menu>

    <ion-router-outlet id="main-content" #content main></ion-router-outlet>
  </ion-split-pane>
</ion-app>