reui-blocks/blocks/navbar6.tsx

"use client";

import { ChevronRight } from "lucide-react";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";
import { cn } from "@/lib/utils";

const ITEMS = [
  {
    label: "ویژگی‌ها",
    href: "#",
    dropdownItems: [
      {
        title: "تیم‌های رشد مدرن",
        href: "#",
        description:
          "بر پایه عادت‌هایی ساخته شده که تیم‌های رشد را سریع‌تر به نتیجه می‌رساند",
      },
      {
        title: "تخصیص ظرفیت",
        href: "#",
        description: "ظرفیت تیم و اولویت آزمایش‌ها را یکجا مدیریت کنید",
      },
    ],
  },
  { label: "درباره ما", href: "#" },
  { label: "قیمت‌گذاری", href: "#" },
  { label: "سوالات متداول", href: "#" },
  { label: "تماس", href: "#" },
];

interface Navbar6Props {
  contained?: boolean;
  className?: string;
}

const Navbar6 = ({ contained = false, className }: Navbar6Props) => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
  const mobilePanelPosition = contained ? "absolute" : "fixed";

  return (
    <header
      dir="rtl"
      lang="fa"
      className={cn(
        "z-50 w-full max-w-[700px] rounded-full border bg-background/70 backdrop-blur-md transition-all duration-300",
        contained
          ? "relative mx-auto overflow-visible"
          : "absolute top-5 left-1/2 w-[min(90%,700px)] -translate-x-1/2 lg:top-12",
        className,
      )}
    >
      <div className="flex items-center justify-between px-6 py-3">
        <a href="/" className="flex shrink-0 items-center gap-2">
          <img
            src="/block-media/shadcnblocks/block/block-1.svg"
            alt="لوگو"
            className="w-10"
          />
        </a>

        <NavigationMenu
          dir="rtl"
          viewport={false}
          className={cn("max-lg:hidden", contained && "relative z-50")}
        >
          <NavigationMenuList>
            {ITEMS.map((link) =>
              link.dropdownItems ? (
                <NavigationMenuItem key={link.label}>
                  <NavigationMenuTrigger className="bg-transparent! px-1.5 text-start data-[state=open]:bg-accent/50 [&_svg]:ms-1 [&_svg]:!ml-0">
                    {link.label}
                  </NavigationMenuTrigger>
                  <NavigationMenuContent
                    dir="rtl"
                    className="start-0 end-auto left-auto z-50 text-start"
                  >
                    <ul className="w-[min(400px,calc(100vw-2rem))] space-y-2 p-4">
                      {link.dropdownItems.map((item) => (
                        <li key={item.title}>
                          <NavigationMenuLink asChild>
                            <a
                              href={item.href}
                              className="group flex gap-4 rounded-md p-3 text-start leading-none no-underline outline-hidden transition-colors select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                            >
                              <div className="transition-transform duration-300 group-hover:translate-x-1 rtl:group-hover:-translate-x-1">
                                <div className="mb-1 text-sm leading-none font-medium">
                                  {item.title}
                                </div>
                                <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                                  {item.description}
                                </p>
                              </div>
                            </a>
                          </NavigationMenuLink>
                        </li>
                      ))}
                    </ul>
                  </NavigationMenuContent>
                </NavigationMenuItem>
              ) : (
                <NavigationMenuItem key={link.label}>
                  <a
                    href={link.href}
                    className="relative bg-transparent px-1.5 text-sm font-medium text-muted-foreground"
                  >
                    {link.label}
                  </a>
                </NavigationMenuItem>
              ),
            )}
          </NavigationMenuList>
        </NavigationMenu>

        <div className="flex items-center gap-2.5">
          <a href="/login" className="max-lg:hidden">
            <Button variant="outline">
              <span className="relative z-10">ورود</span>
            </Button>
          </a>

          <button
            type="button"
            className="relative flex size-8 text-muted-foreground lg:hidden"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            aria-label={isMenuOpen ? "بستن منو" : "باز کردن منو"}
          >
            <span className="sr-only">منوی اصلی</span>
            <div className="absolute top-1/2 start-1/2 block w-[18px] -translate-x-1/2 -translate-y-1/2 rtl:translate-x-1/2">
              <span
                aria-hidden="true"
                className={`absolute block h-0.5 w-full rounded-full bg-current transition duration-500 ease-in-out ${isMenuOpen ? "rotate-45" : "-translate-y-1.5"}`}
              />
              <span
                aria-hidden="true"
                className={`absolute block h-0.5 w-full rounded-full bg-current transition duration-500 ease-in-out ${isMenuOpen ? "opacity-0" : ""}`}
              />
              <span
                aria-hidden="true"
                className={`absolute block h-0.5 w-full rounded-full bg-current transition duration-500 ease-in-out ${isMenuOpen ? "-rotate-45" : "translate-y-1.5"}`}
              />
            </div>
          </button>
        </div>
      </div>

      <div
        className={cn(
          mobilePanelPosition,
          "inset-x-0 top-[calc(100%+1rem)] z-50 flex flex-col rounded-2xl border bg-background p-6 text-start transition-all duration-300 ease-in-out lg:hidden",
          isMenuOpen
            ? "visible translate-y-0 opacity-100"
            : "invisible -translate-y-4 opacity-0",
        )}
      >
        <nav className="flex flex-1 flex-col divide-y divide-border">
          {ITEMS.map((link) =>
            link.dropdownItems ? (
              <div key={link.label} className="py-4 first:pt-0 last:pb-0">
                <button
                  type="button"
                  onClick={() =>
                    setOpenDropdown(
                      openDropdown === link.label ? null : link.label,
                    )
                  }
                  className="flex w-full items-center justify-between text-base font-medium text-primary"
                >
                  {link.label}
                  <ChevronRight
                    className={cn(
                      "size-4 transition-transform duration-200 rtl:rotate-180",
                      openDropdown === link.label ? "-rotate-90 rtl:rotate-90" : "",
                    )}
                  />
                </button>
                <div
                  className={cn(
                    "overflow-hidden transition-all duration-300",
                    openDropdown === link.label
                      ? "mt-4 max-h-[1000px] opacity-100"
                      : "max-h-0 opacity-0",
                  )}
                >
                  <div className="space-y-3 rounded-lg bg-muted/50 p-4">
                    {link.dropdownItems.map((item) => (
                      <a
                        key={item.title}
                        href={item.href}
                        className="group block rounded-md p-2 text-start transition-colors hover:bg-accent"
                        onClick={() => {
                          setIsMenuOpen(false);
                          setOpenDropdown(null);
                        }}
                      >
                        <div className="transition-transform duration-200 group-hover:translate-x-1 rtl:group-hover:-translate-x-1">
                          <div className="font-medium text-primary">
                            {item.title}
                          </div>
                          <p className="mt-1 text-sm text-muted-foreground">
                            {item.description}
                          </p>
                        </div>
                      </a>
                    ))}
                  </div>
                </div>
              </div>
            ) : (
              <a
                key={link.label}
                href={link.href}
                className="py-4 text-base font-medium text-primary transition-colors first:pt-0 last:pb-0 hover:text-primary/80"
                onClick={() => setIsMenuOpen(false)}
              >
                {link.label}
              </a>
            ),
          )}
        </nav>
      </div>
    </header>
  );
};

export { Navbar6 };