--- /dev/null
+<script lang="ts">
+ import { _ } from 'svelte-i18n';
+ export let forums;
+
+ $: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
+</script>
+
+<ul>
+ {#each sortedForums as forum}
+ <li>
+ <a href="/f/{forum.id}">
+ <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
+ <span class="navigation-label">{$_(forum.label)}</span>
+ </a>
+ </li>
+ {/each}
+</ul>
+
+<style>
+ ul {
+ padding: 0;
+ }
+
+ li {
+ display: block;
+ text-align: left;
+ margin-bottom: 20px;
+ }
+
+ .navigation-glyph {
+ font-size: 1.5rem;
+ display: block;
+ }
+
+ .☽ {
+ font-size: 2rem;
+ }
+
+ a {
+ text-decoration: none;
+ }
+</style>