ayanova/devdocs/todo.txt

@@ -7,6 +7,7 @@ PRIORITY - ALWAYS Lowest level stuff first, i.e. TODO at server, api route chang
 todo: dark mode / nav append slot logout notify??
 	move out of user settings into bottom of nav panel maybe like the vuetify website shows
 	dark mode primary too bright?
+	
 todo: Backup, probably need to add option "Do not backup automatically"
 	or something to that effect for scenarios where the built in backup won't be used / won't work
 	rather than a boot environment option I'm thinking a configuration in backupsettings option so it's visible in UI

ayanova/src/api/gzmenu.js

@@ -230,6 +230,25 @@ export default {
     }
   },
   ///////////////////////////////
+  // CHANGE ICON HANDLER
+  // Change icon dymanically
+  // (note, can pass null for new icon to clear it)
+  //
+  handleChangeMenuItemIcon(vm, key, newIcon) {
+    if (!vm.appBar.menuItems || !key) {
+      return;
+    }
+
+    //Find the menu item and change it's icon
+    for (let i = 0; i < vm.appBar.menuItems.length; i++) {
+      let menuItem = vm.appBar.menuItems[i];
+      if (menuItem.key == key) {
+        vm.$set(vm.appBar.menuItems[i], "icon", newIcon);
+        return;
+      }
+    }
+  },
+  ///////////////////////////////
   // APP (GLOBAL) CLICK HANDLER
   //
   // Deal with a menu change request
@@ -349,6 +368,13 @@ export default {
       self.handleDisableMenuItem(vm, key, false);
     });
 
+    window.$gz.eventBus.$on(
+      "menu-change-item-icon",
+      function handleChangeMenuItemIcon(key, newIcon) {
+        self.handleChangeMenuItemIcon(vm, key, newIcon);
+      }
+    );
+
     window.$gz.eventBus.$on("menu-click", function handleMenuClick(menuitem) {
       self.handleAppClick(vm, menuitem);
     });

ayanova/src/api/initialize.js

@@ -734,9 +734,6 @@ function initNavPanel() {
     );
     window.$gz.store.commit("setHomePage", "/ay-evaluate");
   }
-
-  // //*** LOGOUT - all users
-  // addNavItem("Logout", "fa-sign-out-alt", "/login", [], key++, "logout");
 }
 
 async function getUserOptions() {

ayanova/src/views/home-user-settings.vue

@@ -84,13 +84,7 @@
               @input="fieldValueChanged('timeZoneOverride')"
             ></v-text-field>
           </v-col>
-          <v-col cols="12" sm="6" lg="4" xl="3">
-            <v-checkbox
-              v-model="darkMode"
-              :label="$ay.t('DarkMode')"
-              @change="darkModeChanged()"
-            ></v-checkbox>
-          </v-col>
+
           <v-col cols="12" sm="6" lg="4" xl="3">
             <!-- https://vuetifyjs.com/en/components/color-pickers -->
             <span class="v-label v-label--active theme--light">
@@ -235,8 +229,15 @@ export default {
       return window.$gz.form;
     },
     darkModeChanged() {
-      this.$store.commit("setDarkMode", this.darkMode);
-      this.$vuetify.theme.dark = this.darkMode;
+      let vm = this;
+      vm.darkMode = !vm.darkMode;
+      vm.$store.commit("setDarkMode", vm.darkMode);
+      vm.$vuetify.theme.dark = vm.darkMode;
+      window.$gz.eventBus.$emit(
+        "menu-change-item-icon",
+        FORM_KEY + ":darkmode",
+        vm.darkMode ? "fa-sun" : "fa-moon"
+      );
     },
     fieldValueChanged(ref) {
       if (!this.formState.loading && !this.formState.readOnly) {
@@ -365,6 +366,9 @@ function clickHandler(menuItem) {
       case "save":
         m.vm.submit();
         break;
+      case "darkmode":
+        m.vm.darkModeChanged();
+        break;
 
       default:
         window.$gz.eventBus.$emit(
@@ -400,6 +404,14 @@ function generateMenu(vm) {
     });
   }
 
+  menuOptions.menuItems.push({
+    title: "DarkMode",
+    icon: vm.darkMode ? "fa-sun" : "fa-moon",
+    surface: true,
+    key: FORM_KEY + ":darkmode",
+    vm: vm
+  });
+
   //change password and login
   menuOptions.menuItems.push({
     title: "SetLoginPassword",