Merge branch 'master' of ssh.dev.azure.com:v3/HackKu/HackKu%202020/frontend

src/app/app.component.html

@@ -1,6 +1,6 @@
 <ion-app>
   <ion-split-pane when="sm">
-    <ion-menu>
+    <ion-menu class="sidebar">
       <ion-header>
         <ion-toolbar color="primary">
           <ion-title>Menu</ion-title>
@@ -14,17 +14,17 @@
           </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-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>

src/app/app.component.scss

@@ -0,0 +1,3 @@
+.sidebar {
+  max-width: 20em !important;
+}

src/app/app.component.ts

@@ -26,6 +26,7 @@ export class AppComponent implements OnInit {
     }
   };
 
+  public darkMode = false;
   constructor(
     private platform: Platform,
     private splashScreen: SplashScreen,
@@ -48,4 +49,14 @@ export class AppComponent implements OnInit {
       this.splashScreen.hide();
     });
   }
+
+  toggleDark() {
+    this.darkMode = !this.darkMode;
+    console.log("toggel Dark mode");
+    if (this.darkMode) {
+      console.log("Dark Mode On");
+    } else {
+      console.log("Dark Mode Off");
+    }
+  }
 }

src/app/list/list.page.html

@@ -24,4 +24,4 @@
       You navigated here from <b>{{selectedItem.title }}</b>
     </div>
   -->
-</ion-content>
+</ion-content>