Add logout functionality and display user email in nav bar

app/components/NavBar.vue

@@ -9,13 +9,18 @@
         <v-app-bar-title class="text-h6 ms-3 text-white">
             <v-icon icon="mdi-apps" @click="drawer = !drawer"></v-icon>
 
-            <span class="ms-1 text-white">Listas de Front</span>
+            <span class="ms-1 text-white">{{ data.email }}</span>
         </v-app-bar-title>
 
         <!-- Spacer to push the following elements to the right -->
         <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>
@@ -56,10 +61,16 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-const { status } = useAuth();
+import { ref, onMounted } from "vue";
+const { status, data, signOut } = useAuth();
+const systemStore = useSystemStore();
 // Drawer state to open/close the navigation drawer
 const drawer = ref(false);
+
+const logout = async () => {
+    await systemStore.deleteCookies();
+    await signOut({ callbackUrl: "/login" });
+};
 </script>
 
 <style></style>