90 lines
3.5 KiB
TypeScript
90 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuItem,
|
|
NavigationMenuList
|
|
} from "@radix-ui/react-navigation-menu";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import ThemeToggle from "../ui/theme-toggle";
|
|
import { NAVBAR } from "@/constants";
|
|
import { buttonVariants } from "../ui/button";
|
|
import MobileNav from "./MobileNav";
|
|
import { usePathname } from "next/navigation";
|
|
import Logo from "./Logo";
|
|
|
|
const Navbar = () => {
|
|
const pathname = usePathname();
|
|
return (
|
|
<header className="sticky border-b top-0 z-40 w-full shadow-md bg-white dark:border-b-slate-800 dark:bg-background">
|
|
{/* LOGO LEFT NAVBAR */}
|
|
<NavigationMenu className="mx-auto">
|
|
<NavigationMenuList className="container h-16 px-4 w-full flex justify-between items-center">
|
|
<NavigationMenuItem className="font-bold flex items-center">
|
|
<Link href="/#" className="inline-flex items-center gap-2">
|
|
<span className="sr-only">SVR.JS</span>
|
|
<Logo width={120} height={40} />
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
|
|
{/* Mobile view */}
|
|
<NavigationMenuItem className="flex md:hidden">
|
|
<MobileNav />
|
|
</NavigationMenuItem>
|
|
|
|
{/* Desktop Menu */}
|
|
<NavigationMenuItem className="hidden md:flex">
|
|
<nav className="hidden md:flex gap-4">
|
|
{NAVBAR.centerLinks?.map(({ href, label, target }) => (
|
|
<Link
|
|
key={label}
|
|
href={href}
|
|
target={target}
|
|
className={`text-[17px] tracking-tight ${
|
|
pathname == href ? "bg-muted-foreground/20" : ""
|
|
} ${buttonVariants({
|
|
variant: "ghost"
|
|
})}`}
|
|
>
|
|
{label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</NavigationMenuItem>
|
|
|
|
<NavigationMenuItem className="hidden md:flex gap-2 items-center">
|
|
{NAVBAR.rightLinks?.map(({ href = "", label, target }) => (
|
|
<Link
|
|
key={label}
|
|
href={href}
|
|
target={target}
|
|
className={`border ${buttonVariants({
|
|
variant: "ghost",
|
|
size: "icon"
|
|
})}`}
|
|
>
|
|
<span className="sr-only">Git</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={25}
|
|
height={25}
|
|
viewBox="0 0 123 123"
|
|
fill="none"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M120.208 55.953 66.715 2.463a7.885 7.885 0 0 0-11.158 0l-11.109 11.11 14.088 14.088a9.373 9.373 0 0 1 11.87 11.948l13.578 13.579a9.368 9.368 0 0 1 9.704 2.23 9.386 9.386 0 0 1-6.64 16.025 9.393 9.393 0 0 1-9.21-7.547 9.384 9.384 0 0 1 .526-5.416L65.697 45.817v33.33a9.385 9.385 0 0 1 2.48 15.053 9.386 9.386 0 0 1-15.311-3.046A9.388 9.388 0 0 1 54.9 80.923a9.378 9.378 0 0 1 3.078-2.052V45.235a9.336 9.336 0 0 1-3.078-2.047A9.4 9.4 0 0 1 52.88 32.92l-13.89-13.89L2.311 55.703a7.89 7.89 0 0 0 0 11.16l53.495 53.497a7.895 7.895 0 0 0 11.157 0l53.244-53.245a7.9 7.9 0 0 0 0-11.162Z"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
))}
|
|
<ThemeToggle />
|
|
</NavigationMenuItem>
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|