]> git.r.bdr.sh - rbdr/forum/blob - src/components/header/header.svelte
Update dependencies
[rbdr/forum] / src / components / header / header.svelte
1 <script>
2 import { _ } from 'svelte-i18n';
3 import { version } from '$/config/config';
4 import { actions } from '$/stores/actions';
5
6 $: topic_id = $actions.topic_id;
7 </script>
8
9 <header title={$_('header.title')}>
10 <ul>
11 <li>
12 <strong
13 ><a href="/" aria-label={$_('header.long_version', { values: { version } })}
14 >{$_('header.short_version', { values: { version } })}</a
15 ></strong
16 >
17 </li>
18 <li>
19 <a href="/new" aria-label={$_('header.action.new.title')}
20 >{@html $_('header.action.new.display')}</a
21 >
22 </li>
23 {#if topic_id}
24 <li>
25 <a href="/reply/{topic_id}" aria-label={$_('header.action.reply.title')}
26 >{@html $_('header.action.reply.display')}</a
27 >
28 </li>
29 {/if}
30 <li>
31 <a href="/search" aria-label={$_('header.action.search.title')}
32 >{@html $_('header.action.search.display')}</a
33 >
34 </li>
35 <li>
36 <a href="/logout" aria-label={$_('header.action.log_out.title')}
37 >{@html $_('header.action.log_out.display')}</a
38 >
39 </li>
40 </ul>
41 </header>
42
43 <style>
44 header {
45 grid-column: col-start 1 / span 12;
46 border-bottom: 1px solid black;
47 }
48
49 ul {
50 padding: 0;
51 }
52
53 li {
54 display: inline;
55 margin: 5px;
56 }
57
58 a {
59 text-decoration: none;
60 line-height: 3em;
61 display: inline-block;
62 }
63
64 strong a {
65 color: blue;
66 text-decoration: underline;
67 }
68 </style>