62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { Home, User } from "lucide-react"
|
|
|
|
export function BottomNav() {
|
|
const pathname = usePathname()
|
|
|
|
// 在文档页面和管理后台不显示底部导航
|
|
if (pathname.startsWith("/documentation") || pathname.startsWith("/admin")) {
|
|
return null
|
|
}
|
|
|
|
const navItems = [
|
|
{ href: "/", icon: Home, label: "首页" },
|
|
{ href: "/match", emoji: "🤝", label: "匹配合作" },
|
|
{ href: "/my", icon: User, label: "我的" },
|
|
]
|
|
|
|
return (
|
|
<>
|
|
{/* iOS风格底部导航 - 只有3个按钮 */}
|
|
<nav className="fixed bottom-0 left-0 right-0 z-40 glass-nav safe-bottom">
|
|
<div className="flex items-center justify-around py-2 max-w-lg mx-auto">
|
|
{navItems.map((item, index) => {
|
|
const isActive = pathname === item.href || (item.href === '/match' && pathname.startsWith('/match'))
|
|
const Icon = item.icon
|
|
|
|
return (
|
|
<Link
|
|
key={index}
|
|
href={item.href!}
|
|
className="flex flex-col items-center py-2 px-4 sm:px-6 touch-feedback transition-all duration-200"
|
|
>
|
|
<div className={`w-7 h-7 flex items-center justify-center mb-1 transition-colors ${
|
|
isActive ? "text-[var(--app-brand)]" : "text-[var(--app-text-tertiary)]"
|
|
}`}>
|
|
{item.emoji ? (
|
|
<span className="text-2xl">{item.emoji}</span>
|
|
) : (
|
|
<Icon className="w-6 h-6" strokeWidth={isActive ? 2.5 : 1.5} />
|
|
)}
|
|
</div>
|
|
<span className={`text-[10px] font-medium transition-colors ${
|
|
isActive ? "text-[var(--app-brand)]" : "text-[var(--app-text-tertiary)]"
|
|
}`}>
|
|
{item.label}
|
|
</span>
|
|
{/* 激活指示器 */}
|
|
{isActive && (
|
|
<div className="absolute -bottom-0.5 w-1 h-1 rounded-full bg-[var(--app-brand)]" />
|
|
)}
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|