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

<script>
  import { logout_user } from '$/client/api.js';
  import Icon from '$/client/components/Icon.svelte';
  import {link} from 'svelte-spa-router';
  import { user } from "$/client/stores.js";
  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>
  #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>
      {#if $user.authenticated}
        <a href="/" use:link id="logo">The Bandolier</a>
        <ul>
          <li><a href="/" on:click|preventDefault={ logout_user } data-testid="logout-link"><Icon color="var(--value7)" name="log-out" tooltip="Log out."/></a></li>
          <li><a data-testid="user-profile-button" href="/profile/" use:link><Icon color="var(--value7)" name="settings" tooltip="Settings."/></a></li>
          <li><a href="/feed.rss"><Icon color="var(--value7)" name="rss" tooltip="RSS Feed." tip_position="bottom-left" /></a></li>
          {#if $user.admin }
            <li><a href="/admin/#/"><Icon color="var(--value7)" name="keyboard" tooltip="Admin database."/></a></li>
          {/if}
      </ul>
      {:else}
        <!-- don't use:link because we want them to go to the landing page if they aren't logged in. -->
        <a href="/" use:link 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="/blog/"><Icon color="var(--value7)" name="book" tooltip="Blog." /></a></li>
          <li><a href="/client/#/live/"><Icon color="var(--value7)" name="video" tooltip="Livestreams." tip_position="bottom-left" /></a></li>
          <li><Hydrate
            component={ Darkmode }
            props={{
                   light_icon_color: "var(--color-text-header)",
                   dark_icon_color: "var(--color-text-header)"}}/></li>
        </ul>
      {/if}
  </nav>
</header>