refactor: use floating ui for dropdowns

app/components/Sidenav/index.vue

@@ -101,7 +101,7 @@ const navKind = computed(() => {
 </script>
 
 <template>
-    <div class="relative">
+    <div class="relative pl-2">
         <aside ref="sidenavRef" :class="[
             'h-full max-w-fit background-[var(--bg-base)] overflow-hidden will-change-width text-[var(--text-secondary)] select-none transition-[width,margin] duration-250 ease-[cubic-bezier(0.5,_1,_0.89,_1)]',
             open ? 'w-full mr-2' : 'w-0 mr-0',
@@ -111,7 +111,8 @@ const navKind = computed(() => {
             <div :style="{ minWidth: `${sidebarWidth}px` }" class="flex flex-col h-full justify-between">
                 <div class="flex flex-col h-full max-h-full overflow-y-hidden">
                     <!-- Header -->
-                    <div class="relative flex flex-row gap-2 justify-between items-center mb-1.5 h-8">
+                    <div
+                        class="z-25 bg-[var(--bg-base)] relative flex flex-row gap-2 justify-between items-center shrink-0 pb-1.5 h-11 pt-2">
 
                         <SidenavHeader v-if="navKind === 'home'" />
                         <SidenavHeaderAgent v-else-if="navKind === 'agent'" />
@@ -142,7 +143,7 @@ const navKind = computed(() => {
                     <SidenavNavAgent v-else-if="navKind === 'agent'" />
                 </div>
 
-                <div class="flex justify-between pt-2">
+                <div class="flex justify-between pt-2 z-25 bg-[var(--bg-base)] pb-2">
                     <div class="flex">
                         <button @click="openDialog(DialogType.Settings)"
                             class="flex items-center justify-center h-7 w-7 cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors text-[var(--text-secondary)] active:text-[var(--text-primary)]">