<script>
  import Icon from '$/client/components/Icon.svelte';
  import { register_enabled } from "$/client/config.js";

  export let fixed = false;
</script>

<style>
  #logo {
    font-family: fancy;
    font-size: 2em;
  }

  header {
    background-color: var(--value0);
  }

  header a {
    color: var(--value7);
  }

  nav {
    background-color: var(--value0);
    color: var(--value7);
  }

  nav * {
    color: var(--value7);
  }

  @media only screen and (max-width: 600px) {
    #logo {
      font-size: 1.5em;
    }
  }

  @media only screen and (max-width: 390px) {
    #logo {
      font-size: 1.4em;
    }
  }

</style>

<header class:fixed>
  <nav>
      <a href="/client/#/intro/" id="logo">The Bandolier</a>
      <ul>
        {#if register_enabled}
          <li><a id="register-button" href="/client/#/register/">
            <span class="mobile">
              <Icon color="var(--value7)" name="dollar-sign" tooltip="Register."/>
            </span>

            <span class="mobile-hide">
              <button type="button" class="inverted">Register</button>
            </span>
            </a>
          </li>
        {/if}
        <li><a href="/client/#/login/"><Icon color="var(--value7)" name="log-in" tooltip="Log in." /></a></li>
        <li><a href="/client/#/"><Icon color="var(--value7)" name="book" tooltip="Docs" /></a></li>
      </ul>
  </nav>
</header>
