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

"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}
                className={`text-[17px] tracking-tight ${
                  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}
                className={`border ${buttonVariants({
                  variant: "ghost",
                  size: "icon",
                })}`}
              >
                <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;