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