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