<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';
+ 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';
</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 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>
<style>
- nav {
- grid-column: col-start 1;
- grid-row: 2;
- border-right: 1px solid black;
- }
+ 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>