79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import { ArrowUpRight } from "lucide-react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import Search from "./search";
|
|
import Anchor from "./anchor";
|
|
import { SheetLeftbar } from "./leftbar";
|
|
import { SheetClose } from "@/components/ui/sheet";
|
|
import docuConfig from "@/docu.json"; // Import JSON
|
|
|
|
export function Navbar() {
|
|
|
|
return (
|
|
<nav className="sticky top-0 z-50 w-full h-16 border-b bg-background">
|
|
<div className="sm:container mx-auto w-[95vw] h-full flex items-center justify-between md:gap-2">
|
|
<div className="flex items-center gap-5">
|
|
<SheetLeftbar />
|
|
<div className="flex items-center gap-6">
|
|
<div className="hidden sm:flex">
|
|
<Logo />
|
|
</div>
|
|
<div className="items-center hidden gap-4 text-sm font-medium lg:flex text-muted-foreground">
|
|
<NavMenu />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Search />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
export function Logo() {
|
|
const { navbar } = docuConfig; // Extract navbar from JSON
|
|
|
|
return (
|
|
<Link href="/" className="flex items-center gap-2.5">
|
|
<Image src={navbar.logo.src} alt={navbar.logo.alt} width="24" height="24" />
|
|
<h2 className="font-bold font-code text-md">{navbar.logoText}</h2>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export function NavMenu({ isSheet = false }) {
|
|
const { navbar } = docuConfig; // Extract navbar from JSON
|
|
|
|
return (
|
|
<>
|
|
{navbar?.menu?.map((item) => {
|
|
const isExternal = item.href.startsWith("http");
|
|
|
|
const Comp = (
|
|
<Anchor
|
|
key={`${item.title}-${item.href}`}
|
|
activeClassName="!text-primary md:font-semibold font-medium"
|
|
absolute
|
|
className="flex items-center gap-1 dark:text-stone-300/85 text-stone-800"
|
|
href={item.href}
|
|
target={isExternal ? "_blank" : undefined}
|
|
rel={isExternal ? "noopener noreferrer" : undefined}
|
|
>
|
|
{item.title}
|
|
{isExternal && <ArrowUpRight className="w-4 h-4 text-muted-foreground" />}
|
|
</Anchor>
|
|
);
|
|
return isSheet ? (
|
|
<SheetClose key={item.title + item.href} asChild>
|
|
{Comp}
|
|
</SheetClose>
|
|
) : (
|
|
Comp
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|