Add logout button and display header on loading state

app/components/AppFooter.vue

@@ -4,7 +4,7 @@
         app
         color="secondary"
         height="30"
-        v-if="status === 'authenticated'"
+        v-if="status !== 'unauthenticated'"
     >
         <v-container class="text-caption text-center">
             © {{ new Date().getFullYear() }} SharedLists - All Rights Reserved

app/components/NavBar.vue

@@ -3,7 +3,7 @@
     <v-app-bar
         color="rgba(27, 94, 32, 0.8)"
         height="48"
-        v-if="status === 'authenticated'"
+        v-if="status !== 'unauthenticated'"
     >
         <!-- Title of the application with adjusted margin and font size -->
         <v-app-bar-title class="text-h6 ms-3 text-white">
@@ -18,6 +18,11 @@
         <v-spacer />
 
         <!-- Menu icons on the right side of the toolbar -->
+        <template v-slot:append>
+            <small class="text-white"> Logout </small>
+            <v-btn icon="mdi-account" class="text-white" @click="logout">
+            </v-btn>
+        </template>
     </v-app-bar>
 
     <v-navigation-drawer v-model="drawer" temporary>
@@ -47,8 +52,15 @@
 
 <script setup>
 import { ref, capitalize } from "vue";
+
 const drawer = ref(false);
-const { data, status } = useAuth();
+const { data, status, signOut } = useAuth();
+const systemStore = useSystemStore();
+
+const logout = async () => {
+    await systemStore.deleteCookies();
+    await signOut({ callbackUrl: "/login" });
+};
 </script>
 
 <style></style>