git.r.bdr.sh - rbdr/forum/blob - 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>