flushed out the menue a bit, added the first part of the dark theme

src/app/app.component.html

@@ -1,25 +1,37 @@
 <ion-app>
-  <ion-split-pane contentId="main-content">
-    <ion-menu contentId="main-content" type="overlay">
-      <!-- <ion-header>
-        <ion-toolbar>
+  <ion-split-pane when="sm">
+    <ion-menu>
+      <ion-header>
+        <ion-toolbar color="primary">
           <ion-title>Menu</ion-title>
         </ion-toolbar>
       </ion-header>
+
       <ion-content>
         <ion-list>
-          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
-            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
-              <ion-icon slot="start" [name]="p.icon"></ion-icon>
-              <ion-label>
-                {{p.title}}
-              </ion-label>
-            </ion-item>
-          </ion-menu-toggle>
-        </ion-list>
-      </ion-content> -->
+          <ion-list-header>
+            Navigate
+          </ion-list-header>
+
           <tree-root [nodes]="nodes" [options]="options"></tree-root>
+
+          <ion-item lines="full">
+            <ion-icon slot="start" name="moon"></ion-icon>
+            <ion-label>
+              Toggle Dark Theme
+            </ion-label>
+            <ion-toggle id="themeToggle" slot="end"></ion-toggle>
+          </ion-item>
+
+        </ion-list>
+      </ion-content>
     </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>

src/app/app.component.ts

@@ -3,6 +3,7 @@ import { Component } from "@angular/core";
 import { Platform } from "@ionic/angular";
 import { SplashScreen } from "@ionic-native/splash-screen/ngx";
 import { StatusBar } from "@ionic-native/status-bar/ngx";
+import { ApiService } from "./service/api.service";
 
 @Component({
   selector: "app-root",
@@ -28,37 +29,23 @@ export class AppComponent {
     }
   ];
 
-  public nodes = [
-    {
-      id: 1,
-      name: "root1",
-      children: [
-        { id: 2, name: "child1" },
-        { id: 3, name: "child2" }
-      ]
-    },
-    {
-      id: 4,
-      name: "root2",
-      children: [
-        { id: 5, name: "child2.1" },
-        {
-          id: 6,
-          name: "child2.2",
-          children: [{ id: 7, name: "subsub" }]
-        }
-      ]
-    }
-  ];
+  public nodes = [];
 
   constructor(
     private platform: Platform,
     private splashScreen: SplashScreen,
-    private statusBar: StatusBar
+    private statusBar: StatusBar,
+    private api: ApiService
   ) {
     this.initializeApp();
   }
 
+  ionViewDidEnter() {
+    this.api.get("/menu/items").subscribe(result => {
+      this.nodes = result.data;
+    });
+  }
+
   initializeApp() {
     this.platform.ready().then(() => {
       this.statusBar.styleDefault();

src/app/pages/editor/editor.page.html

@@ -1,5 +1,12 @@
 <ion-header>
   <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-toggle>
+        <ion-button>
+          <ion-icon slot="icon-only" name="menu"></ion-icon>
+        </ion-button>
+      </ion-menu-toggle>
+    </ion-buttons>
     <ion-title contenteditable="true" #titleBar>{{ pageRecord.Name }}</ion-title>
   </ion-toolbar>
 </ion-header>
@@ -8,13 +15,9 @@
   <ng-container>
     <div class="editor-root ion-padding">
       <div class="host-container ion-padding">
-        <editor-host
-          #editorHosts
-          *ngFor="let record of hostRecords"
-          [(record)]="record"
-          (newHostRequested)="onNewHostRequested($event)"
-          (destroyHostRequested)="onDestroyHostRequested($event)"
-        ></editor-host>
+        <editor-host #editorHosts *ngFor="let record of hostRecords" [(record)]="record"
+          (newHostRequested)="onNewHostRequested($event)" (destroyHostRequested)="onDestroyHostRequested($event)">
+        </editor-host>
       </div>
     </div>
     <div class="editor-buttons">