<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="/" style="font-family: fancy; font-size: 2em;">The Bandolier</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="/client/#/"><Icon name="book" tooltip="Docs." /></a></li>
        <li><Hydrate component={ Darkmode } /></li>
      </ul>
  </nav>
</header>
