-
Notifications
You must be signed in to change notification settings - Fork 4
/
NavButton.svelte
37 lines (32 loc) · 932 Bytes
/
NavButton.svelte
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
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { getColorForStatus, type Status } from '../../utilities/status';
export let selected: boolean = false;
export let status: Status | null = null;
export let title: string;
const dispatch = createEventDispatcher();
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="nav-button st-typography-medium" class:selected on:click|preventDefault={() => dispatch('click')}>
<span style="color: {status !== null ? getColorForStatus(status) : 'unset'}">
<slot />
</span>
{title}
<slot name="menu" />
</div>
<style>
.nav-button {
align-items: center;
color: var(--st-gray-20);
cursor: pointer;
display: inline-flex;
font-size: 13px;
gap: 8px;
height: 42px;
line-height: 14px;
padding: 10px;
}
.nav-button.selected {
background-color: var(--st-primary-70);
}
</style>