1  <script lang="ts">
 2      import { createEventDispatcher } from 'svelte';
 3      import { buildSrc } from '@amp/web-app-components/src/components/Artwork/utils/srcset';
 4      import Item from '@amp/web-app-components/src/components/Navigation/Item.svelte';
 5      import ItemContent from '@amp/web-app-components/src/components/Navigation/ItemContent.svelte';
 6  
 7      const dispatch = createEventDispatcher();
 8  
 9      export let item: any;
10      export let selected: boolean = false;
11      export let translateFn: (key: string) => string;
12      $$props; // lets the other props automatically passed to navigation item components enter without being delcared explicitly
13  
14      const itemClicked = (): void => {
15          dispatch('selectItem', item);
16      };
17  
18      $: backgroundImage = item.artwork
19          ? buildSrc(
20                item.artwork.template,
21                {
22                    crop: 'bb',
23                    width: 40,
24                    height: 40,
25                    fileType: 'webp',
26                },
27                {},
28            )
29          : undefined;
30  </script>
31  
32  <Item {item} {selected} {translateFn}>
33      <!-- svelte-ignore a11y-click-events-have-key-events -->
34      <!-- svelte-ignore a11y-no-static-element-interactions -->
35      <a
36          href={item.url}
37          class="navigation-item__link"
38          role="button"
39          aria-pressed={selected}
40          on:click|preventDefault={itemClicked}
41      >
42          <ItemContent label={item.label}>
43              <div
44                  slot="icon"
45                  aria-hidden={true}
46                  class="icon"
47                  style:--background-image={`url(${backgroundImage})`}
48              />
49          </ItemContent>
50      </a>
51  </Item>
52  
53  <style>
54      .icon {
55          display: flex;
56          align-self: center;
57          width: 20px;
58          height: 20px;
59          background: var(--keyColor);
60          mask: var(--background-image) center / contain no-repeat;
61  
62          @media (--sidebar-visible) {
63              width: 18px;
64              height: 18px;
65          }
66      }
67  </style>