svrjs-nextjs-website/components/shared/Navbar.tsx

99 lines
2.9 KiB
TypeScript
Raw Normal View History

2024-06-15 14:55:33 +02:00
"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";
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-screen flex justify-between items-center">
<NavigationMenuItem className="font-bold flex items-center">
<Link href="/#" className="inline-flex items-center gap-2">
<Image
src="/logo.svg"
alt={`logo`}
width={120}
height={40}
className="dark:block hidden"
/>
<Image
src="/logodark.svg"
alt={`logo`}
width={120}
height={40}
className="dark:hidden block"
/>
</Link>
</NavigationMenuItem>
{/* Mobile view */}
<MobileNav />
{/* Desktop Menu */}
<nav className="hidden md:flex gap-4">
{NAVBAR.centerLinks?.map(({ href, label, target }) => (
<Link
key={label}
href={href}
target={target}
2024-06-15 19:24:54 +02:00
className={`text-[17px] tracking-tight ${
2024-06-15 14:55:33 +02:00
pathname == href ? "bg-accent/40" : ""
} ${buttonVariants({
variant: "ghost",
})}`}
>
{label}
</Link>
))}
</nav>
<div className="hidden md:flex gap-2 items-center">
{NAVBAR.rightLinks?.map(({ href = "", label, target }) => (
<Link
key={label}
href={href}
target={target}
2024-06-15 18:44:47 +02:00
className={`border ${buttonVariants({
variant: "ghost",
2024-06-15 19:15:46 +02:00
size: "icon",
})}`}
2024-06-15 14:55:33 +02:00
>
<Image
src="/next.svg"
alt="git"
width={25}
height={25}
className="hidden dark:block"
/>
<Image
src="/nextdark.svg"
alt="git"
width={25}
height={25}
className="block dark:hidden"
/>
</Link>
))}
<ThemeToggle />
</div>
</NavigationMenuList>
</NavigationMenu>
</header>
);
};
export default Navbar;