frontend/src/app/app.component.html

<ion-app class="dark">
  <ion-split-pane when="sm">
    <ion-menu class="sidebar">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <ion-list>
          <ion-list-header>
            Navigate
            <ion-buttons class="ion-padding-end">
              <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 style="color: #666;">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-buttons>
          </ion-list-header>

          <tree-root [nodes]="nodes" [options]="options"></tree-root>
        </ion-list>
      </ion-content>
      <ion-footer>
        <ion-item slot="end" lines="full">
          <ion-icon slot="start" name="moon"></ion-icon>
          <ion-label>
            Dark mode
          </ion-label>
          <ion-toggle (ionChange)="toggleDark()" id="themeToggle" slot="end"></ion-toggle>
        </ion-item>
      </ion-footer>
    </ion-menu>

    <div class="ion-page" main>
      <ion-header> </ion-header>
      <ion-content class="ion-padding">
        <ion-router-outlet id="main-content"></ion-router-outlet>
      </ion-content>
    </div>
  </ion-split-pane>
</ion-app>