111 lines
3.8 KiB
TypeScript
111 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
const navLinks = [
|
|
{ label: "城市", icon: "🏙️", href: "/" },
|
|
{ label: "旅行", icon: "✈️", href: "/meetups" },
|
|
{ label: "社区", icon: "💬", href: "/dating" },
|
|
{ label: "探索", icon: "🎒", href: "/#community" },
|
|
];
|
|
|
|
export default function Navbar() {
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
const pathname = usePathname();
|
|
|
|
function isActive(href: string) {
|
|
if (href.startsWith("/#")) return false;
|
|
if (href === "/") return pathname === "/";
|
|
return pathname.startsWith(href);
|
|
}
|
|
|
|
return (
|
|
<nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-lg border-b border-gray-100">
|
|
<div className="max-w-[1600px] mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center gap-2 shrink-0">
|
|
<span className="text-2xl">🌏</span>
|
|
<span className="text-lg font-bold text-gray-900 tracking-tight">
|
|
游牧中国
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Center Nav */}
|
|
<div className="hidden md:flex items-center gap-1">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.label}
|
|
href={link.href}
|
|
className={`flex items-center gap-1.5 px-4 py-2 rounded-full text-sm font-medium transition-colors ${
|
|
isActive(link.href)
|
|
? "text-gray-900 bg-gray-100"
|
|
: "text-gray-500 hover:text-gray-900 hover:bg-gray-50"
|
|
}`}
|
|
>
|
|
<span>{link.icon}</span>
|
|
<span>{link.label}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right Side */}
|
|
<div className="flex items-center gap-2 sm:gap-3">
|
|
<button className="hidden sm:block text-sm text-gray-600 hover:text-gray-900 px-3 py-2 rounded-full hover:bg-gray-50 transition-colors">
|
|
登录
|
|
</button>
|
|
<Link
|
|
href="/join"
|
|
className="text-sm bg-[#ff4d4f] text-white px-4 py-2 rounded-full hover:bg-[#ff7a45] transition-colors font-medium"
|
|
>
|
|
加入我们 →
|
|
</Link>
|
|
|
|
{/* Mobile hamburger */}
|
|
<button
|
|
className="md:hidden ml-1 p-2 rounded-lg hover:bg-gray-100"
|
|
onClick={() => setMobileOpen(!mobileOpen)}
|
|
>
|
|
{mobileOpen ? (
|
|
<svg width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
|
<path d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
) : (
|
|
<svg width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
|
<path d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{mobileOpen && (
|
|
<div className="md:hidden border-t border-gray-100 bg-white px-4 py-3 space-y-1">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.label}
|
|
href={link.href}
|
|
className={`flex items-center gap-2 px-4 py-3 rounded-xl text-sm font-medium ${
|
|
isActive(link.href)
|
|
? "text-gray-900 bg-gray-50"
|
|
: "text-gray-500 hover:bg-gray-50"
|
|
}`}
|
|
onClick={() => setMobileOpen(false)}
|
|
>
|
|
<span className="text-lg">{link.icon}</span>
|
|
<span>{link.label}</span>
|
|
</Link>
|
|
))}
|
|
<div className="pt-2 border-t border-gray-100">
|
|
<button className="w-full text-left px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded-xl">
|
|
登录
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
}
|