<script>
import '$/config/i18n';
+
import { isLoading } from 'svelte-i18n';
+ import { _ } from 'svelte-i18n';
+
+ import { getForums } from '$/stores/forums';
+
+ import ErrorBlock from '$/components/error_block/error_block.svelte';
import ForumList from '$/components/forum_list/forum_list.svelte';
import Header from '$/components/header/header.svelte';
import Loader from '$/components/loader/loader.svelte';
import Footer from '$/components/footer/footer.svelte';
+
+ $: store = getForums();
+ $: forums = $store.data;
</script>
{#if $isLoading}
<main>
<slot />
</main>
- <ForumList />
+ <nav title={$_('forum_list.title')}>
+ {#if $store.loading}
+ <Loader />
+ {/if}
+ {#if $store.error}
+ <ErrorBlock message={$_('forum_list.error.unavailable')} />
+ {/if}
+ {#if forums}
+ <ForumList forums={forums} />
+ {/if}
+ </nav>
<Footer />
{/if}
+
+<style>
+ nav {
+ grid-column: col-start 1;
+ grid-row: 2;
+ border-right: 1px solid black;
+ }
+</style>