1  <script lang="ts">
 2      import type { WebNavigationLink } from '@jet-app/app-store/api/models/web-navigation';
 3  
 4      import SFSymbol from '~/components/SFSymbol.svelte';
 5      import PlatformSelectorItem from '~/components/jet/web-navigation/PlatformSelectorItem.svelte';
 6      import { getI18n } from '~/stores/i18n';
 7      import Menu from '~/components/Menu.svelte';
 8      import { getJet } from '~/jet';
 9  
10      export let platformSelectors: WebNavigationLink[];
11  
12      const i18n = getI18n();
13      const jet = getJet();
14  
15      $: activeSelector = platformSelectors.find((selector) => selector.isActive);
16  
17      const handleShowMenu = () => {
18          jet.recordCustomMetricsEvent({
19              eventType: 'click',
20              actionType: 'open',
21              targetType: 'button',
22              targetId: 'PlatformSelector',
23          });
24      };
25  </script>
26  
27  {#if activeSelector}
28      <nav>
29          <Menu options={platformSelectors} forcedXPosition={25} {handleShowMenu}>
30              <svelte:fragment slot="trigger">
31                  <span
32                      class="platform-selector-text"
33                      id="platform-selector-text"
34                      aria-labelledby="app-store-icon-contianer platform-selector-text"
35                      aria-haspopup="menu"
36                  >
37                      {$i18n.t(
38                          'ASE.Web.AppStore.Navigation.PlatformSelectorText',
39                          {
40                              platform: activeSelector.action.title,
41                          },
42                      )}
43  
44                      <SFSymbol name="chevron.down" />
45                  </span>
46              </svelte:fragment>
47  
48              <svelte:fragment slot="option" let:option>
49                  <PlatformSelectorItem platformSelector={option} />
50              </svelte:fragment>
51          </Menu>
52      </nav>
53  {/if}
54  
55  <style>
56      nav {
57          --menu-item-padding: 0;
58          --menu-item-margin: 0 0 8px 0;
59          --menu-popover-padding: 8px;
60          --menu-common-padding: 8px;
61          --menu-trigger-padding: 0;
62          --menu-popover-background-color: var(--pageBg);
63          --menu-popover-box-shadow: 10px 10px 10px 0
64              var(--systemQuaternary-onLight);
65          --menu-popover-border-radius: 14px;
66          --menu-popover-border: 1px solid var(--systemQuaternary);
67          --menu-popover-z-index: calc(var(--z-web-chrome) + 1);
68      }
69  
70      .platform-selector-text {
71          display: flex;
72          align-items: center;
73          gap: var(--platform-selector-trigger-gap, 4px);
74          font: var(--title-2);
75          white-space: nowrap;
76      }
77  
78      .platform-selector-text :global(svg) {
79          height: 0.7em;
80          position: relative;
81          top: 2px;
82          fill: var(--systemPrimary);
83      }
84  
85      nav :global(.menu-popover) {
86          width: 211px;
87      }
88  </style>