]> git.r.bdr.sh - rbdr/forum/blob - src/routes/__layout.svelte
Use tailwind, reference types
[rbdr/forum] / src / routes / __layout.svelte
1 <script lang="ts">
2 import '../app.css';
3 import '$lib/i18n';
4
5 import { isLoading } from 'svelte-i18n';
6 import { _ } from 'svelte-i18n';
7
8 import { getForums } from '$lib/stores/forums';
9
10 import ErrorBlock from '$lib/components/error_block/error_block.svelte';
11 import ForumList from '$lib/components/forum_list/forum_list.svelte';
12 import Header from '$lib/components/header/header.svelte';
13 import Loader from '$lib/components/loader/loader.svelte';
14 import Footer from '$lib/components/footer/footer.svelte';
15
16 $: store = getForums();
17 $: forums = $store.data;
18 </script>
19
20 {#if $isLoading}
21 <Loader />
22 {:else}
23 <Header />
24 <main class="col-start-2 col-span-11">
25 <slot />
26 </main>
27 <nav
28 class="col-start-1 row-start-2 border-r-2 border-2-black border-solid"
29 title={$_('forum_list.title')}
30 >
31 {#if $store.loading}
32 <Loader />
33 {/if}
34 {#if $store.error}
35 <ErrorBlock message={$_('forum_list.error.unavailable')} />
36 {/if}
37 {#if forums}
38 <ForumList {forums} />
39 {/if}
40 </nav>
41 <Footer />
42 {/if}