bandolier-template/commands/templates/rendered/Header.svelte

<script>
  import Icon from '$/client/components/Icon.svelte';
  import Darkmode from '$/client/components/Darkmode.svelte';
  import { Hydrate } from '@jamcart/7ty/components';
  import { register_enabled } from "$/client/config.js";

  export let fixed = false;
</script>

<style>
img.logo {
  width: 120px;
}
</style>

<header class:fixed>
  <nav>
    <a href="/"><img class="logo" src="/logo.svg" alt="LJSTHW" aria-label="LJSTHW" ></a>
      <ul>
        {#if register_enabled}
          <li>
            <a id="register-button" href="/client/#/register/">
              <span class="mobile">
                <Icon name="dollar-sign" tooltip="Register." />
              </span>

              <span class="mobile-hide">
                <button type="button">Register</button>
              </span>
            </a>
          </li>
        {/if}
        <li><a href="/client/#/login/"><Icon name="log-in" tooltip="Log in."/></a></li>
        <li><a href="/blog/"><Icon name="book" tooltip="Blog posts." /></a></li>
        <li><a href="/client/#/live/"><Icon name="video" tooltip="Livestreams." tip_position="bottom-left" /></a></li>
        <li><a href="/feed.rss"><Icon name="rss" tooltip="RSS Feed." tip_position="bottom-left" /></a></li>
        <li><Hydrate component={ Darkmode } /></li>
      </ul>
  </nav>
</header>