Added radix popover

src/assets/scss/_card.scss

@@ -0,0 +1,10 @@
+.card {
+    padding-block: 0.75rem;
+    padding-inline: .75rem;
+    border-radius: 8px;
+    background-color: var(--white);
+
+    .card-arrow {
+        fill: var(--white);
+    }
+}

src/assets/scss/theme.scss

@@ -5,6 +5,7 @@
 
 @use 'forms';
 @use 'buttons';
+@use 'card';
 
 :root {
     --white: #fff;

src/components/maps/overlay/SearchMapSwitch.vue

@@ -1,12 +1,71 @@
+<script lang="ts" setup>
+import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix-vue'
+import { onMounted, onUpdated, ref } from 'vue';
+import { useUrlSearchParams } from '@vueuse/core'
+
+const navOpen = ref(false);
+
+let url: URL | null = null;
+
+onUpdated(() => {
+    url = new URL(window.location.href)
+})
+
+interface MenuItem {
+    name: string,
+    img: string,
+    url: string
+}
+
+const menuItems: MenuItem[] = [
+    {
+        name: 'Aldys',
+        img: 'https://picsum.photos/id/13/40',
+        url: '/'
+    },
+    {
+        name: 'Bamast',
+        img: 'https://picsum.photos/id/14/40',
+        url: '/bamast'
+    }
+]
+</script>
+
 <template>
-    <button class="btn-round">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M249.94,120.24l-27.05-6.76a95.86,95.86,0,0,0-80.37-80.37l-6.76-27a8,8,0,0,0-15.52,0l-6.76,27.05a95.86,95.86,0,0,0-80.37,80.37l-27,6.76a8,8,0,0,0,0,15.52l27.05,6.76a95.86,95.86,0,0,0,80.37,80.37l6.76,27.05a8,8,0,0,0,15.52,0l6.76-27.05a95.86,95.86,0,0,0,80.37-80.37l27.05-6.76a8,8,0,0,0,0-15.52Zm-44.17-11L158.6,97.4,146.8,50.23A79.88,79.88,0,0,1,205.77,109.2Zm-96.57-59L97.4,97.4,50.23,109.2A79.88,79.88,0,0,1,109.2,50.23Zm-59,96.57L97.4,158.6l11.8,47.17A79.88,79.88,0,0,1,50.23,146.8Zm96.57,59,11.8-47.17,47.17-11.8A79.88,79.88,0,0,1,146.8,205.77Z"/></svg>
-    </button>
+    <div class="wrapper">
+        <PopoverRoot v-model:open="navOpen">
+            <PopoverTrigger as-child>
+                <button class="btn-round" :class="{ 'active': navOpen }">
+                    <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>
+            <PopoverContent side="bottom" :side-offset="6" :collision-padding="10" class="card">
+                <PopoverArrow class="card-arrow" />
+
+                <menu class="world-menu">
+                    <li v-for="item in menuItems" :key="item.name">
+                        <a :href="item.url" :class="{ 'active': url?.pathname === item.url }">
+                            <figure>
+                                <img :src="item.img" alt="" width="40" height="40" loading="lazy">
+
+                                <figcaption>
+                                    {{ item.name }}
+                                </figcaption>
+                            </figure>
+                        </a>
+                    </li>
+                </menu>
+            </PopoverContent>
+        </PopoverRoot>
+    </div>
 </template>
 
 <style lang="scss" scoped>
-button {
+.wrapper {
     pointer-events: all;
+}
+
+button {
     cursor: pointer;
 }
 
@@ -33,11 +92,21 @@ button {
 
     &:hover,
     &:focus-visible {
-        outline-color: color-mix(in srgb, var(--purple-500) 20%, transparent);
-        border-color: var(--purple-500);
+        outline-color: color-mix(in srgb, var(--blue-500) 20%, transparent);
+        border-color: var(--blue-500);
         
         svg {
-            fill: var(--purple-500);
+            fill: var(--blue-500);
+        }
+    }
+
+    &.active {
+        color: var(--white);
+        background-color: var(--blue-500);
+        border-color: var(--blue-700);
+
+        svg {
+            fill: var(--white);
         }
     }
 }
@@ -45,4 +114,48 @@ button {
 svg {
     width: 1.15em;
 }
+
+.world-menu {
+    margin-top: .25rem;
+    margin-inline: .25rem;
+    display: flex;
+    gap: 1rem;
+
+    a {
+        &:hover,
+        &:focus-visible {
+            figure img {
+                outline-color: var(--blue-500);
+            }
+        }
+
+        &.active {
+            pointer-events: none;
+
+            figure img {
+                border-width: .1rem;
+                border-color: var(--blue-500);
+            }
+        }
+    }
+
+    figure {
+        display: grid;
+        justify-items: center;
+        gap: .25rem;
+
+        img {
+            display: block;
+            border-radius: .3rem;
+            border: .1rem solid var(--white);
+            outline: .15rem solid transparent;
+        }
+
+        figcaption {
+            font-size: .75em;
+            text-align: center;
+            opacity: .75;
+        }
+    }
+}
 </style>