64 lines
1.9 KiB
TypeScript
64 lines
1.9 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 { appNavigator } from "@/app.config";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
function Navbar() {
|
|
const pathname = usePathname();
|
|
const isActive = (path: string) => pathname === path.replace(/\/#/g, "");
|
|
return (
|
|
<div className="w-full fixed top-0 right-0 left-0 z-50">
|
|
<nav className="container p-4 flex justify-between items-center navbar">
|
|
<div className="flex items-center gap-4">
|
|
<Link
|
|
className="text-sm hidden md:block"
|
|
href={`mailto:${process.env.NEXT_PUBLIC_EMAIL}`}
|
|
>
|
|
{process.env.NEXT_PUBLIC_EMAIL}
|
|
</Link>
|
|
{!isActive("/contact") && (
|
|
<Button asChild size={"sm"} className="hidden md:flex">
|
|
<Link href={"/contact"}>Work with me</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
{appNavigator.map(({ label, path }, idx) => (
|
|
<div key={path} className="flex items-center gap-2">
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink
|
|
className={cn(isActive(path) && "text-foreground")}
|
|
href={path}
|
|
>
|
|
{label}
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
{idx + 1 < appNavigator.length && (
|
|
<BreadcrumbSeparator>
|
|
<span>/</span>
|
|
</BreadcrumbSeparator>
|
|
)}
|
|
</div>
|
|
))}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Navbar;
|