fix: No token refresh or revocation mechanism~

vigilcare-dashboard/src/components/layout/MobileNav.vue

@@ -2,8 +2,10 @@
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useRoleAccess } from '@/composables/roleAccess'
+import { useAuthStore } from '@/stores/auth'
 
 const route = useRoute()
+const authStore = useAuthStore()
 const { mobileNavLinks } = useRoleAccess()
 
 const activePath = computed(() => route.path)
@@ -86,6 +88,18 @@ const activePath = computed(() => route.path)
           {{ link.label }}
         </RouterLink>
       </li>
+      <li class="flex-1">
+        <button
+          type="button"
+          class="flex h-full w-full flex-col items-center justify-center gap-2 px-4 py-2 text-xs font-medium text-gray-500 transition duration-200 hover:text-red-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-500 dark:text-gray-400 dark:hover:text-red-400"
+          @click="authStore.logout()"
+        >
+          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+          </svg>
+          Sign out
+        </button>
+      </li>
     </ul>
   </nav>
 </template>