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