Add svelte frontend

2 files changed, 32 insertions, 0 deletions

diff --git a/app/components/forum_list/forum_list.svelte b/app/components/forum_list/forum_list.svelte
new file mode 100644
index 0000000..905421e
--- /dev/null
+++ b/app/components/forum_list/forum_list.svelte
@@ -0,0 +1,21 @@
+<script>
+  import {forums, addForum} from '../../models/forums.js'
+
+  import { fade } from 'svelte/transition';
+</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>
diff --git a/app/components/header/header.svelte b/app/components/header/header.svelte
new file mode 100644
index 0000000..15b75b8
--- /dev/null
+++ b/app/components/header/header.svelte
@@ -0,0 +1,11 @@
+<header>
+  <nav class="top-navigation">
+    <ul>
+      <li><strong><a href="/">Forum v1.0.0</a></strong></li>
+      <li><a href="/new"><u class="action-key">N</u>ew Post</a></li>
+      <li><a href="/reply"><u class="action-key">R</u>eply</a></li>
+      <li><a href="/search"><u class="action-key">S</u>earch</a></li>
+      <li><a href="/logout">Log <u class="action-key">O</u>ut</a></li>
+    </ul>
+  </nav>
+</header>