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

Reviewed-on: #1

src/components/Dropdown.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/outline';
+import { vOnClickOutside } from '@vueuse/components';
+import { useEventListener } from '@vueuse/core';
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+
+useEventListener('keyup', e => {
+    if (e.key === 'Escape') {
+        isOpen.value = false;
+    }
+});
+</script>
+
+<template>
+    <div class="dropdown" :class="{'dropdown-open': isOpen, 'dropdown-close': !isOpen}" v-on-click-outside="() => isOpen = false">
+        <button @click="isOpen = !isOpen">
+            <slot name="button" />
+            <Transition name="flip">
+                <ChevronDownIcon v-if="!isOpen" class="chevron" />
+                <ChevronUpIcon v-else class="chevron" />
+            </Transition>
+        </button>
+
+        <Transition name="fade">
+            <div v-if="isOpen" class="relative">
+                <div class="z-10 divide-y rounded-b-md absolute">
+                    <slot />
+                </div>
+            </div>
+        </Transition>
+    </div>
+</template>
+
+<style scoped lang="postcss">
+.chevron {
+    @apply w-4 h-4 ms-1;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active, .fade-leave-active {
+    @apply transition-opacity;
+}
+
+.flip-enter-from, .flip-leave-to {
+  transform: rotate(180deg);
+}
+
+.flip-enter-active {
+  @apply transition-transform;
+}
+.flip-leave-active {
+   display: none; 
+}
+</style>