Update dependencies

[rbdr/forum] / src / components / forum_list / forum_list.svelte

diff --git a/src/components/forum_list/forum_list.svelte b/src/components/forum_list/forum_list.svelte
index 2998c09c22136c100c01e9010d0bb6fda34d3e6a..aeb389ea143e78adf42e9373ffeb758e3b6529e8 100644 (file)
--- a/src/components/forum_list/forum_list.svelte
+++ b/src/components/forum_list/forum_list.svelte
@@ -1,56 +1,42 @@
 <script>
   import { _ } from 'svelte-i18n';
-  import { forums } from '$/stores/forums';
-  import Loader from '$/components/loader/loader.svelte';
-  import ErrorBlock from '$/components/error_block/error_block.svelte';
+  export let forums;
+
+  $: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
 </script>
 
-<nav title="{$_('forum_list.title')}">
-  {#if $forums.loading}
-    <Loader />
-  {/if}
-  {#if $forums.error}
-    <ErrorBlock message={$_('forum_list.error.unavailable')} />
-  {/if}
-  <ul>
-    {#each $forums.data 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>
+<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>
-  nav {
-    grid-column: col-start 1;
-    grid-row: 2;
-    border-right: 1px solid black;
-  }
-
-  ul {
-    padding: 0;
-  }
+       ul {
+               padding: 0;
+       }
 
-  li {
-    display: block;
-    text-align: left;
-    margin-bottom: 20px;
-  }
+       li {
+               display: block;
+               text-align: left;
+               margin-bottom: 20px;
+       }
 
-  .navigation-glyph {
-    font-size: 1.5rem;
-    display: block;
-  }
+       .navigation-glyph {
+               font-size: 1.5rem;
+               display: block;
+       }
 
-  .☽ {
-    font-size: 2rem;
-  }
+       .☽ {
+               font-size: 2rem;
+       }
 
-  a {
-    text-decoration: none;
-  }
+       a {
+               text-decoration: none;
+       }
 </style>