Update to SvelteKit

1 files changed, 48 insertions, 0 deletions

diff --git a/src/components/header/header.svelte b/src/components/header/header.svelte
new file mode 100644
index 0000000..36d4d50
--- /dev/null
+++ b/src/components/header/header.svelte
@@ -0,0 +1,48 @@
+<script>
+  import { _ } from 'svelte-i18n';
+
+  import { version } from '$config/config';
+</script>
+
+<header title="{$_('header.title')}">
+  <ul>
+    <li><strong><a href="/" aria-label="{$_('header.long_version', { values: { version } })}">{$_('header.short_version', { values: { version } })}</a></strong></li>
+    <li><a href="/new" aria-label="{$_('header.action.new.title')}">{@html $_('header.action.new.display')}</a></li>
+    <li><a href="/reply" aria-label="{$_('header.action.reply.title')}">{@html $_('header.action.reply.display')}</a></li>
+    <li><a href="/search" aria-label="{$_('header.action.search.title')}">{@html $_('header.action.search.display')}</a></li>
+    <li><a href="/logout" aria-label="{$_('header.action.log_out.title')}">{@html $_('header.action.log_out.display')}</a></li>
+  </ul>
+</header>
+
+<style>
+  header {
+    grid-column: col-start 1 / span 12;
+    border-bottom: 1px solid black;
+  }
+
+  ul {
+    padding: 0;
+  }
+
+  .action-key {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+
+  li {
+    display: inline;
+    margin: 5px;
+  }
+
+  a {
+    text-decoration: none;
+    line-height: 3em;
+    display: inline-block;
+  }
+
+  strong a {
+    color: blue;
+    text-decoration: underline;
+  }
+
+</style>