Add skeleton for topic

Tested with VoiceOver

1 files changed, 44 insertions, 18 deletions

diff --git a/app/components/forum_list/forum_list.svelte b/app/components/forum_list/forum_list.svelte
index 905421e..e49c8d8 100644
--- a/app/components/forum_list/forum_list.svelte
+++ b/app/components/forum_list/forum_list.svelte
@@ -1,21 +1,47 @@
 <script>
-  import {forums, addForum} from '../../models/forums.js'
-
-  import { fade } from 'svelte/transition';
+  import {forums, addForum} from '../../stores/forums.js'
 </script>
 
-<aside>
-  <button on:click="{addForum}">Add a Forum</button>
-  <nav>
-    <ul>
-      {#each $forums as forum}
-        <li transition:fade>
-          <a href="/f/{forum.id}">
-            <span class="navigation-kanji">{forum.kanji}</span>
-            <span class="navigation-label">{forum.label}</span>
-          </a>
-        </li>
-      {/each}
-    </ul>
-  </nav>
-</aside>
+<nav title="List of Forums">
+  <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>