Added radix popover

2024-12-31 23:01:43 +01:00
parent adc77d2be0
commit 1dea4a00c1
5 changed files with 287 additions and 9 deletions
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
    "@types/leaflet": "^1.9.15",
    "@vueuse/core": "^12.2.0",
    "astro": "^5.1.1",
+    "radix-vue": "^1.9.12",
    "vue": "^3.5.13"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
      astro:
        specifier: ^5.1.1
        version: 5.1.1(jiti@2.4.2)(rollup@4.29.1)(sass@1.83.0)(typescript@5.7.2)
+      radix-vue:
+        specifier: ^1.9.12
+        version: 1.9.12(vue@3.5.13(typescript@5.7.2))
      vue:
        specifier: ^3.5.13
        version: 3.5.13(typescript@5.7.2)
@@ -602,6 +605,18 @@ packages:
    cpu: [x64]
    os: [win32]

+  '@floating-ui/core@1.6.8':
+    resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
+
+  '@floating-ui/dom@1.6.12':
+    resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==}
+
+  '@floating-ui/utils@0.2.8':
+    resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
+
+  '@floating-ui/vue@1.1.5':
+    resolution: {integrity: sha512-ynL1p5Z+woPVSwgMGqeDrx6HrJfGIDzFyESFkyqJKilGW1+h/8yVY29Khn0LaU6wHBRwZ13ntG6reiHWK6jyzw==}
+
  '@img/sharp-darwin-arm64@0.33.4':
    resolution: {integrity: sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==}
    engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
@@ -715,6 +730,12 @@ packages:
    cpu: [x64]
    os: [win32]

+  '@internationalized/date@3.6.0':
+    resolution: {integrity: sha512-+z6ti+CcJnRlLHok/emGEsWQhe7kfSmEW+/6qCzvKY67YPh7YOBfvc7+/+NXq+zJlbArg30tYpqLjNgcAYv2YQ==}
+
+  '@internationalized/number@3.6.0':
+    resolution: {integrity: sha512-PtrRcJVy7nw++wn4W2OuePQQfTqDzfusSuY1QTtui4wa7r+rGVtR75pO8CyKvHvzyQYi3Q1uO5sY0AsB4e65Bw==}
+
  '@jridgewell/gen-mapping@0.3.5':
    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
    engines: {node: '>=6.0.0'}
@@ -965,6 +986,17 @@ packages:
    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
    engines: {node: '>=18'}

+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
+  '@tanstack/virtual-core@3.11.2':
+    resolution: {integrity: sha512-vTtpNt7mKCiZ1pwU9hfKPhpdVO2sVzFQsxoVBGtOSHxlrRRzYr8iQ2TlwbAcRYCcEiZ9ECAM8kBzH0v2+VzfKw==}
+
+  '@tanstack/vue-virtual@3.11.2':
+    resolution: {integrity: sha512-y0b1p1FTlzxcSt/ZdGWY1AZ52ddwSU69pvFRYAELUSdLLxV8QOPe9dyT/KATO43UCb3DAwiyzi96h2IoYstBOQ==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
  '@types/cookie@0.6.0':
    resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}

@@ -1096,12 +1128,21 @@ packages:
  '@vue/shared@3.5.13':
    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}

+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
  '@vueuse/core@12.2.0':
    resolution: {integrity: sha512-jksyNu+5EGwggNkRWd6xX+8qBkYbmrwdFQMgCABsz+wq8bKF6w3soPFLB8vocFp3wFIzn0OYkSPM9JP+AFKwsg==}

+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
  '@vueuse/metadata@12.2.0':
    resolution: {integrity: sha512-x6zynZtTh1l52m0y8d/EgzpshnMjg8cNZ2KWoncJ62Z5qPSGoc4FUunmMVrrRM/I/5542rTEY89CGftngZvrkQ==}

+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
  '@vueuse/shared@12.2.0':
    resolution: {integrity: sha512-SRr4AZwv/giS+EmyA1ZIzn3/iALjjnWAGaBNmoDTMEob9JwQaevAocuaMDnPAvU7Z35Y5g3CFRusCWgp1gVJ3Q==}

@@ -1142,6 +1183,10 @@ packages:
  argparse@2.0.1:
    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}

+  aria-hidden@1.2.4:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+
  aria-query@5.3.2:
    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
    engines: {node: '>= 0.4'}
@@ -1465,6 +1510,9 @@ packages:
  extend@3.0.2:
    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}

+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
  fast-glob@3.3.2:
    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
    engines: {node: '>=8.6.0'}
@@ -2082,6 +2130,11 @@ packages:
  queue-microtask@1.2.3:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}

+  radix-vue@1.9.12:
+    resolution: {integrity: sha512-zkr66Jqxbej4+oR6O/pZRzyM/VZi66ndbyIBZQjJKAXa1lIoYReZJse6W1EEDZKXknD7rXhpS+jM9Sr23lIqfg==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
  radix3@1.1.2:
    resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}

@@ -2315,6 +2368,9 @@ packages:
  tslib@2.6.3:
    resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}

+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
  type-fest@4.30.2:
    resolution: {integrity: sha512-UJShLPYi1aWqCdq9HycOL/gwsuqda1OISdBO3t8RlXQC4QvtuIz4b5FCfe2dQIWEpmlRExKmcTBfP1r9bhY7ig==}
    engines: {node: '>=16'}
@@ -2535,6 +2591,17 @@ packages:
      vite:
        optional: true

+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
  vue@3.5.13:
    resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
    peerDependencies:
@@ -3204,6 +3271,26 @@ snapshots:
  '@esbuild/win32-x64@0.24.0':
    optional: true

+  '@floating-ui/core@1.6.8':
+    dependencies:
+      '@floating-ui/utils': 0.2.8
+
+  '@floating-ui/dom@1.6.12':
+    dependencies:
+      '@floating-ui/core': 1.6.8
+      '@floating-ui/utils': 0.2.8
+
+  '@floating-ui/utils@0.2.8': {}
+
+  '@floating-ui/vue@1.1.5(vue@3.5.13(typescript@5.7.2))':
+    dependencies:
+      '@floating-ui/dom': 1.6.12
+      '@floating-ui/utils': 0.2.8
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.2))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
  '@img/sharp-darwin-arm64@0.33.4':
    optionalDependencies:
      '@img/sharp-libvips-darwin-arm64': 1.0.2
@@ -3279,6 +3366,14 @@ snapshots:
  '@img/sharp-win32-x64@0.33.4':
    optional: true

+  '@internationalized/date@3.6.0':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
+  '@internationalized/number@3.6.0':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
  '@jridgewell/gen-mapping@0.3.5':
    dependencies:
      '@jridgewell/set-array': 1.2.1
@@ -3473,6 +3568,17 @@ snapshots:

  '@sindresorhus/merge-streams@4.0.0': {}

+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tanstack/virtual-core@3.11.2': {}
+
+  '@tanstack/vue-virtual@3.11.2(vue@3.5.13(typescript@5.7.2))':
+    dependencies:
+      '@tanstack/virtual-core': 3.11.2
+      vue: 3.5.13(typescript@5.7.2)
+
  '@types/cookie@0.6.0': {}

  '@types/debug@4.1.12':
@@ -3669,6 +3775,16 @@ snapshots:

  '@vue/shared@3.5.13': {}

+  '@vueuse/core@10.11.1(vue@3.5.13(typescript@5.7.2))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.5.13(typescript@5.7.2))
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.2))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
  '@vueuse/core@12.2.0(typescript@5.7.2)':
    dependencies:
      '@types/web-bluetooth': 0.0.20
@@ -3678,8 +3794,17 @@ snapshots:
    transitivePeerDependencies:
      - typescript

+  '@vueuse/metadata@10.11.1': {}
+
  '@vueuse/metadata@12.2.0': {}

+  '@vueuse/shared@10.11.1(vue@3.5.13(typescript@5.7.2))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.2))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
  '@vueuse/shared@12.2.0(typescript@5.7.2)':
    dependencies:
      vue: 3.5.13(typescript@5.7.2)
@@ -3715,6 +3840,10 @@ snapshots:

  argparse@2.0.1: {}

+  aria-hidden@1.2.4:
+    dependencies:
+      tslib: 2.6.3
+
  aria-query@5.3.2: {}

  array-iterate@2.0.1: {}
@@ -4137,6 +4266,8 @@ snapshots:

  extend@3.0.2: {}

+  fast-deep-equal@3.1.3: {}
+
  fast-glob@3.3.2:
    dependencies:
      '@nodelib/fs.stat': 2.0.5
@@ -4968,6 +5099,23 @@ snapshots:

  queue-microtask@1.2.3: {}

+  radix-vue@1.9.12(vue@3.5.13(typescript@5.7.2)):
+    dependencies:
+      '@floating-ui/dom': 1.6.12
+      '@floating-ui/vue': 1.1.5(vue@3.5.13(typescript@5.7.2))
+      '@internationalized/date': 3.6.0
+      '@internationalized/number': 3.6.0
+      '@tanstack/vue-virtual': 3.11.2(vue@3.5.13(typescript@5.7.2))
+      '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.7.2))
+      '@vueuse/shared': 10.11.1(vue@3.5.13(typescript@5.7.2))
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      fast-deep-equal: 3.1.3
+      nanoid: 5.0.9
+      vue: 3.5.13(typescript@5.7.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
  radix3@1.1.2: {}

  readdirp@3.6.0:
@@ -5269,8 +5417,9 @@ snapshots:
    optionalDependencies:
      typescript: 5.7.2

-  tslib@2.6.3:
-    optional: true
+  tslib@2.6.3: {}
+
+  tslib@2.8.1: {}

  type-fest@4.30.2: {}

@@ -5459,6 +5608,10 @@ snapshots:
    optionalDependencies:
      vite: 6.0.5(jiti@2.4.2)(sass@1.83.0)

+  vue-demi@0.14.10(vue@3.5.13(typescript@5.7.2)):
+    dependencies:
+      vue: 3.5.13(typescript@5.7.2)
+
  vue@3.5.13(typescript@5.7.2):
    dependencies:
      '@vue/compiler-dom': 3.5.13
--- a/src/assets/scss/_card.scss
+++ b/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);
+    }
+}
--- a/src/assets/scss/theme.scss
+++ b/src/assets/scss/theme.scss
@@ -5,6 +5,7 @@

@use 'forms';
@use 'buttons';
+@use 'card';

 :root {
    --white: #fff;
--- a/src/components/maps/overlay/SearchMapSwitch.vue
+++ b/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>