Implemented login/logout

src/components/Navbar.vue

@@ -16,20 +16,55 @@
         <b-nav-item to="/about">About</b-nav-item>
       </b-navbar-nav>
 
+
       <b-navbar-nav class="ml-auto" v-if="$store.getters.isLoggedIn">
-        <b-nav-item-dropdown :text="$store.state.userdata.name" right>
-          <b-dropdown-text>Lorem Ipsum dolor sit amaet</b-dropdown-text>
-          <b-dropdown-item href="#">Logout</b-dropdown-item>
+        <b-nav-item-dropdown right no-caret>
+          <template #button-content>
+            <b-icon icon="person-fill"/>
+            {{ $store.state.userdata.name }}
+          </template>
+          <b-overlay :show="logoutProcessing">
+
+            <b-dropdown-text>Logged in to...</b-dropdown-text>
+            <b-dropdown-text>
+              <b-img src="@/assets/musicbrainz.svg" width="200px"/>
+            </b-dropdown-text>
+            <b-dropdown-divider></b-dropdown-divider>
+            <b-dropdown-item @click="performLogout">Logout</b-dropdown-item>
+
+          </b-overlay>
         </b-nav-item-dropdown>
       </b-navbar-nav>
 
+
     </b-collapse>
   </b-navbar>
 </template>
 
 <script>
 export default {
-  name: "Navbar"
+  name: "Navbar",
+  data() {
+    return {
+      logoutProcessing: false
+    }
+  },
+  methods: {
+    performLogout() {
+      this.logoutProcessing = true;
+      this.$api.performLogout().then(() => {
+        this.$store.dispatch('storeUserData', null).then(() => {
+          this.$router.push('/login').catch(() => {
+          });
+
+          this.logoutProcessing = false;
+        })
+      }).catch(({text}) => {
+        this.$showToast(text);
+        this.logoutProcessing = false;
+      });
+    }
+  }
 }
 </script>