Bug/general fixes (#450)

* Fix asset link

* remove unused var

* fix no meal-plan returned

* cleanup redundant code

* Fix dates off in UI

* quick set dark/light mode

* user image fixes

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/UI/Buttons/TheButton.vue

@@ -4,6 +4,7 @@
     :small="small"
     :x-small="xSmall"
     :loading="loading"
+    :disabled="disabled"
     @click="$emit('click')"
     :outlined="btnStyle.outlined"
     :text="btnStyle.text"
@@ -49,6 +50,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
     // Styles
     small: {
       type: Boolean,

frontend/src/components/UI/TheAppBar.vue

@@ -18,6 +18,9 @@
       </div>
 
       <v-spacer></v-spacer>
+      <v-btn icon class="mr-1" small @click="isDark = !isDark">
+        <v-icon v-text="isDark ? 'mdi-weather-night' : 'mdi-weather-sunny'"> </v-icon>
+      </v-btn>
       <div v-if="!isMobile" style="width: 350px;">
         <SearchBar :show-results="true" @selected="navigateFromSearch" :max-width="isMobile ? '100%' : '450px'" />
       </div>
@@ -67,12 +70,25 @@ export default {
     isMobile() {
       return this.$vuetify.breakpoint.name === "xs";
     },
+    isDark: {
+      get() {
+        return this.$store.getters.getIsDark;
+      },
+      set() {
+        let setVal = "dark";
+        if (this.isDark) {
+          setVal = "light";
+        }
+        this.$store.commit("setDarkMode", setVal);
+      },
+    },
   },
   methods: {
     navigateFromSearch(slug) {
       this.$router.push(`/recipe/${slug}`);
     },
     openSidebar() {
+      console.log(this.isDarkMode);
       this.$refs.theSidebar.toggleSidebar();
     },
   },

frontend/src/components/UI/TheSidebar.vue

@@ -2,19 +2,7 @@
   <div class="d-print-none no-print">
     <v-navigation-drawer v-model="showSidebar" width="180px" clipped app>
       <template v-slot:prepend>
-        <v-list-item two-line v-if="isLoggedIn" to="/admin/profile">
-          <v-list-item-avatar color="accent" class="white--text">
-            <img :src="userProfileImage" v-if="!hideImage" @error="hideImage = true" />
-            <div v-else>
-              {{ initials }}
-            </div>
-          </v-list-item-avatar>
-
-          <v-list-item-content>
-            <v-list-item-title> {{ user.fullName }}</v-list-item-title>
-            <v-list-item-subtitle> {{ user.admin ? $t("user.admin") : $t("user.user") }}</v-list-item-subtitle>
-          </v-list-item-content>
-        </v-list-item>
+        <UserAvatar v-if="isLoggedIn" :user="user" />
 
         <v-list-item dense v-if="isLoggedIn" :to="`/user/${user.id}/favorites`">
           <v-list-item-icon>
@@ -46,7 +34,7 @@
               mdi-heart
             </v-icon>
           </v-list-item-icon>
-          <v-list-item-title> {{$t('about.support')}} </v-list-item-title>
+          <v-list-item-title> {{ $t("about.support") }} </v-list-item-title>
         </v-list-item>
         <v-list-item to="/admin/about">
           <v-list-item-icon class="mr-3 pt-1">
@@ -78,10 +66,14 @@
 </template>
 
 <script>
+import UserAvatar from "@/components/User/UserAvatar";
 import { initials } from "@/mixins/initials";
 import { user } from "@/mixins/user";
 import axios from "axios";
 export default {
+  components: {
+    UserAvatar,
+  },
   mixins: [initials, user],
   data() {
     return {