81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import { Button } from "@/ui/button";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbSeparator,
|
|
} from "@/components/ui/breadcrumb";
|
|
import { cn } from "@/lib/utils";
|
|
import LocaleSwitcher from "./locale-switcher";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export default function Navbar() {
|
|
const pathname = usePathname();
|
|
const isActive = (path: string) => pathname === path.replace(/\/#/g, "");
|
|
const t = useTranslations();
|
|
const navigation = [
|
|
{
|
|
label: t("global.navbar.home"),
|
|
path: "/",
|
|
},
|
|
{
|
|
label: t("global.navbar.projects"),
|
|
path: "/projects",
|
|
},
|
|
{
|
|
label: t("global.navbar.work"),
|
|
path: "/contact",
|
|
isButton: true,
|
|
},
|
|
];
|
|
return (
|
|
<div className="w-full fixed top-0 right-0 left-0 z-50">
|
|
<nav className="container p-4 flex items-center navbar">
|
|
<div className="items-center gap-4 hidden sm:flex">
|
|
<LocaleSwitcher />
|
|
</div>
|
|
|
|
<Breadcrumb className="ml-auto">
|
|
<BreadcrumbList>
|
|
{navigation.map(({ label, path, isButton }, idx) => {
|
|
return (
|
|
<div key={path} className="flex items-center gap-2">
|
|
<BreadcrumbItem>
|
|
{isButton ? (
|
|
<Button
|
|
asChild
|
|
size={"sm"}
|
|
variant={isActive(path) ? "outline" : "default"}
|
|
>
|
|
<Link href={path}>{label}</Link>
|
|
</Button>
|
|
) : (
|
|
<BreadcrumbLink
|
|
className={cn(isActive(path) && "text-foreground")}
|
|
href={path}
|
|
>
|
|
{label}
|
|
</BreadcrumbLink>
|
|
)}
|
|
</BreadcrumbItem>
|
|
{idx + 1 < navigation.length && (
|
|
<BreadcrumbSeparator>
|
|
<span>/</span>
|
|
</BreadcrumbSeparator>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|