--- /dev/null
+<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>