refactor: use floating ui for dropdowns
This commit is contained in:
@@ -9,7 +9,6 @@ const { user, signOut } = useAuth();
|
||||
// particular)
|
||||
const cachedUser = ref(user.value);
|
||||
|
||||
const dropdownRef = ref<HTMLDivElement | null>(null);
|
||||
const dropdownOpen = ref(false);
|
||||
|
||||
watch(user, () => {
|
||||
@@ -29,14 +28,10 @@ const handleLogout = async () => {
|
||||
|
||||
await navigateTo('/auth/login');
|
||||
};
|
||||
|
||||
useClickOutside(dropdownRef, () => {
|
||||
dropdownOpen.value = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header ref="dropdownRef" class="flex items-center justify-between overflow-hidden">
|
||||
<header class="flex items-center justify-between overflow-hidden">
|
||||
<button @click="dropdownOpen = !dropdownOpen"
|
||||
class="flex gap-1 pr-1 items-center hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<div
|
||||
@@ -60,8 +55,8 @@ useClickOutside(dropdownRef, () => {
|
||||
enter-from-class="opacity-0 scale-95" enter-to-class="opacity-100 scale-100"
|
||||
leave-active-class="transition-all duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
|
||||
<div v-if="dropdownOpen"
|
||||
class="w-full top-full text-sm mt-1 absolute z-50 bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 flex flex-col gap-2">
|
||||
<div v-if="dropdownOpen" v-click-outside="() => dropdownOpen = false"
|
||||
class="w-full top-full text-sm mt-1 absolute z-30 bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 flex flex-col gap-2">
|
||||
<button @click="dropdownOpen = false; openDialog(DialogType.Settings)"
|
||||
class="text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-cog-four text-4.5"></span>
|
||||
|
||||
Reference in New Issue
Block a user