From e4d57ae7bfb82968b35eaf494d34e0f0af6ecf82 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Sun, 18 Aug 2024 00:49:43 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Move=20sign=20out=20to=20setting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix #1
---
 components/AppMenu.vue | 34 ++++++++--------------------------
 pages/settings.vue     | 19 +++++++++++++++++++
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/components/AppMenu.vue b/components/AppMenu.vue
index e403941..d20aafe 100644
--- a/components/AppMenu.vue
+++ b/components/AppMenu.vue
@@ -8,42 +8,24 @@
     <div class="flex flex-col gap-4 grow w-full p-5">
       <UVerticalNavigation class="grow" :links="menuLinks" />
 
-      <UButton variant="outline" size="xl" block @click="logout">
-        Logout
-      </UButton>
+      <UButton
+        label="Settings"
+        icon="i-heroicons-cog-8-tooth"
+        variant="soft"
+        size="sm"
+        to="/settings"
+        block
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useDisconnect } from "@wagmi/vue";
-
-import { useUserStore } from '../stores/user';
-
-const userStore = useUserStore()
-
-const { disconnect } = useDisconnect();
-
 const menuLinks = [
   {
     label: "Books",
     icon: "i-heroicons-book-open",
     to: "/",
   },
-  {
-    label: "Settings",
-    icon: "i-heroicons-cog-8-tooth",
-    to: "/settings",
-  },
 ];
-
-async function logout() {
-  try {
-    await userStore.logout();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    disconnect();
-  }
-}
 </script>
diff --git a/pages/settings.vue b/pages/settings.vue
index 71b8229..970ab63 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -24,11 +24,20 @@
         </UInput>
 
       </UFormGroup>
+
+      <UButton variant="outline" block size="xl" @click="signOut">
+        Sign out
+      </UButton>
     </AppPageBody>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useDisconnect } from "@wagmi/vue";
+
+import { useUserStore } from '../stores/user';
+
+const { disconnect } = useDisconnect();
 const userStore = useUserStore();
 
 const toast = useToast();
@@ -40,4 +49,14 @@ function copyAddress() {
     title: "Copied address to clipboard"
   });
 }
+
+async function signOut() {
+  try {
+    await userStore.logout();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    disconnect();
+  }
+}
 </script>