134 lines
4.2 KiB
TypeScript
134 lines
4.2 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { Menu, X } from 'lucide-react'
|
|
|
|
const navItems = [
|
|
{ label: 'About', href: '#about' },
|
|
{ label: 'Interests', href: '#interests' },
|
|
{ label: 'Projects', href: '#projects' },
|
|
{ label: 'Experience', href: '#experience' },
|
|
{ label: 'Topics', href: '#topics' },
|
|
{ label: 'Contact', href: '#contact' },
|
|
]
|
|
|
|
export default function Navigation() {
|
|
const [visible, setVisible] = useState(false)
|
|
const [mobileOpen, setMobileOpen] = useState(false)
|
|
const [activeSection, setActiveSection] = useState('')
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setVisible(window.scrollY > window.innerHeight * 0.6)
|
|
}
|
|
window.addEventListener('scroll', handleScroll, { passive: true })
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
setActiveSection(entry.target.id)
|
|
}
|
|
})
|
|
},
|
|
{ rootMargin: '-40% 0px -40% 0px' }
|
|
)
|
|
|
|
navItems.forEach((item) => {
|
|
const el = document.querySelector(item.href)
|
|
if (el) observer.observe(el)
|
|
})
|
|
|
|
return () => observer.disconnect()
|
|
}, [])
|
|
|
|
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
|
|
e.preventDefault()
|
|
const el = document.querySelector(href)
|
|
if (el) {
|
|
el.scrollIntoView({ behavior: 'smooth' })
|
|
setMobileOpen(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<nav
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
|
|
visible ? 'translate-y-0 opacity-100' : '-translate-y-full opacity-0'
|
|
}`}
|
|
>
|
|
<div className="glass">
|
|
<div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
<a
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
}}
|
|
className="font-mono text-sm text-grey-900 hover:text-pink-brand transition-colors tracking-widest"
|
|
>
|
|
depoliticized.
|
|
</a>
|
|
|
|
{/* Desktop nav */}
|
|
<div className="hidden md:flex items-center gap-8">
|
|
{navItems.map((item) => (
|
|
<a
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={(e) => handleClick(e, item.href)}
|
|
className={`text-xs font-display uppercase tracking-widest transition-colors relative ${
|
|
activeSection === item.href.slice(1)
|
|
? 'text-pink-brand'
|
|
: 'text-grey-600 hover:text-grey-900'
|
|
}`}
|
|
>
|
|
{item.label}
|
|
{activeSection === item.href.slice(1) && (
|
|
<span className="absolute -bottom-1 left-0 right-0 h-px bg-pink-brand" />
|
|
)}
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
{/* Mobile toggle */}
|
|
<button
|
|
className="md:hidden text-grey-900"
|
|
onClick={() => setMobileOpen(!mobileOpen)}
|
|
aria-label="Toggle menu"
|
|
>
|
|
{mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile menu */}
|
|
<div
|
|
className={`md:hidden glass overflow-hidden transition-all duration-300 ${
|
|
mobileOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
|
|
}`}
|
|
>
|
|
<div className="px-6 py-4 flex flex-col gap-4">
|
|
{navItems.map((item) => (
|
|
<a
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={(e) => handleClick(e, item.href)}
|
|
className={`text-sm font-display uppercase tracking-widest transition-colors ${
|
|
activeSection === item.href.slice(1)
|
|
? 'text-pink-brand'
|
|
: 'text-grey-600 hover:text-grey-900'
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|