X-Git-Url: https://git.r.bdr.sh/rbdr/forum/blobdiff_plain/010f307346e525ac2e4239a0549d2c1a4d6d102b..a7cf03c192470cbab13edeb1aec99e0c66dede10:/src/lib/components/forum_list/forum_list.svelte

diff --git a/src/lib/components/forum_list/forum_list.svelte b/src/lib/components/forum_list/forum_list.svelte
new file mode 100644
index 0000000..3529de8
--- /dev/null
+++ b/src/lib/components/forum_list/forum_list.svelte
@@ -0,0 +1,42 @@
+<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>