rdpds/sa4cps-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor UserIcon to use ref for outside click detection

Browse Source
This commit is contained in:
rafaeldpsilva
2025-10-03 11:20:23 +01:00
parent 544c1a3a4f
commit 3ecd0ab2c4
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/common/UserIcon.vue
View File

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