feat(User): Add Logout

components/Header.vue

@@ -23,7 +23,7 @@ const links = [{
 
     <template #right>
       <UColorModeButton />
-      <UButton to="#" target="_blank" icon="i-heroicons-user-solid" color="gray" variant="ghost" />
+      <UserDropdown />
     </template>
 
     <template #panel>

components/UserDropdown.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const links = [{
+  label: 'Logout',
+  to: '/logout',
+  icon: 'i-heroicons-arrow-left-on-rectangle',
+}]
+</script>
+
+<template>
+  <UPopover>
+    <UButton icon="i-heroicons-user-solid" color="gray" variant="ghost" />
+    <template #panel>
+      <div class="p-4">
+        <UNavigationLinks :links="links" />
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<style scoped>
+
+</style>

pages/logout/index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts">
+definePageMeta({ middleware: ['auth'] })
+const { logout } = useAuth()
+logout()
+</script>