135 lines
4.6 KiB
Vue
135 lines
4.6 KiB
Vue
<template>
|
|
<header class="fixed top-0 w-full z-50 glass-nav transition-all duration-300" id="main-header">
|
|
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
|
<div class="cursor-pointer group" @click="goTo('/')">
|
|
<span class="font-serif text-2xl italic tracking-wider text-white group-hover:text-art-accent transition-colors">年糕崽崽.Dev</span>
|
|
</div>
|
|
<nav class="hidden md:flex items-center gap-10">
|
|
<button
|
|
@click="goTo('/')"
|
|
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
|
|
:class="{ 'text-white after:w-full': activeNav === 'home' }"
|
|
data-target="home"
|
|
>
|
|
首页
|
|
</button>
|
|
<button
|
|
@click="goTo('/blog')"
|
|
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
|
|
:class="{ 'text-white after:w-full': activeNav === 'blog' }"
|
|
data-target="blog"
|
|
>
|
|
思考
|
|
</button>
|
|
<button
|
|
@click="goTo('/works')"
|
|
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
|
|
:class="{ 'text-white after:w-full': activeNav === 'works' }"
|
|
data-target="works"
|
|
>
|
|
作品
|
|
</button>
|
|
<button
|
|
@click="goTo('/snippets')"
|
|
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
|
|
:class="{ 'text-white after:w-full': activeNav === 'snippets' }"
|
|
data-target="snippets"
|
|
>
|
|
代码
|
|
</button>
|
|
<button
|
|
@click="goTo('/about')"
|
|
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
|
|
:class="{ 'text-white after:w-full': activeNav === 'about' }"
|
|
data-target="about"
|
|
>
|
|
关于
|
|
</button>
|
|
</nav>
|
|
<div class="hidden md:flex items-center gap-4">
|
|
<a href="#" class="text-art-muted hover:text-white transition-colors"><i data-lucide="github" class="w-5 h-5"></i></a>
|
|
<a href="/admin" target="_blank" class="text-art-muted hover:text-white transition-colors" title="后台管理">
|
|
<i data-lucide="layout-dashboard" class="w-5 h-5"></i>
|
|
</a>
|
|
<button @click="goTo('/services')" class="px-5 py-2 text-xs font-bold tracking-widest uppercase border border-white/20 hover:border-art-accent hover:text-art-accent transition-all rounded-full">
|
|
合作
|
|
</button>
|
|
</div>
|
|
<button class="md:hidden text-white" @click="toggleMobileMenu">
|
|
<i data-lucide="menu" class="w-6 h-6"></i>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onUpdated, watch, nextTick } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const activeNav = ref('home')
|
|
|
|
const toggleMobileMenu = () => {
|
|
const menu = document.getElementById('mobile-menu')
|
|
if (menu) {
|
|
if (menu.classList.contains('menu-closed')) {
|
|
menu.classList.remove('menu-closed')
|
|
menu.classList.add('menu-open')
|
|
document.body.style.overflow = 'hidden'
|
|
} else {
|
|
menu.classList.remove('menu-open')
|
|
menu.classList.add('menu-closed')
|
|
document.body.style.overflow = ''
|
|
}
|
|
}
|
|
}
|
|
|
|
const navigate = (target: string) => {
|
|
router.push(target)
|
|
toggleMobileMenu()
|
|
}
|
|
|
|
const updateActiveNav = () => {
|
|
const path = route.path
|
|
if (path === '/') activeNav.value = 'home'
|
|
else if (path === '/blog' || path.startsWith('/blog/')) activeNav.value = 'blog'
|
|
else if (path === '/columns' || path.startsWith('/columns/')) activeNav.value = 'columns'
|
|
else if (path === '/categories' || path.startsWith('/categories/')) activeNav.value = 'categories'
|
|
else if (path === '/works' || path.startsWith('/works/')) activeNav.value = 'works'
|
|
else if (path === '/snippets') activeNav.value = 'snippets'
|
|
else if (path === '/services') activeNav.value = 'services'
|
|
else if (path === '/about') activeNav.value = 'about'
|
|
}
|
|
|
|
const refreshIcons = () => {
|
|
if ((window as any).lucide) {
|
|
(window as any).lucide.createIcons()
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
updateActiveNav()
|
|
refreshIcons()
|
|
})
|
|
|
|
onUpdated(() => {
|
|
refreshIcons()
|
|
})
|
|
|
|
watch(
|
|
() => route.path,
|
|
() => {
|
|
updateActiveNav()
|
|
nextTick(refreshIcons)
|
|
}
|
|
)
|
|
|
|
const goTo = (target: string) => {
|
|
router.push(target)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 组件特定样式可以在这里添加 */
|
|
</style> |