<template>
  <div class="Header" :class="[type]">
    <header class="roboto-condensed">
      <NuxtLink class="header-text" to="/">
        <img class="logo" src="/img/propapier.svg" alt="ProPapier logo" />
        <div>
          <span class="big">ProPapier</span>
          <span class="small">Vergleichen. Schnell. Unkompliziert.</span>
        </div>
      </NuxtLink>
      <button class="burger-button" @click="open()">
        <Icon name="uil:bars" size="2em" mode="svg" />
      </button>
    </header>
    <div id="subheader" />
  </div>
</template>

<script setup lang="ts">
type Props = {
  type ?: 'lp'
}

defineProps<Props>()

const nav = useNavigation()
const open = () => { nav.showNavigation() }
</script>