58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import Link from "next/link"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export default function Navbar() {
|
|
const [scrolled, setScrolled] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setScrolled(window.scrollY > 10)
|
|
window.addEventListener("scroll", onScroll)
|
|
return () => window.removeEventListener("scroll", onScroll)
|
|
}, [])
|
|
|
|
return (
|
|
<header className="fixed top-0 left-0 w-full z-50 flex justify-center pt-4">
|
|
|
|
<nav
|
|
className={cn(
|
|
"flex items-center transition-all duration-500",
|
|
|
|
scrolled
|
|
? `
|
|
px-6 py-3
|
|
bg-[rgba(37,37,37,0.6)]
|
|
backdrop-blur-[10px]
|
|
rounded-full
|
|
shadow-[0_20px_60px_rgba(0,0,0,0.65)]
|
|
ring-1 ring-white/10
|
|
`
|
|
: `
|
|
px-6 py-3
|
|
bg-transparent
|
|
`
|
|
)}
|
|
>
|
|
<ul className="flex items-center gap-8 text-sm text-white/80">
|
|
<li>
|
|
<Link href="/" className="hover:text-white transition">
|
|
Home
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/about" className="hover:text-white transition">
|
|
About Me
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/projects" className="hover:text-white transition">
|
|
Projects
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
)
|
|
} |