diff options
Diffstat (limited to 'src/components/header/header.svelte')
| -rw-r--r-- | src/components/header/header.svelte | 95 |
1 files changed, 56 insertions, 39 deletions
diff --git a/src/components/header/header.svelte b/src/components/header/header.svelte index c68a685..f33e77b 100644 --- a/src/components/header/header.svelte +++ b/src/components/header/header.svelte @@ -1,51 +1,68 @@ <script> - import { _ } from 'svelte-i18n'; + import { _ } from 'svelte-i18n'; + import { version } from '$/config/config'; + import { actions } from '$/stores/actions'; - import { params } from '@roxi/routify'; - 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> - {#if $params.topic_id} - <li><a href="/reply/{$params.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 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> |