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

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