From ccc2eda305f5a91a804dd8116e3cd9085e325d5b Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Thu, 25 Feb 2021 20:20:26 -0900
Subject: [PATCH] fix admin sidebar

---
 .../src/components/Admin/AdminSidebar.vue     | 20 +++++++++++++++----
 .../components/Recipe/MobileRecipeCard.vue    |  2 +-
 frontend/src/pages/Admin/Profile/index.vue    |  1 -
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Admin/AdminSidebar.vue b/frontend/src/components/Admin/AdminSidebar.vue
index e1799ef8d..c4fbee3af 100644
--- a/frontend/src/components/Admin/AdminSidebar.vue
+++ b/frontend/src/components/Admin/AdminSidebar.vue
@@ -22,8 +22,15 @@
     >
       <template v-slot:prepend>
         <v-list-item two-line>
-          <v-list-item-avatar>
-            <img src="https://randomuser.me/api/portraits/women/81.jpg" />
+          <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>
@@ -70,9 +77,14 @@
 </template>
 
 <script>
+import { validators } from "@/mixins/validators";
+import { initials } from "@/mixins/initials";
+import { user } from "@/mixins/user";
 export default {
+  mixins: [validators, initials, user],
   data() {
     return {
+      hideImage: false,
       showSidebar: false,
       mobile: false,
       links: [],
@@ -123,8 +135,8 @@ export default {
   },
 
   computed: {
-    user() {
-      return this.$store.getters.getUserData;
+    userProfileImage() {
+      return `api/users/${this.user.id}/image`;
     },
   },
 
diff --git a/frontend/src/components/Recipe/MobileRecipeCard.vue b/frontend/src/components/Recipe/MobileRecipeCard.vue
index 8d8d7c9c9..9c4465a07 100644
--- a/frontend/src/components/Recipe/MobileRecipeCard.vue
+++ b/frontend/src/components/Recipe/MobileRecipeCard.vue
@@ -5,7 +5,7 @@
         <v-img :src="getImage(image)"> </v-img>
       </v-list-item-avatar>
       <v-list-item-content>
-        <v-list-item-title >
+        <v-list-item-title>
           {{ name }}
         </v-list-item-title>
         <v-rating length="5" size="16" dense :value="rating"></v-rating>
diff --git a/frontend/src/pages/Admin/Profile/index.vue b/frontend/src/pages/Admin/Profile/index.vue
index 1f2637722..1a8b73ef5 100644
--- a/frontend/src/pages/Admin/Profile/index.vue
+++ b/frontend/src/pages/Admin/Profile/index.vue
@@ -24,7 +24,6 @@
               <v-avatar
                 color="accent"
                 size="120"
-                v-if="!loading"
                 class="white--text headline mr-2"
               >
                 <img