git.r.bdr.sh - rbdr/forum/blob - src/components/forum_list/forum_list.svelte

   1 <script>
   2   import { _ } from 'svelte-i18n';
   3   import { forums } from '$stores/forums';
   4   import ErrorBlock from '../error_block/error_block.svelte';
   5 </script>
   6
   7 <nav title="{$_('forum_list.title')}">
   8   {#if $forums.loading}
   9     <p>Loading...</p>
  10   {/if}
  11   {#if $forums.error}
  12     <ErrorBlock message={$_('forum_list.error.unavailable')} />
  13   {/if}
  14   <ul>
  15     {#each $forums.data as forum}
  16       <li>
  17         <a href="/f/{forum.id}">
  18           <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
  19           <span class="navigation-label">{$_(forum.label)}</span>
  20         </a>
  21       </li>
  22     {/each}
  23   </ul>
  24 </nav>
  25
  26 <style>
  27   nav {
  28     grid-column: col-start 1;
  29     grid-row: 2;
  30     border-right: 1px solid black;
  31   }
  32
  33   ul {
  34     padding: 0;
  35   }
  36
  37   li {
  38     display: block;
  39     text-align: left;
  40     margin-bottom: 20px;
  41   }
  42
  43   .navigation-glyph {
  44     font-size: 1.5rem;
  45     display: block;
  46   }
  47
  48   .☽ {
  49     font-size: 2rem;
  50   }
  51
  52   a {
  53     text-decoration: none;
  54   }
  55 </style>