X-Git-Url: https://git.r.bdr.sh/rbdr/forum/blobdiff_plain/bd8e98d7e24c4dbaee7db6ec7955f7c2f6d396a6..b15225c9dff2864ee774a0ab1dcf19d9353ec10b:/src/routes/%24layout.svelte

diff --git a/src/routes/$layout.svelte b/src/routes/$layout.svelte
index a848a59..234d26a 100644
--- a/src/routes/$layout.svelte
+++ b/src/routes/$layout.svelte
@@ -1,39 +1,46 @@
 <script>
-  import '$config/i18n';
-  import { isLoading, waitLocale } from 'svelte-i18n';
+	import '$/config/i18n';
 
-  export const load = function load() {
+	import { isLoading } from 'svelte-i18n';
+	import { _ } from 'svelte-i18n';
 
-    return waitLocale;
-  };
+	import { getForums } from '$/stores/forums';
 
-  import ForumList from '$components/forum_list/forum_list.svelte';
-  import Header from '$components/header/header.svelte';
-  import Footer from '$components/footer/footer.svelte';
+	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}
-  <h1>Loading.</h1>
-  <p>Please wait.</p>
+	<Loader />
 {:else}
-  <Header />
-  <main>
-    <slot></slot>
-  </main>
-  <ForumList />
-  <Footer />
+	<Header />
+	<main>
+		<slot />
+	</main>
+  <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>
-  main {
-    grid-column: col-start 2 / span 11;
-  }
-
-  :global(#forum) {
-    display: grid;
-    font-family : 'ヒラギノ明朝 ProN' , 'Hiragino Mincho ProN' , '游明朝','游明朝体',YuMincho,'Yu Mincho' , 'ＭＳ 明朝' , 'MS Mincho' , HiraMinProN-W3 , 'TakaoEx明朝' , TakaoExMincho , 'MotoyaLCedar' , 'Droid Sans Japanese' , serif;
-    grid-template-columns: repeat(12, [col-start] 1fr);
-    grid-gap: 20px;
-    grid-auto-rows: minmax(24px, auto);
-  }
+	nav {
+		grid-column: col-start 1;
+		grid-row: 2;
+		border-right: 1px solid black;
+	}
 </style>