"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface NavbarItem {
  id: string;
  label: string;
  href?: string;
}

export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
  brand?: React.ReactNode;
  items: NavbarItem[];
  activeId?: string;
  actions?: React.ReactNode;
  onItemSelect?: (id: string) => void;
}

export function Navbar({
  brand,
  items,
  activeId,
  actions,
  onItemSelect,
  className,
  ...props
}: NavbarProps) {
  const [open, setOpen] = React.useState(false);

  return (
    <nav
      className={cn("w-full border border-border bg-card", className)}
      {...props}
    >
      <div className="mx-auto flex w-full max-w-5xl items-center justify-between gap-4 px-4 py-3">
        <div className="flex items-center gap-3">
          {brand ?? (
            <span className="text-base font-semibold text-foreground">Brand</span>
          )}
        </div>
        <div className="hidden items-center gap-6 md:flex">
          {items.map((item) => {
            const ItemComponent: React.ElementType = item.href ? "a" : "button";
            const isActive = item.id === activeId;

            return (
              <ItemComponent
                key={item.id}
                {...(item.href ? { href: item.href } : { type: "button" })}
                onClick={() => onItemSelect?.(item.id)}
                className={cn(
                  "text-sm font-medium transition-colors",
                  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
                  isActive
                    ? "text-primary"
                    : "text-foreground hover:text-primary"
                )}
              >
                {item.label}
              </ItemComponent>
            );
          })}
        </div>
        <div className="hidden items-center gap-3 md:flex">{actions}</div>
        <button
          type="button"
          onClick={() => setOpen((prev) => !prev)}
          className={cn(
            "inline-flex items-center justify-center rounded-md border border-border bg-card p-2",
            "text-foreground transition-colors hover:text-primary",
            "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 md:hidden"
          )}
          aria-expanded={open}
          aria-label={open ? "Close menu" : "Open menu"}
        >
          {open ? <CloseIcon className="h-5 w-5" /> : <MenuIcon className="h-5 w-5" />}
        </button>
      </div>
      {open ? (
        <div className="border-t border-border px-4 pb-4 md:hidden">
          <div className="flex flex-col gap-3 pt-3">
            {items.map((item) => {
              const ItemComponent: React.ElementType = item.href ? "a" : "button";
              const isActive = item.id === activeId;

              return (
                <ItemComponent
                  key={item.id}
                  {...(item.href ? { href: item.href } : { type: "button" })}
                  onClick={() => {
                    onItemSelect?.(item.id);
                    setOpen(false);
                  }}
                  className={cn(
                    "text-sm font-medium transition-colors",
                    "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
                    isActive
                      ? "text-primary"
                      : "text-foreground hover:text-primary"
                  )}
                >
                  {item.label}
                </ItemComponent>
              );
            })}
            {actions ? <div className="pt-2">{actions}</div> : null}
          </div>
        </div>
      ) : null}
    </nav>
  );
}

function MenuIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path
        d="M4 7H20"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
      />
      <path
        d="M4 12H20"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
      />
      <path
        d="M4 17H20"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
      />
    </svg>
  );
}

function CloseIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path
        d="M6 6L18 18"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
      />
      <path
        d="M6 18L18 6"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
      />
    </svg>
  );
}
Navbar

Dependencies

Files

Installation
