From bd8e98d7e24c4dbaee7db6ec7955f7c2f6d396a6 Mon Sep 17 00:00:00 2001
From: Ruben Beltran del Rio <ruben@unlimited.pizza>
Date: Tue, 9 Mar 2021 22:43:12 +0100
Subject: Update to SvelteKit

---
 src/components/forum_list/forum_list.svelte | 52 +++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/components/forum_list/forum_list.svelte

(limited to 'src/components/forum_list')

diff --git a/src/components/forum_list/forum_list.svelte b/src/components/forum_list/forum_list.svelte
new file mode 100644
index 0000000..174ae25
--- /dev/null
+++ b/src/components/forum_list/forum_list.svelte
@@ -0,0 +1,52 @@
+<script>
+  import { _ } from 'svelte-i18n';
+  import { forums } from '../../stores/forums.js';
+  import ErrorBlock from '../error_block/error_block.svelte';
+</script>
+
+<nav title="{$_('forum_list.title')}">
+  {#if !$forums.length}
+    <ErrorBlock message={$_('forum_list.error.unavailable')} />
+  {/if}
+  <ul>
+    {#each $forums 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>
+</nav>
+
+<style>
+  nav {
+    grid-column: col-start 1;
+    grid-row: 2;
+    border-right: 1px solid black;
+  }
+
+  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>
-- 
cgit