From 5892921a7cea6b9c17f3143ea823ef35d5ee3695 Mon Sep 17 00:00:00 2001
From: Flycro <flycro@live.de>
Date: Fri, 10 Nov 2023 15:51:47 +0100
Subject: [PATCH] feat(User): Add Logout

---
 components/Header.vue       |  2 +-
 components/UserDropdown.vue | 22 ++++++++++++++++++++++
 pages/logout/index.vue      |  5 +++++
 3 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 components/UserDropdown.vue
 create mode 100644 pages/logout/index.vue

diff --git a/components/Header.vue b/components/Header.vue
index df29581..95bf499 100644
--- a/components/Header.vue
+++ b/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>
diff --git a/components/UserDropdown.vue b/components/UserDropdown.vue
new file mode 100644
index 0000000..57ac367
--- /dev/null
+++ b/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>
diff --git a/pages/logout/index.vue b/pages/logout/index.vue
new file mode 100644
index 0000000..0a6e1be
--- /dev/null
+++ b/pages/logout/index.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts">
+definePageMeta({ middleware: ['auth'] })
+const { logout } = useAuth()
+logout()
+</script>