<template>
  <header class="flex items-center p-4 relative md:py-0">
    <div>
      <NuxtLink :to="{ name: 'home' }" :aria-label="$texts('home', 'Home')">
        <SpriteSymbol
          name="logo"
          alt="Starterkit logo"
          class="aspect-[128/32] h-10"
        />
      </NuxtLink>
      <h2 class="sr-only">Starterkit Logo</h2>
    </div>

    <VuepalTransitionHeight>
      <div
        v-show="isMenuOpen"
        class="md:!flex md:flex-1 absolute top-full left-0 w-full bg-white z-50 md:static md:w-auto md:left-auto md:bg-transparent"
      >
        <PageHeaderGlobalMenu />
        <div class="flex justify-center md:ml-auto">
          <PageHeaderSearchLink />
          <PageHeaderLanguageSwitch />
        </div>
      </div>
    </VuepalTransitionHeight>

    <PageHeaderMenuButton v-model="isMenuOpen" class="md:hidden ml-auto" />
  </header>
</template>

<script setup lang="ts">
const { $texts } = useEasyTexts()
const isMenuOpen = ref(false)
</script>
