Use routify and GraphQL server

[rbdr/forum] / src / components / forum_list / forum_list.svelte

<script>
  import { _ } from 'svelte-i18n';
  import { forums } from '$stores/forums';
  import ErrorBlock from '../error_block/error_block.svelte';
</script>

<nav title="{$_('forum_list.title')}">
  {#if $forums.loading}
    <p>Loading...</p>
  {/if}
  {#if $forums.error}
    <ErrorBlock message={$_('forum_list.error.unavailable')} />
  {/if}
  <ul>
    {#each $forums.data as forum}
      <li>
        <a href="/f/{forum.id}">
          <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
          <span class="navigation-label">{$_(forum.label)}</span>
        </a>
      </li>
    {/each}
  </ul>
</nav>

<style>
  nav {
    grid-column: col-start 1;
    grid-row: 2;
    border-right: 1px solid black;
  }

  ul {
    padding: 0;
  }

  li {
    display: block;
    text-align: left;
    margin-bottom: 20px;
  }

  .navigation-glyph {
    font-size: 1.5rem;
    display: block;
  }

  .☽ {
    font-size: 2rem;
  }

  a {
    text-decoration: none;
  }
</style>