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>