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

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