114 lines
4.0 KiB
TypeScript
114 lines
4.0 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import Link from "next/link"
|
|
import Image from "next/image"
|
|
import { Menu, X } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export default function Header() {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
|
const [scrolled, setScrolled] = useState(false)
|
|
const [activeSection, setActiveSection] = useState("home")
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setScrolled(window.scrollY > 10)
|
|
|
|
// Determine active section based on scroll position
|
|
const sections = ["home", "about", "team-groups", "achievements", "robots", "contact"]
|
|
for (const section of sections.reverse()) {
|
|
const element = document.getElementById(section)
|
|
if (element && window.scrollY >= element.offsetTop - 100) {
|
|
setActiveSection(section)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
window.addEventListener("scroll", handleScroll)
|
|
return () => window.removeEventListener("scroll", handleScroll)
|
|
}, [])
|
|
|
|
const toggleMenu = () => {
|
|
setIsMenuOpen(!isMenuOpen)
|
|
}
|
|
|
|
const navLinks = [
|
|
{ name: "主页", href: "#home", id: "home", en: "INDEX" },
|
|
{ name: "关于", href: "#about", id: "about", en: "INFORMATION" },
|
|
{ name: "团队", href: "#team-groups", id: "team-groups", en: "OPERATOR" },
|
|
{ name: "成就", href: "#achievements", id: "achievements", en: "GAMEPLAY" },
|
|
{ name: "机器人", href: "#robots", id: "robots", en: "ROBOTS" },
|
|
{ name: "联系我们", href: "#contact", id: "contact", en: "NEWS" },
|
|
]
|
|
|
|
return (
|
|
<header
|
|
className={cn(
|
|
"fixed top-0 left-0 right-0 z-50 transition-all duration-300",
|
|
scrolled ? "bg-background/90 backdrop-blur-md" : "bg-transparent",
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between px-4 py-3">
|
|
<Link href="/" className="flex items-center gap-2 z-10">
|
|
<Image src="/logo.svg" alt="Simba Robotics Logo" width={40} height={40} className="w-10 h-10" />
|
|
<div className="flex flex-col">
|
|
<span className="font-bold text-lg tracking-wider">SIMBA</span>
|
|
<span className="text-xs text-muted-foreground font-mono">ROBOTICS</span>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex items-center">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.name}
|
|
href={link.href}
|
|
className={cn(
|
|
"px-6 py-2 flex flex-col items-center text-sm transition-colors",
|
|
activeSection === link.id
|
|
? "text-foreground nav-active"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
<span className="text-xs font-mono uppercase">{link.en}</span>
|
|
<span>{link.name}</span>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{/* Mobile Menu Button */}
|
|
<Button variant="ghost" size="icon" className="md:hidden button-hover-effect" onClick={toggleMenu}>
|
|
{isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
{isMenuOpen && (
|
|
<div className="md:hidden bg-background/95 backdrop-blur-md">
|
|
<nav className="flex flex-col">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.name}
|
|
href={link.href}
|
|
className={cn(
|
|
"px-4 py-3 border-b border-border/30 transition-colors flex items-center justify-between",
|
|
activeSection === link.id ? "text-primary" : "text-muted-foreground",
|
|
)}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<span>{link.name}</span>
|
|
<span className="text-xs font-mono uppercase">{link.en}</span>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</header>
|
|
)
|
|
}
|