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

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