新增 頭像改變

database/seeders/DatabaseSeeder.php

@@ -17,7 +17,7 @@ class DatabaseSeeder extends Seeder
     public function run()
     {
 
-        User::factory(3)->create();
+        User::factory(1)->create();
         User::insert([
             [
                 'name' => 'kevin',

resources/js/src/layouts/components/Navbar.vue

@@ -20,13 +20,12 @@
                 <template #button-content>
                     <div class="d-sm-flex d-none user-nav">
                         <p class="user-name font-weight-bolder mb-0">
-                            {{ getName() }}
+                            {{ userDetails.name }}
                         </p>
-                        <span class="user-status">{{ getAbility() }}</span>
+                        <span class="user-status">{{ userDetails.ability }}</span>
                     </div>
-                    <b-avatar size="40" variant="light-primary" badge
-                        :src="require('@/assets/images/avatars/1-small.png')" class="badge-minimal"
-                        badge-variant="success" />
+                    <b-avatar size="40" variant="light-primary" badge :src="userAvater"
+                        class="badge-minimal" badge-variant="success" />
                 </template>
 
                 <div v-if="isLogin()">
@@ -93,28 +92,29 @@ export default {
         // Navbar Components
         DarkToggler,
     },
+    data() {
+        return {
+            userDetails: {},
+            userAvater: '',
+        }
+    },
     props: {
         toggleVerticalMenuActive: {
             type: Function,
             default: () => { },
         },
     },
+    created() {
+        if (JSON.parse(localStorage.getItem("userData"))) {
+            this.userDetails = JSON.parse(localStorage.getItem("userData"));
+            this.userAvater = require('@/assets/images/avatars/' + this.userDetails.id + '-small.png')
+        } else {
+            this.userDetails = { name: '訪客帳號', ability: 'guest' };
+            this.userAvater = null;
+        }
+        
+    },
     methods: {
-        getName() {
-            if (JSON.parse(localStorage.getItem("userData"))) {
-                return JSON.parse(localStorage.getItem("userData")).name;
-            }
-            return "訪客帳號";
-        },
-        getEmail() {
-            return JSON.parse(localStorage.getItem("userData")).email;
-        },
-        getAbility() {
-            if (JSON.parse(localStorage.getItem("userData"))) {
-                return JSON.parse(localStorage.getItem("userData")).ability;
-            }
-            return "guest";
-        },
         logout() {
             useJwt
                 .logout()