pocketbase login

src/sidebar/Sidebar.vue

@@ -1,16 +1,25 @@
 <script setup lang="ts">
-import { RouterLink } from 'vue-router';
+import { usePocketBase } from '@/pocketbase';
+import { RouterLink, useRouter } from 'vue-router';
 
 const links = [
     { name: "Market", path: "/market" },
     { name: "Reprocess", path: "/reprocess" },
     { name: "Tools", path: "/tools" }
 ];
+
+const pb = usePocketBase();
+const router = useRouter();
+
+const logout = async () => {
+    pb.authStore.clear();
+    await router.push({ name: 'login' });
+}
 </script>
 
 <template>
     <aside class="fixed top-0 left-0 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0">
-        <div class="h-full px-3 py-4 overflow-y-auto bg-slate-700">
+        <div class="h-full px-3 py-4 overflow-y-auto bg-slate-700 flex flex-col">
             <ul class="space-y-2 font-medium">
                 <li v-for="link in links" :key="link.name">
                     <RouterLink :to="link.path" class="flex items-center p-2 rounded-md hover:bg-slate-800">
@@ -18,6 +27,9 @@ const links = [
                     </RouterLink>
                 </li>
             </ul>
+            <div class="mt-auto">
+                <button @click="logout">Logout</button>
+            </div>
         </div>
     </aside>
 </template>