---
import { SITE_TITLE } from "../consts"
import { ref } from "vue"
import NavigationUser from "./NavigationUser.vue"

const menuList = ref<{
  link: string
  name: string
}[]>([
  {
    link: "/archive",
    name: "目录",
  },
  // {
  //   link: "https://repair.nbtca.space",
  //   name: "维修",
  // },
  {
    link: "/calendar",
    name: "日历",
  },
  {
    link: "/about",
    name: "关于我们",
  },
])

---

  <nav class="nav">
    <div class="nav-wrapper">
      <div class="nav-content-wrapper">
        <div class="flex items-center justify-between">
          <a href="/" class="nav-title flex items-center gap-3">
            <img
              src="https://oss.nbtca.space/CA-logo.svg"
              alt=""
              style="width: 32px; aspect-ratio: 1;"
            />
            <span class="hidden md:block">
              {SITE_TITLE}
            </span>
          </a>
          <div class="flex items-center">
            {
              menuList.value.map(menu =>
                (
                  <div class="px-3 lg:px-4">
                    <a href={menu.link} class="nav-item-content hover:text-[#2997ff] text-nowrap">{menu.name}</a>
                  </div>
                ),
              )
            }
            <div class="hidden lg:bock h-4 w-[0.5px] bg-gray-300 ml-1 mr-3"></div>
            <NavigationUser client:load />
          </div>
        </div>
      </div>
    </div>
  </nav>
