topbar router

src/components/topbar.vue

@@ -1,24 +1,28 @@
 <template>
     <div class="topbar">
         <div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
-        <div class="name">Meine Website</div>
+        <div class="name">{{ appName }}</div>
 
         <!-- User Profile -->
         <div class="user_profile" ref="user_profile">
             <a class="trigger" @click.prevent="toggleMenu">
                 <div class="image"><i class="icon icon-user" aria-hidden="true"></i></div>
-                <div class="text"> {{ login.Company }} <div class="role">Administrator</div></div>
+                <div class="text"> {{ loginDisplay }} <div class="role"> {{ loginType }}</div></div>
                 <div class="trigger_btn"><i class="icon icon-arrow-down" aria-hidden="true"></i></div>
             </a>
             <nav class="user_menu">
                 <ul>
                     <li><a href="#">
                         <i class="icon icon-color-wand" aria-hidden="true"></i>
-                        <div class="title">Profil anpassen</div>
+                        <div class="title">
+                            <router-link :to="'/users/' + loginID">Profil anpassen</router-link>
+                        </div>
                     </a></li>
                     <li><a href="#">
                         <i class="icon icon-log-out" aria-hidden="true"></i>
-                        <div class="title">Logout</div>
+                        <div class="title">
+                            <router-link to="/logout">Logout</router-link>
+                        </div>
                     </a></li>
                 </ul>
             </nav>
@@ -31,7 +35,33 @@ export default {
     name: "Topbar",
     data() {
         return {
-            login: this.$store.state.persist.login
+        }
+    },
+    computed: {
+        loginDisplay() {
+            let l = this.$store.state.persist.login;
+            if (l.Company) {
+                return l.Company;
+            } else if (l.Lastname || l.Firstname) {
+                return l.Firstname + l.Lastname;
+            }
+            return l.Username;
+        },
+        loginType() {
+            switch (this.$store.state.persist.login.Type) {
+            case 0:
+                return 'Administrator';
+            case 1:
+                return 'Reseller';
+            case 2:
+                return 'Kundenzugang';
+            }
+        },
+        loginID() {
+            return this.$store.state.persist.login.ID;
+        },
+        appName() {
+            return "Meine App";
         }
     },
     methods: {