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-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> -->
-      <tree-root [nodes]="nodes" [options]="options"></tree-root>
+      </ion-content>
     </ion-menu>
-    <ion-router-outlet id="main-content"></ion-router-outlet>
+
+    <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>
+</ion-app>