From e582a1ab4173c466ad48f6ffa3100e05567521d8 Mon Sep 17 00:00:00 2001
From: Rakantor <rakantor.dev@gmail.com>
Date: Wed, 19 Oct 2022 21:08:52 +0200
Subject: [PATCH] Add logout button to app bar

---
 layouts/default.vue | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 533e96c..0a6cdef 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -2,11 +2,13 @@
   <v-app dark>
     <v-app-bar fixed app>
       <v-toolbar-title v-text="title" />
+      <v-spacer />
+      <v-btn v-if="loggedIn" icon color="primary" @click="logout">
+        <v-icon>mdi-logout-variant</v-icon>
+      </v-btn>
     </v-app-bar>
     <v-main>
-      <v-container fill-height>
-        <Nuxt />
-      </v-container>
+      <Nuxt />
     </v-main>
     <v-footer :absolute="!fixed" app>
       <span>&copy; {{ new Date().getFullYear() }}</span>
@@ -16,6 +18,8 @@
 </template>
 
 <script>
+import { signOut } from 'firebase/auth'
+
 export default {
   name: 'DefaultLayout',
   data() {
@@ -23,6 +27,23 @@ export default {
       fixed: false,
       title: 'IU Quiz App',
     }
+  },
+  computed: {
+    loggedIn () {
+      return this.$store.state.userLoggedIn
+    }
+  },
+  methods: {
+    logout () {
+      signOut(this.$auth).then(() => {
+        // Sign-out successful
+        // The authentication state observer will redirect the user to the main page (dashboard),
+        // see pages/index.vue
+      }).catch((error) => {
+        // An error happened.
+        this.$toast({ content: error, color: 'error' })
+      })
+    }
   }
 }
 </script>