]> git.r.bdr.sh - rbdr/forum/blob - app/components/forum_list/forum_list.svelte
e49c8d827ef0c0757c468f4d4e8e17efe4e79d4e
[rbdr/forum] / app / components / forum_list / forum_list.svelte
1 <script>
2 import {forums, addForum} from '../../stores/forums.js'
3 </script>
4
5 <nav title="List of Forums">
6 <ul>
7 {#each $forums as forum}
8 <li>
9 <a href="/f/{forum.id}">
10 <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
11 <span class="navigation-label">{forum.label}</span>
12 </a>
13 </li>
14 {/each}
15 </ul>
16 </nav>
17
18 <style>
19 nav {
20 grid-column: col-start 1;
21 grid-row: 2;
22 border-right: 1px solid black;
23 }
24
25 ul {
26 padding: 0;
27 }
28
29 li {
30 display: block;
31 text-align: left;
32 margin-bottom: 20px;
33 }
34
35 .navigation-glyph {
36 font-size: 1.5rem;
37 display: block;
38 }
39
40 .☽ {
41 font-size: 2rem;
42 }
43
44 a {
45 text-decoration: none;
46 }
47 </style>