<script>
  export let segment;
  import { goto } from '@sapper/app';
  import Icon from './Icon.svelte';
</script>

<style lang="scss">
  @import "sass/_variables";

  #logo {
    font-size: 24px;
    text-shadow: 2px 2px $gray-color-dark;
  }

  .btn {
    background-color: $red !important;
    margin-left: 4px;
    border: 1px solid $black;
    height: 40px;
  }

  .navbar {
    background-color: $gray-color;
    min-height: 50px;
  }
</style>

<header class="navbar">
  <section class="navbar-section">
    <a class="navbar-brand mr-2" href="/">
      <div id="logo">BUTTONS</div>
    </a>
  </section>

  <section class="navbar-section">
    <a data-testid='nav-home-icon' rel="prefetch" class:btn-link="{ segment != undefined }" class="btn" href="/" alt="Home" aria-label="Home">
      <Icon name="home" size="32" tooltip="Home" tooltip_bottom={true} light={true}/>
    </a>
    <a data-testid='nav-manual-icon' class:btn-link="{ segment != 'manual' }" class="btn" href="manual" alt="Read the manual" aria-label="Read the manual">
      <Icon name="book-open" size="32" tooltip="Manual" tooltip_bottom={true} light={true} />
    </a>
  </section>
</header>

