src/routes/__layout.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<script lang="ts">
	import '../app.css';
	import '$lib/i18n';

	import { isLoading } from 'svelte-i18n';
	import { _ } from 'svelte-i18n';

	import { getForums } from '$lib/stores/forums';

	import ErrorBlock from '$lib/components/error_block/error_block.svelte';
	import ForumList from '$lib/components/forum_list/forum_list.svelte';
	import Header from '$lib/components/header/header.svelte';
	import Loader from '$lib/components/loader/loader.svelte';
	import Footer from '$lib/components/footer/footer.svelte';

	$: store = getForums();
	$: forums = $store.data;
</script>

{#if $isLoading}
	<Loader />
{:else}
	<Header />
	<main class="col-start-2 col-span-11">
		<slot />
	</main>
	<nav
		class="col-start-1 row-start-2 border-r-2 border-2-black border-solid"
		title={$_('forum_list.title')}
	>
		{#if $store.loading}
			<Loader />
		{/if}
		{#if $store.error}
			<ErrorBlock message={$_('forum_list.error.unavailable')} />
		{/if}
		{#if forums}
			<ForumList {forums} />
		{/if}
	</nav>
	<Footer />
{/if}