From 129da829e75af7f3530ab01ea39b22b343b4df93 Mon Sep 17 00:00:00 2001
From: clonbg <clonbg@gmail.com>
Date: Mon, 11 Aug 2025 18:32:52 +0200
Subject: [PATCH] Add logout functionality and display user email in nav bar

---
 app/components/NavBar.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/components/NavBar.vue b/app/components/NavBar.vue
index e0c7ff1..4891381 100644
--- a/app/components/NavBar.vue
+++ b/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>