Refactor UserIcon to use ref for outside click detection

src/components/common/UserIcon.vue

@@ -3,6 +3,7 @@
   <div
     v-if="settingsStore.settings.ui.navigationMode !== 'hidden'"
     class="absolute bottom-0 left-0 h-16 group md:h-16"
+    ref="userIconContainer"
   >
     <!-- Invisible hover trigger area for desktop (only for hover mode) -->
     <div
@@ -182,6 +183,7 @@ const router = useRouter()
 const settingsStore = useSettingsStore()
 const authStore = useAuthStore()
 const isMenuOpen = ref(false)
+const userIconContainer = ref<HTMLElement | null>(null)
 
 // Compute navigation classes based on settings (same as BottomNav)
 const getNavigationClasses = () => {
@@ -303,7 +305,8 @@ const handleLogout = () => {
 // Close menu when clicking outside
 const handleClickOutside = (event: MouseEvent) => {
   const target = event.target as HTMLElement
-  if (isMenuOpen.value && !target.closest('.absolute.bottom-16')) {
+  // Check if click is outside the entire user icon container
+  if (isMenuOpen.value && userIconContainer.value && !userIconContainer.value.contains(target)) {
     closeMenu()
   }
 }