<template>
  <header class="Header">
    <NuxtLink to="/">
      <strong><span>Pro</span>Papier</strong>
    </NuxtLink>
    <label for="burger_nav_toggle">
      <Icon name="solar:hamburger-menu-broken" size="2em" />
    </label>
    <input ref="checkbox" type="checkbox" id="burger_nav_toggle"/>
    <nav class="flex-col">
      <label for="burger_nav_toggle">
        <Icon name="solar:close-circle-broken" />
      </label>
      <ul class="flex-col">
        <li v-for="navPoint in navPoints" :key="navPoint.label">
          <NuxtLink
            :to="navPoint.to"
            active-class="active"
            @click="closeNav()"
          >
            {{ navPoint.label }}
          </NuxtLink>
        </li>
      </ul>
    </nav>
  </header>
</template>

<script setup lang="ts">
type NavPoint = {
  label: string
  to: string
}

const navPoints = useState<NavPoint[]>('nav', () => ([
  {
    label: 'Home',
    to: '/',
  },
  {
    label: 'Übersicht',
    to: '/overview',
  },
]))

const cb = useTemplateRef('checkbox')
const closeNav = () => { cb.value!.checked = false }

</script>

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