66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import Link from "next/link"
|
|
import { cn } from "@/lib/utils"
|
|
import { ThemeSwitch } from "./theme-switch"
|
|
import { useTranslations } from "next-intl"
|
|
import { LocaleSwitch } from "./locale-switch"
|
|
|
|
export default function Navbar() {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
const t = useTranslations('pages');
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setScrolled(window.scrollY > 10)
|
|
|
|
onScroll()
|
|
|
|
window.addEventListener("scroll", onScroll)
|
|
return () => window.removeEventListener("scroll", onScroll)
|
|
}, [])
|
|
|
|
return (
|
|
<header className="sticky top-0 left-0 w-full z-50 flex justify-center p-10">
|
|
|
|
<nav
|
|
className={cn(
|
|
"flex-1 flex items-center justify-between px-7 py-4 rounded-full transition-all duration-700",
|
|
|
|
scrolled
|
|
? [
|
|
"border border-foreground/10",
|
|
"backdrop-blur-xl backdrop-saturate-150",
|
|
"shadow-[0_4px_24px_-4px_hsl(0_0%_0%/0.12),inset_0_1px_0_0_hsl(0_0%_100%/0.12)]",
|
|
].join(" ")
|
|
: "border-transparent bg-transparent"
|
|
)}
|
|
>
|
|
<h1 className={cn("text-4xl font-medium")}>bH</h1>
|
|
|
|
<ul className="flex items-center gap-8 text-sm text-foreground/60">
|
|
<li>
|
|
<Link href="/" className="hover:text-foreground transition">
|
|
{t('home')}
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/about" className="hover:text-foreground transition">
|
|
{t('aboutMe')}
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/projects" className="hover:text-foreground transition">
|
|
{t('projects')}
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
|
|
<div className="flex gap-3">
|
|
<ThemeSwitch/>
|
|
<LocaleSwitch/>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
)
|
|
} |