<script>
- import { _ } from 'svelte-i18n';
+ import { _ } from 'svelte-i18n';
+ import { version } from '$/config/config';
+ import { actions } from '$/stores/actions';
- import { version } from '$/config/config';
+ $: topic_id = $actions.topic_id;
</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 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>
+ {#if topic_id}
+ <li>
+ <a href="/reply/{topic_id}" aria-label={$_('header.action.reply.title')}
+ >{@html $_('header.action.reply.display')}</a
+ >
+ </li>
+ {/if}
+ <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;
- }
+ header {
+ grid-column: col-start 1 / span 12;
+ border-bottom: 1px solid black;
+ }
- ul {
- padding: 0;
- }
+ ul {
+ padding: 0;
+ }
- .action-key {
- font-weight: bold;
- text-decoration: underline;
- }
+ li {
+ display: inline;
+ margin: 5px;
+ }
- li {
- display: inline;
- margin: 5px;
- }
-
- a {
- text-decoration: none;
- line-height: 3em;
- display: inline-block;
- }
-
- strong a {
- color: blue;
- text-decoration: underline;
- }
+ a {
+ text-decoration: none;
+ line-height: 3em;
+ display: inline-block;
+ }
+ strong a {
+ color: blue;
+ text-decoration: underline;
+ }
</style>