<template>
<header>
  <Button display="icon" color="inherit" @click="openNav">
    <FontAwesomeIcon :icon="faBarsStaggered" />
  </Button>
  {{ currentPage }}
</header>
</template>

<script setup lang="ts">
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faBarsStaggered } from '@fortawesome/pro-duotone-svg-icons/faBarsStaggered'
import { ref } from 'vue'
import { usePageStore } from '~/page.ts'
import Button from '@/Button.vue'
import { useNavigation } from '#/navigation.ts'

const currentPage = ref('Stimmung')
const pageStore = usePageStore()
pageStore.$subscribe((_, state) => {
  currentPage.value = state.name
})

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

<style scoped>
header {
  display: flex;
  align-items: center;
  font-size: var(--font-size-l);
  gap: var(--padding-default);
  padding: 0 var(--padding-default);
  color: var(--clr-current-light);
  background-color: var(--clr-current-dark);
  box-shadow: var(--box-shadow-z2);
}
</style>