<script>
  import {forums, addForum} from '../../models/forums.js'

  import { fade } from 'svelte/transition';
</script>

<aside>
  <button on:click="{addForum}">Add a Forum</button>
  <nav>
    <ul>
      {#each $forums as forum}
        <li transition:fade>
          <a href="/f/{forum.id}">
            <span class="navigation-kanji">{forum.kanji}</span>
            <span class="navigation-label">{forum.label}</span>
          </a>
        </li>
      {/each}
    </ul>
  </nav>
</aside>
