nuxt-app/app/components/TopNav.vue

<script setup lang="ts">
const menuOpen = ref(false)
const fontReady = ref(false)
const navHidden = ref(false)

const route = useRoute()

const links = [
  { label: '摄影', to: '/photo' },
  { label: '作品集', to: '/portfolio' },
  { label: '关于', to: '/about' },
]

let lastScrollY = 0
const HIDE_OFFSET = 520

function onScroll() {
  const y = window.scrollY
  if (y < HIDE_OFFSET) {
    navHidden.value = false
  } else if (y > lastScrollY + 8) {
    navHidden.value = true
  } else if (y < lastScrollY - 8) {
    navHidden.value = false
  }
  lastScrollY = y
}

onMounted(async () => {
  await useGoogleFont([{ family: 'Liu Jian Mao Cao', weight: 400 }])
  fontReady.value = true
  window.addEventListener('scroll', onScroll, { passive: true })
})

onUnmounted(() => {
  window.removeEventListener('scroll', onScroll)
})

watch(() => route.path, () => {
  menuOpen.value = false
})
</script>

<template>
  <nav class="top-nav" :style="{ transform: navHidden ? 'translateY(-100%)' : 'translateY(0)' }">
    <div class="nav-inner">
      <NuxtLink to="/" class="nav-logo" :class="{ ready: fontReady }">
        Dash
      </NuxtLink>

      <ul class="nav-links" :class="{ open: menuOpen }">
        <li v-for="link in links" :key="link.to">
          <NuxtLink
            :to="link.to"
            class="nav-link"
            active-class="active"
          >
            {{ link.label }}
          </NuxtLink>
        </li>
        <li class="mobile-auth">
          <NuxtLink to="/auth?tab=login" class="auth-link">登录</NuxtLink>
          <NuxtLink to="/auth?tab=register" class="auth-btn">注册</NuxtLink>
        </li>
      </ul>

      <div class="nav-auth">
        <NuxtLink to="/auth?tab=login" class="auth-link">登录</NuxtLink>
        <NuxtLink to="/auth?tab=register" class="auth-btn">注册</NuxtLink>
      </div>

      <button
        class="nav-toggle"
        :class="{ open: menuOpen }"
        aria-label="菜单"
        @click="menuOpen = !menuOpen"
      >
        <span />
        <span />
        <span />
      </button>
    </div>

    <Teleport to="body">
      <div
        v-if="menuOpen"
        class="nav-overlay"
        @click="menuOpen = false"
      />
    </Teleport>
  </nav>
</template>

<style scoped>
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 64px;
  background: rgba(250, 249, 245, 0.72);
  backdrop-filter: blur(16px) saturate(200%);
  -webkit-backdrop-filter: blur(16px) saturate(200%);
  border-bottom: 1px solid rgba(230, 223, 216, 0.6);
  transition: transform 0.35s ease;
  will-change: transform;
}

.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Logo ── */

.nav-logo {
  font-family: 'Liu Jian Mao Cao', cursive;
  font-size: 28px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-logo.ready {
  opacity: 1;
}

/* ── Desktop links ── */

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s ease;
  padding: 4px 0;
}

.nav-link:hover {
  color: var(--color-ink);
}

.nav-link.active {
  color: var(--color-ink);
}

/* ── Auth buttons ── */

.nav-auth {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mobile-auth {
  display: none;
}

.auth-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s ease;
  padding: 6px 0;
}

.auth-link:hover {
  color: var(--color-ink);
}

.auth-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-on-primary);
  background: var(--color-primary);
  text-decoration: none;
  padding: 7px 18px;
  border-radius: 9999px;
  transition: background 0.2s ease, transform 0.15s ease;
}

.auth-btn:hover {
  background: var(--color-primary-active);
}

.auth-btn:active {
  transform: scale(0.97);
}

/* ── Hamburger ── */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-ink);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Overlay ── */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(20, 20, 19, 0.3);
  backdrop-filter: blur(4px);
}

/* ── Mobile ── */

@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 64px;
    right: 0;
    z-index: 100;
    flex-direction: column;
    gap: 0;
    width: 240px;
    background: var(--color-canvas);
    border-left: 1px solid var(--color-hairline);
    border-bottom: 1px solid var(--color-hairline);
    border-radius: 0 0 12px 0;
    padding: 8px 0;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .nav-links.open {
    transform: translateX(0);
  }

  .nav-link {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    border-bottom: 1px solid var(--color-hairline-soft);
  }

  .nav-link:last-child {
    border-bottom: none;
  }

  .mobile-auth {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--color-hairline-soft);
  }

  .mobile-auth .auth-link {
    color: var(--color-muted);
  }

  .mobile-auth .auth-btn {
    align-self: flex-start;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-auth {
    display: none;
  }
}
</style>