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

   1 <script lang="ts">
   2         import { _ } from 'svelte-i18n';
   3         export let forums;
   4
   5         $: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
   6 </script>
   7
   8 <ul>
   9         {#each sortedForums as forum}
  10                 <li>
  11                         <a href="/f/{forum.id}">
  12                                 <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
  13                                 <span class="navigation-label">{$_(forum.label)}</span>
  14                         </a>
  15                 </li>
  16         {/each}
  17 </ul>
  18
  19 <style>
  20         ul {
  21                 padding: 0;
  22         }
  23
  24         li {
  25                 display: block;
  26                 text-align: left;
  27                 margin-bottom: 20px;
  28         }
  29
  30         .navigation-glyph {
  31                 font-size: 1.5rem;
  32                 display: block;
  33         }
  34
  35         .☽ {
  36                 font-size: 2rem;
  37         }
  38
  39         a {
  40                 text-decoration: none;
  41         }
  42 </style>