]> git.r.bdr.sh - rbdr/forum/blob - src/lib/components/forum_list/forum_list.svelte
3529de81ca5e83137fee4e1e8ebe9cd2d0c4ecb5
[rbdr/forum] / 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>