From a12f74b593ed2dd2a6743f7d597cffcd674d5f75 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 1 Jan 2025 18:24:43 +0100
Subject: [PATCH] Fixed mobile view and interaction rules

---
 .../maps/overlay/SearchMapSwitch.vue          | 19 ++++++++++++++-----
 src/components/maps/overlay/SearchMarkers.vue |  3 +++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/maps/overlay/SearchMapSwitch.vue b/src/components/maps/overlay/SearchMapSwitch.vue
index 2db61ab9..68d73ec1 100644
--- a/src/components/maps/overlay/SearchMapSwitch.vue
+++ b/src/components/maps/overlay/SearchMapSwitch.vue
@@ -1,17 +1,20 @@
 <script lang="ts" setup>
 import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix-vue'
 import { computed, onMounted, onUpdated, ref, watch } from 'vue';
-import { useElementHover, useUrlSearchParams, watchDebounced } from '@vueuse/core'
+import { useElementHover, useFocus, useUrlSearchParams, watchDebounced } from '@vueuse/core'
 
 const navModel = ref(false);
 
-const wrapper = ref<HTMLButtonElement | null>(null)
+const wrapper = ref<HTMLDivElement | null>(null)
+const buttonRef = ref<HTMLButtonElement | null>(null)
 const wrapperHovered = useElementHover(wrapper, { delayEnter: 500, delayLeave: 500 })
+const { focused: buttonFocused } = useFocus(buttonRef)
 
 const isNavOpened = computed(() => navModel.value || wrapperHovered.value)
 
-watch(wrapperHovered, (value) => {
-    if (!value) {
+watch([wrapperHovered, buttonFocused], (value) => {
+    // Check if all values from array are false
+    if (!value.some(Boolean)) {
         navModel.value = false
     }
 })
@@ -46,7 +49,7 @@ const menuItems: MenuItem[] = [
     <div class="wrapper" ref="wrapper">
         <PopoverRoot :open="isNavOpened" @update:open="() => navModel = true">
             <PopoverTrigger as-child>
-                <button class="btn-round" :class="{ 'active': isNavOpened }">
+                <button ref="buttonRef" class="btn-round" :class="{ 'active': isNavOpened }">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM96,176a8,8,0,0,0-1.94.24L40,189.75V62.25L95.07,48.48l.93.46Zm120,17.75-55.07,13.77-.93-.46V80a8,8,0,0,0,1.94-.23L216,66.25Z"/></svg>
                 </button>
             </PopoverTrigger>
@@ -74,6 +77,12 @@ const menuItems: MenuItem[] = [
 <style lang="scss" scoped>
 .wrapper {
     pointer-events: all;
+
+    @media screen and (width < 900px) {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+    }
 }
 
 button {
diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue
index 8dbbf1af..ab5bd88d 100644
--- a/src/components/maps/overlay/SearchMarkers.vue
+++ b/src/components/maps/overlay/SearchMarkers.vue
@@ -265,10 +265,13 @@ function resetAllFields(actionAfter?: "focusAfter") {
 
 <style lang="scss" scoped>
 .toolbar {
+    margin-left: calc(45px + .5rem);
+
     @media screen and (width >= 900px) {
         display: flex;
         gap: .75rem;
         align-items: start;
+        margin-left: 0;
     }
 
     .search-w {