git.r.bdr.sh - rbdr/forum/blob - src/components/header/header.svelte

   1 <script>
   2   import { _ } from 'svelte-i18n';
   3
   4   import { params } from '@roxi/routify';
   5   import { version } from '$/config/config';
   6 </script>
   7
   8 <header title="{$_('header.title')}">
   9   <ul>
  10     <li><strong><a href="/" aria-label="{$_('header.long_version', { values: { version } })}">{$_('header.short_version', { values: { version } })}</a></strong></li>
  11     <li><a href="/new" aria-label="{$_('header.action.new.title')}">{@html $_('header.action.new.display')}</a></li>
  12     {#if $params.topic_id}
  13       <li><a href="/reply/{$params.topic_id}" aria-label="{$_('header.action.reply.title')}">{@html $_('header.action.reply.display')}</a></li>
  14     {/if}
  15     <li><a href="/search" aria-label="{$_('header.action.search.title')}">{@html $_('header.action.search.display')}</a></li>
  16     <li><a href="/logout" aria-label="{$_('header.action.log_out.title')}">{@html $_('header.action.log_out.display')}</a></li>
  17   </ul>
  18 </header>
  19
  20 <style>
  21   header {
  22     grid-column: col-start 1 / span 12;
  23     border-bottom: 1px solid black;
  24   }
  25
  26   ul {
  27     padding: 0;
  28   }
  29
  30   .action-key {
  31     font-weight: bold;
  32     text-decoration: underline;
  33   }
  34
  35   li {
  36     display: inline;
  37     margin: 5px;
  38   }
  39
  40   a {
  41     text-decoration: none;
  42     line-height: 3em;
  43     display: inline-block;
  44   }
  45
  46   strong a {
  47     color: blue;
  48     text-decoration: underline;
  49   }
  50
  51 </style>