99 lines
2.0 KiB
Plaintext
99 lines
2.0 KiB
Plaintext
|
---
|
||
|
|
const pathname = Astro.url.pathname;
|
||
|
|
|
||
|
|
const navItems = [
|
||
|
|
{ href: '/waitlist', label: '等待名单' },
|
||
|
|
{ href: '/changelog', label: '更新日志' },
|
||
|
|
{ href: '/support', label: '支持' },
|
||
|
|
];
|
||
|
|
---
|
||
|
|
|
||
|
|
<header class="header">
|
||
|
|
<nav class="nav">
|
||
|
|
<a href="/" class="logo">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
|
||
|
|
<path d="M8 12h8M12 8v8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
|
|
</svg>
|
||
|
|
<span>龙德</span>
|
||
|
|
</a>
|
||
|
|
<div class="nav-links">
|
||
|
|
{navItems.map(item => (
|
||
|
|
<a
|
||
|
|
href={item.href}
|
||
|
|
class:list={['nav-link', { active: pathname === item.href }]}
|
||
|
|
>
|
||
|
|
{item.label}
|
||
|
|
</a>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.header {
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
z-index: 100;
|
||
|
|
background: rgba(255, 255, 255, 0.8);
|
||
|
|
backdrop-filter: blur(20px);
|
||
|
|
-webkit-backdrop-filter: blur(20px);
|
||
|
|
border-bottom: 1px solid var(--color-border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav {
|
||
|
|
max-width: var(--max-width);
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 0 var(--page-padding);
|
||
|
|
height: 52px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
font-size: 1.125rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--color-text);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo:hover {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo svg {
|
||
|
|
color: var(--color-accent);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-links {
|
||
|
|
display: flex;
|
||
|
|
gap: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-link {
|
||
|
|
font-size: 0.875rem;
|
||
|
|
color: var(--color-text-secondary);
|
||
|
|
text-decoration: none;
|
||
|
|
transition: color 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-link:hover,
|
||
|
|
.nav-link.active {
|
||
|
|
color: var(--color-text);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 640px) {
|
||
|
|
.nav-links {
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-link {
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|