You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.4 KiB
47 lines
1.4 KiB
<script>
|
|
import { createEventDispatcher } from 'svelte';
|
|
import Icon from "./Icon.svelte";
|
|
|
|
export let menu = [];
|
|
export let icon_size="1.5em";
|
|
const dispatch = createEventDispatcher();
|
|
|
|
const activate = (index, item) => {
|
|
dispatch("select", {index, item});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/** Sidebar style can be found in static/global.css. */
|
|
</style>
|
|
|
|
<sidebar>
|
|
<top>
|
|
<slot name="top">
|
|
</slot>
|
|
</top>
|
|
|
|
<items>
|
|
{#each menu as item, i}
|
|
{#if item.heading}
|
|
<h3>{ item.title }</h3>
|
|
{:else if item.href }
|
|
<a data-testid="sidebar-link-{ item.title }" class:with-icon={ item.icon !== undefined } class:without-icon={ !item.icon} class:active={ item.active } href={ item.href }>
|
|
{#if item.icon}
|
|
<Icon size={ icon_size } name={ item.icon } light={ item.active } /> <span class="with-icon">{ item.title }</span>
|
|
{:else}
|
|
<span class="without-icon">{ item.title }</span>
|
|
{/if}
|
|
</a>
|
|
{:else}
|
|
<a data-testid="sidebar-link-{ item.title }" class:with-icon={ item.icon } class:without-icon={ !item.icon} class:active={ item.active } on:click={() => activate(i, item)}>
|
|
{#if item.icon}
|
|
<Icon size={ icon_size } name={ item.icon } light={ item.active } /> <span class="with-icon">{ item.title }</span>
|
|
{:else}
|
|
<span class="without-icon">{ item.title }</span>
|
|
{/if}
|
|
</a>
|
|
{/if}
|
|
{/each}
|
|
</items>
|
|
</sidebar>
|
|
|