fix: floating menu bg on mobile, better bg

Author: NamesMT

apps/frontend/app/components/chat/ChatFloatingMenu.vue

@@ -1,19 +1,22 @@
 <script setup lang="ts">
 import { useSidebar } from '@/lib/shadcn/components/ui/sidebar/utils'
 
-const { open } = useSidebar()
+// `state` does not apply to mobile, so we uses 3 props instead
+const { isMobile, openMobile, open } = useSidebar()
+
+const isExpanded = computed(() => isMobile.value ? openMobile.value : open.value)
 </script>
 
 <template>
   <div
     class="flex rounded-md p-1 transition-background-color"
     :class="[
-      open ? '' : 'bg-sidebar-accent-foreground',
+      isExpanded ? 'bg-transparent' : 'bg-muted-foreground/30',
     ]"
   >
     <SidebarTrigger
       :class="[
-        open ? '' : 'color-sidebar-accent',
+        isExpanded ? '' : 'color-sidebar-accent',
       ]"
     />
   </div>