Add tests for header

[rbdr/forum] / src / routes / $layout.svelte

diff --git a/src/routes/$layout.svelte b/src/routes/$layout.svelte
index a848a59fce3f79ffc03508c3973bfc695fe1ae7b..8fd2ae04c247ac23f8a08af1faf2076335663d6b 100644 (file)
--- a/src/routes/$layout.svelte
+++ b/src/routes/$layout.svelte
@@ -1,39 +1,43 @@
 <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 { forums } 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';
 </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 $forums.loading}
+      <Loader />
+    {/if}
+    {#if $forums.error}
+      <ErrorBlock message={$_('forum_list.error.unavailable')} />
+    {/if}
+    {#if $forums.data}
+      <ForumList forums={$forums.data} />
+    {/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>