From ca864d671d569d8ed2b6424d05ef31b87ce2480e Mon Sep 17 00:00:00 2001
From: Leon Xu <dcwinfield362@gmail.com>
Date: Fri, 31 Dec 2021 12:16:02 -0800
Subject: [PATCH] doc: import supabase, useRouter, store, and computed and
 setup them up in the setup function

---
 src/components/Navigation.vue | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index bab2c31..c858b80 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -11,28 +11,41 @@
         <router-link class="cursor-pointer" :to="{ name: 'Home' }">
           Home
         </router-link>
-        <router-link class="cursor-pointer" :to="{ name: '' }">
+        <router-link v-if="user" class="cursor-pointer" :to="{ name: '' }">
           Create
         </router-link>
-        <router-link class="cursor-pointer" :to="{ name: 'Login' }">
+        <router-link
+          v-if="!user"
+          class="cursor-pointer"
+          :to="{ name: 'Login' }"
+        >
           Login
         </router-link>
-        <li class="cursor-pointer">Logout</li>
+        <li v-if="user" @click="logout" class="cursor-pointer">Logout</li>
       </ul>
     </nav>
   </header>
 </template>
 
 <script>
+import { supabase } from "../supabase/init";
+import { useRouter } from "vue-router";
+import store from "../store/index";
+import { computed } from "vue";
 export default {
   setup() {
     // Get user from store
-
+    const user = computed(() => store.state.user);
     // Setup ref to router
+    const router = useRouter();
 
     // Logout function
+    const logout = async () => {
+      await supabase.auth.signOut();
+      router.replace({ name: "Page" });
+    };
 
-    return {};
+    return { logout, user };
   },
 };
 </script>