<template>
  <div class="Header">
    <NuxtLink class="header-text" to="/">
      <img class="logo" src="/img/propapier.svg" alt="ProPapier logo" />
    </NuxtLink>
    <div>
      <header class="roboto-condensed">
        <NuxtLink class="header-text" to="/">
          ProPapier
        </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>
      <div id="subheader" />
    </div>
  </div>
</template>

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