This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
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.
bandolier-template/client/components/Sidebar.svelte

48 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>