Menu enhancements

src/app/components/option-picker/option-picker.component.html

@@ -3,4 +3,12 @@
     <ion-icon slot="start" name="menu"></ion-icon>
     <ion-label>Export to HTML Site</ion-label>
   </ion-item>
+  <ion-item button (click)="onSelect('toggle_darkmode')">
+    <ion-icon slot="start" [name]="isDark() ? 'sun' : 'moon'"></ion-icon>
+    <ion-label>{{ isDark() ? 'To The Light!' : 'Go Dark...' }}</ion-label>
+  </ion-item>
+  <ion-item button (click)="onSelect('logout')">
+    <ion-icon slot="start" name="exit"></ion-icon>
+    <ion-label>Logout</ion-label>
+  </ion-item>
 </ion-list>

src/app/components/option-picker/option-picker.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
 import {ApiService} from '../../service/api.service';
 
@@ -8,9 +8,12 @@ import {ApiService} from '../../service/api.service';
   styleUrls: ['./option-picker.component.scss'],
 })
 export class OptionPickerComponent implements OnInit {
+  @Input() toggleDark: () => void;
+  @Input() isDark: () => boolean;
 
   constructor(
-      protected api: ApiService
+      protected api: ApiService,
+      protected router: Router,
   ) { }
 
   ngOnInit() {}
@@ -18,6 +21,10 @@ export class OptionPickerComponent implements OnInit {
   onSelect(key) {
     if ( key === 'html_export' ) {
       window.open(this.api._build_url('/data/export/html'), '_blank');
+    } else if ( key === 'logout' ) {
+      window.location.href = '/auth/logout';
+    } else if ( key === 'toggle_darkmode' ) {
+      this.toggleDark();
     }
   }
 }