142 lines
4.4 KiB
TypeScript
142 lines
4.4 KiB
TypeScript
"use client"
|
|
|
|
import { Fragment, useEffect, useState } from "react"
|
|
import { cn } from "@/lib/utils"
|
|
import { ThemeSwitch } from "../../components/custom/theme-switch"
|
|
import { useTranslations } from "next-intl"
|
|
import { LocaleSwitch } from "../../components/custom/locale-switch"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Menu, X } from "lucide-react"
|
|
import { Link, usePathname } from "@/i18n/navigation"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
|
|
export default function Navbar() {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
const pathname = usePathname()
|
|
const t = useTranslations('pages');
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setScrolled(window.scrollY > 10)
|
|
|
|
onScroll()
|
|
|
|
window.addEventListener("scroll", onScroll)
|
|
return () => window.removeEventListener("scroll", onScroll)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const mediaQueryList = window.matchMedia("(min-width: 768px)");
|
|
|
|
const onChange = (event: MediaQueryListEvent) => {
|
|
if (event.matches) setMobileMenuOpen(false);
|
|
};
|
|
|
|
mediaQueryList.addEventListener("change", onChange);
|
|
return () => mediaQueryList.removeEventListener("change", onChange);
|
|
}, []);
|
|
|
|
const navLinks = [
|
|
{ href: "/", label: t("home") },
|
|
{ href: "/about", label: t("aboutMe") },
|
|
{ href: "/projects", label: t("projects") },
|
|
];
|
|
|
|
const isActiveHref = (href: string) => {
|
|
if (!pathname) return false
|
|
if (href === "/") return pathname === "/"
|
|
return pathname === href || pathname.startsWith(`${href}/`)
|
|
}
|
|
|
|
return (
|
|
<header className="sticky top-0 left-0 w-full z-50 flex justify-center p-4 md:p-10">
|
|
|
|
<nav
|
|
className={cn(
|
|
"relative flex-1 flex items-center justify-between px-5 py-3 md:px-7 md:py-4 rounded-full transition-all duration-700 border bg-transparent",
|
|
|
|
scrolled
|
|
? [
|
|
"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-foreground/0"
|
|
)}
|
|
>
|
|
<Link href="/"><h1 className={cn("text-4xl font-medium")}>bH</h1></Link>
|
|
|
|
<ul className="hidden md:flex items-center gap-8 text-sm text-foreground/60">
|
|
{navLinks.map((link) => (
|
|
<li key={link.href}>
|
|
<Link
|
|
href={link.href}
|
|
aria-current={isActiveHref(link.href) ? "page" : undefined}
|
|
className={cn(
|
|
"transition hover:text-foreground",
|
|
isActiveHref(link.href) && "text-foreground"
|
|
)}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="hidden md:flex gap-3">
|
|
<ThemeSwitch/>
|
|
<LocaleSwitch/>
|
|
</div>
|
|
|
|
<DropdownMenu open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
className="md:hidden"
|
|
aria-label="Toggle menu"
|
|
>
|
|
{mobileMenuOpen ? <X className="size-5" /> : <Menu className="size-5" />}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent
|
|
align="end"
|
|
sideOffset={12}
|
|
className="md:hidden"
|
|
>
|
|
{navLinks.map((link, index) => (
|
|
<Fragment key={link.href}>
|
|
<DropdownMenuItem
|
|
asChild
|
|
className={cn(isActiveHref(link.href) && "font-medium text-foreground")}
|
|
>
|
|
<Link href={link.href} aria-current={isActiveHref(link.href) ? "page" : undefined}>
|
|
{link.label}
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
{index < navLinks.length - 1 ? (
|
|
<DropdownMenuSeparator/>
|
|
) : null}
|
|
</Fragment>
|
|
))}
|
|
|
|
<DropdownMenuSeparator />
|
|
|
|
<div className="flex items-center justify-between px-2 py-1.5">
|
|
<ThemeSwitch />
|
|
<LocaleSwitch />
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</nav>
|
|
</header>
|
|
)
|
|
}
|