bandolier-template/client/components/Sidebar.svelte

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