]> git.r.bdr.sh - rbdr/forum/blob - app/components/forum_list/forum_list.svelte
5ce4dc119a6af374b0b73f9b31f9a0a1c90db749
[rbdr/forum] / 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>