Updated UI logic

src/components/maps/overlay/SearchMapSwitch.vue

@@ -1,9 +1,20 @@
 <script lang="ts" setup>
 import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix-vue'
-import { onMounted, onUpdated, ref } from 'vue';
-import { useUrlSearchParams } from '@vueuse/core'
+import { computed, onMounted, onUpdated, ref, watch } from 'vue';
+import { useElementHover, useUrlSearchParams, watchDebounced } from '@vueuse/core'
 
-const navOpen = ref(false);
+const navModel = ref(false);
+
+const wrapper = ref<HTMLButtonElement | null>(null)
+const wrapperHovered = useElementHover(wrapper, { delayEnter: 500, delayLeave: 500 })
+
+const isNavOpened = computed(() => navModel.value || wrapperHovered.value)
+
+watch(wrapperHovered, (value) => {
+    if (!value) {
+        navModel.value = false
+    }
+})
 
 let url: URL | null = null;
 
@@ -32,10 +43,10 @@ const menuItems: MenuItem[] = [
 </script>
 
 <template>
-    <div class="wrapper">
-        <PopoverRoot v-model:open="navOpen">
+    <div class="wrapper" ref="wrapper">
+        <PopoverRoot :open="isNavOpened" @update:open="() => navModel = true">
             <PopoverTrigger as-child>
-                <button class="btn-round" :class="{ 'active': navOpen }">
+                <button 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>
@@ -44,7 +55,7 @@ const menuItems: MenuItem[] = [
 
                 <menu class="world-menu">
                     <li v-for="item in menuItems" :key="item.name">
-                        <a :href="item.url" :class="{ 'active': url?.pathname === item.url }">
+                        <a :href="item.url" :class="{ 'active': url?.pathname === item.url }" :tabindex="url?.pathname === item.url ? -1 : 0">
                             <figure>
                                 <img :src="item.img" alt="" width="40" height="40" loading="lazy">