68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import Link from 'next/link'
|
|
import { ThemeToggle } from '@/components/theme-toggle'
|
|
|
|
export function Navbar() {
|
|
const [isVisible, setIsVisible] = useState(true)
|
|
const [lastScrollY, setLastScrollY] = useState(0)
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const currentScrollY = window.scrollY
|
|
|
|
if (currentScrollY < 10) {
|
|
setIsVisible(true)
|
|
} else if (currentScrollY > lastScrollY) {
|
|
setIsVisible(false)
|
|
} else {
|
|
setIsVisible(true)
|
|
}
|
|
|
|
setLastScrollY(currentScrollY)
|
|
}
|
|
|
|
window.addEventListener('scroll', handleScroll, { passive: true })
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
}, [lastScrollY])
|
|
|
|
return (
|
|
<nav
|
|
className={`border-b-4 border-slate-700 bg-slate-900 dark:bg-zinc-950 sticky top-0 z-50 ${isVisible ? 'navbar-visible' : 'navbar-hidden'}`}
|
|
>
|
|
<div className="max-w-7xl mx-auto px-6 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-8">
|
|
<Link
|
|
href="/"
|
|
className="font-mono text-sm uppercase tracking-wider transition-colors cursor-pointer"
|
|
style={{ color: 'var(--neon-cyan)' }}
|
|
>
|
|
< HOME
|
|
</Link>
|
|
<span className="font-mono text-sm text-zinc-100 dark:text-zinc-300 uppercase tracking-wider">
|
|
// <span style={{ color: 'var(--neon-pink)' }}>BLOG</span> ARCHIVE
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-6">
|
|
<Link
|
|
href="/about"
|
|
className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer"
|
|
>
|
|
[ABOUT]
|
|
</Link>
|
|
<Link
|
|
href="/blog"
|
|
className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer"
|
|
>
|
|
[BLOG]
|
|
</Link>
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|