<template>
  <!-- 顶部导航栏 -->
  <header
    class="fixed top-0 left-0 right-0 z-50 bg-gray-900 text-white shadow-md"
  >
    <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">
        <el-icon :size="24"><Promotion /></el-icon>
        <h1 class="md:text-xl text-base font-bold">
          {{ webSite.webname }}
        </h1>
      </NuxtLink>

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

<script setup>
import { Promotion } from "@element-plus/icons-vue";
const webSite = useState("webSite");
</script>

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