<script lang="ts">
  import { goto } from '$app/navigation';

  const routes = [
    'overview',
    'stress',
    'usesvelteflow',
    'validation'
  ];

  const onChange = (event: Event) => {
    const route = (event.target as HTMLSelectElement).value;
    goto(`/${route}`);
  };
</script>

<header>
  <div class="logo">SvelteFlow</div>
  <select on:change={onChange}>
    {#each routes as route}
      <option value={route}>{route}</option>
    {/each}
  </select>
</header>

<style>
  header {
    padding: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    font-weight: 700;
    align-items: center;
    color: #111;
  }

  .logo {
    margin-right: 1rem;
  }
</style>