<template>
  <header class="Header">
    <NuxtLink to="/">
      <strong><span>Pro</span>Papier</strong>
    </NuxtLink>
    <label for="burger_nav_toggle" v-if="available">
      <Icon name="solar:hamburger-menu-broken" size="2em" />
    </label>
    <input type="checkbox" id="burger_nav_toggle" v-if="available" />
    <nav class="flex-col" v-if="available">
      <label for="burger_nav_toggle">
        <Icon name="solar:close-circle-broken" />
      </label>
      <ul class="flex-col">
        <li>Home</li>
        <li>Übersicht</li>
      </ul>
    </nav>
  </header>
</template>

<script setup lang="ts">
const available = false
</script>

<style scoped>
  header a {
    text-decoration: none;
    color: var(--color-black);
  }
</style>