<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>