Rework to use marbas and authentik instead of poketbase (#1)

Reviewed-on: #1

src/sidebar/Sidebar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { usePocketBase } from '@/pocketbase';
-import { RouterLink, useRouter } from 'vue-router';
+import { useAuthStore } from '@/auth';
+import { Dropdown } from '@/components';
+import { RouterLink } from 'vue-router';
 
 const links = [
     { name: "Market", path: "/market" },
@@ -8,34 +9,62 @@ const links = [
     { name: "Tools", path: "/tools" }
 ];
 
-const pb = usePocketBase();
-const router = useRouter();
+const authStore = useAuthStore();
 
 const logout = async () => {
-    pb.authStore.clear();
-    await router.push({ name: 'login' });
+    await authStore.logout();
 }
 </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 flex flex-col">
+            <div class="mb-2 border-b-2 border-emerald-500">
+                <Dropdown class="mb-2 user-dropdown">
+                    <template #button>
+                        <span>{{ authStore.username }}</span>
+                    </template>
+                    <ul>
+                        <li>
+                            <RouterLink class="sidebar-button py-0.5 px-2" :to="{name: 'about'}">About EVE Online</RouterLink>
+                        </li>
+                        <li>
+                            <a class="sidebar-button py-0.5 px-2 text-amber-700" @click="logout">Logout</a>
+                        </li>
+                    </ul>
+                </Dropdown>
+            </div>
             <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">
+                    <RouterLink :to="link.path" class="sidebar-button p-2">
                         <span>{{ link.name }}</span>
                     </RouterLink>
                 </li>
             </ul>
-            <div class="mt-auto">
-                <button @click="logout">Logout</button>
-            </div>
         </div>
     </aside>
 </template>
 
 <style scoped lang="postcss">
+.sidebar-button {
+    @apply flex items-center rounded-md hover:bg-slate-800 cursor-pointer;
+}
 .router-link-active {
     @apply bg-emerald-500 hover:bg-emerald-700;
 }
+.user-dropdown {
+    @apply w-full;
+    :deep(>div) {
+        @apply w-full;
+        >div {
+            @apply w-full bg-slate-800;
+        }
+    }
+    :deep(>button) {
+        @apply bg-slate-700 hover:bg-slate-800 border-none flex items-center w-full;
+    }
+    &.dropdown-open:deep(>button) {
+        @apply bg-slate-800 rounded-b-none;
+    }
+}
 </style>