<template>
  <header
    class="fixed top-0 left-0 right-0 z-50 bg-gray-900 dark:bg-[#272929] text-white shadow-md transition-colors duration-300"
  >
    <div class="mx-auto md:px-6 px-3 py-3 flex items-center justify-between">
      <NuxtLink to="/" class="flex items-center space-x-2">
        <img
          width="30"
          height="30"
          src="../../assets/Annie-logo.jpg"
          alt="Annie-logo"
          fetchpriority="high"
        />
        <h1 style="font-size: 0px">
          {{ webSite.webname }}
        </h1>
        <h2 class="md:text-xl text-base font-bold">
          {{ webSite.webname.split("|")[0] }}
        </h2>
      </NuxtLink>

      <div class="flex items-center gap-2">
        <MySearch />
        <MyI18n />
        <MyMenu />
      </div>
    </div>
  </header>
</template>

<script setup>
const webSite = useState("webSite");
</script>

<style scoped lang="less"></style>