reui-blocks/blocks/navbar10.tsx

"use client";
import type { LucideIcon } from "lucide-react";
import {
  Book,
  ChevronRight,
  Code,
  Database,
  Globe,
  Layout,
  MenuIcon,
  Monitor,
  Paintbrush,
  Server,
  Settings,
  Shield,
  Sparkles,
  Terminal,
  Users,
  X,
} from "lucide-react";
import type { MouseEventHandler } from "react";
import { forwardRef, Fragment, useEffect, useRef, useState } from "react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
import { Separator } from "@/components/ui/separator";
import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
import { cn } from "@/lib/utils";

interface MenuLink {
  label?: string;
  description?: string;
  url: string;
  icon?: LucideIcon;
  image?: string;
  background?: string;
  company?: {
    logo: string;
    name: string;
  };
}

interface MenuGroup {
  title: string;
  links: MenuLink[];
}

interface MenuItem {
  id?: number;
  title: string;
  url?: string;
  links?: MenuLink[];
  featuredLinks?: MenuLink[];
  imageLink?: MenuLink;
  groupLinks?: MenuGroup[];
}

interface DesktopMenuItemProps {
  item: MenuItem;
  index: number;
  contained?: boolean;
}

interface MobileNavigationMenuProps {
  open: boolean;
}

type NavLinkProps = {
  link: MenuLink;
  onMouseEnter?: MouseEventHandler<HTMLAnchorElement>;
  onMouseLeave?: MouseEventHandler<HTMLAnchorElement>;
  showDescription?: boolean;
};

const LOGO = {
  url: "https://www.ShadcnBlocks",
  src: "/block-media/shadcnblocks/block/block-1.svg",
  alt: "لوگو",
  title: "فروش‌یار",
};

const NAVIGATION: MenuItem[] = [
  {
    title: "محصولات",
    id: 1,
    links: [
      {
        label: "بینش‌ها",
        icon: Book,
        description: "گزارش محصول، بینش فروش و اعلان‌ها",
        url: "#",
        image:
          "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
      },
      {
        label: "مهندسی",
        icon: Code,
        description: "آموزش API، راهنما و مستندات یکپارچه‌سازی",
        url: "#",
        image:
          "/block-media/shadcnblocks/block/photos/carles-rabada-f7UprkNqi08-unsplash.jpg",
      },
      {
        label: "فرهنگ",
        icon: Users,
        description: "ارزش‌ها و نحوه کار تیم درآمد",
        url: "#",
        image:
          "/block-media/shadcnblocks/block/photos/john-murphey-ZWUWSEY6OGk-unsplash.jpg",
      },
      {
        label: "مطبوعات",
        icon: Globe,
        description: "پوشش رسانه‌ای و مصاحبه‌ها",
        url: "#",
        image:
          "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
      },
      {
        label: "API",
        icon: Monitor,
        description: "دسترسی REST API امن برای داده فروش",
        url: "#",
        image:
          "/block-media/shadcnblocks/block/photos/pat-whelen-gWfpmH0H2bM-unsplash.jpg",
      },
      {
        label: "CLI",
        icon: Terminal,
        description: "CLI برای درون‌ریزی و اتوماسیون گزارش",
        url: "#",
        image:
          "/block-media/shadcnblocks/block/photos/sam-wermut-FiUuNWxnb3k-unsplash.jpg",
      },
      {
        label: "SDKs",
        icon: Code,
        description: "SDK برای اتصال سریع به CRM و BI",
        url: "#",
        image:
          "/block-media/shadcnblocks/block/photos/vasilis-karkalas-qOaeVSKyhhE-unsplash.jpg",
      },
    ],
  },
  {
    title: "راه‌حل‌ها",
    id: 2,
    featuredLinks: [
      {
        label: "ویجت‌ها",
        icon: Sparkles,
        description: "ویجت‌های آماده داشبورد فروش",
        background:
          "/block-media/shadcnblocks/block/photos/john-murphey-ZWUWSEY6OGk-unsplash.jpg",
        url: "#",
      },
      {
        label: "قالب گزارش",
        icon: Paintbrush,
        description: "قالب‌های گزارش فصلی و پیش‌بینی",
        background:
          "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
        url: "#",
      },
    ],
    links: [
      {
        description: "راه‌حل فروش B2B برای تیم‌های در حال رشد",
        url: "#",
        company: {
          logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
          name: "ARC",
        },
      },
      {
        description: "ابزار تحلیل برای تیم‌های SaaS",
        url: "#",
        company: {
          logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
          name: "descript",
        },
      },
      {
        description: "امنیت سازمانی برای داده‌های درآمد",
        url: "#",
        company: {
          logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
          name: "MERCURY",
        },
      },
      {
        description: "گزارش انطباق برای صنایع تحت نظارت",
        url: "#",
        company: {
          logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
          name: "ramp",
        },
      },
    ],
  },
  {
    title: "پلتفرم",
    id: 3,
    imageLink: {
      url: "#",
      image:
        "/block-media/shadcnblocks/block/photos/carles-rabada-f7UprkNqi08-unsplash.jpg",
      label: "کاوش قابلیت‌های جدید",
    },
    groupLinks: [
      {
        title: "قابلیت‌های اصلی",
        links: [
          {
            label: "داشبورد زنده",
            icon: Server,
            description: "شاخص‌های فروش در لحظه برای تیم‌های بزرگ",
            url: "#",
          },
          {
            label: "دسترسی نقش‌محور",
            icon: Shield,
            description: "ورود امن و دسترسی مبتنی بر نقش",
            url: "#",
          },
          {
            label: "انبار فرصت‌ها",
            icon: Database,
            description: "ذخیره پایدار تاریخچه معامله و فعالیت",
            url: "#",
          },
        ],
      },
      {
        title: "گزارش‌ساز",
        links: [
          {
            label: "بلوک گزارش",
            icon: Layout,
            description: "بلوک‌های قابل استفاده مجدد برای داشبورد یکپارچه",
            url: "#",
          },
          {
            label: "معیارها",
            icon: Settings,
            description: "معیارهای استاندارد برای مقایسه تیم‌ها",
            url: "#",
          },
          {
            label: "ویجت‌ها",
            icon: Sparkles,
            description: "نمودارها و نشانگرهای بصری",
            url: "#",
          },
        ],
      },
    ],
  },
  {
    title: "منابع",
    url: "#",
  },
  {
    title: "قیمت‌گذاری",
    url: "#",
  },
];

const BUTTON = {
  label: "شروع رایگان",
  isPrimary: true,
  url: "#",
};

const MOBILE_BREAKPOINT = 1024;

interface Navbar10Props {
  /** When true, keeps the navbar inside block preview instead of absolute viewport positioning. */
  contained?: boolean;
  className?: string;
}

const Navbar10 = ({ contained = false, className }: Navbar10Props) => {
  const [open, setOpen] = useState<boolean>(false);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth > MOBILE_BREAKPOINT) {
        setOpen(false);
      }
    };

    handleResize();

    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "auto";
  }, [open]);

  const handleMobileMenu = () => {
    const nextOpen = !open;
    setOpen(nextOpen);
  };

  return (
    <Fragment>
      <section
        lang="fa"
        className={cn(
          "pointer-events-auto z-999 flex h-20 w-full items-center justify-center overflow-visible bg-background text-start",
          contained ? "relative" : "absolute top-0",
          className,
        )}
      >
        <NavigationMenu
          dir="rtl"
          className={cn(
            "h-20 w-full max-w-full text-start",
            "after:absolute after:inset-0 after:z-998 after:block after:size-full after:bg-background after:content-['']",
            "[&>div:last-child]:inset-x-0 [&>div:last-child]:w-full [&>div:last-child]:justify-center",
            "[&>div:last-child>div]:mt-0 [&>div:last-child>div]:w-full [&>div:last-child>div]:max-w-full",
            "[&>div:last-child>div]:animate-none [&>div:last-child>div]:rounded-none [&>div:last-child>div]:border-0 [&>div:last-child>div]:border-b",
            "[&>div:last-child>div]:shadow-[0px_-1px_0px_0px_rgba(0,0,0,0.05),0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_0px_rgba(16,25,36,0.1),0px_5px_20px_0px_rgba(16,25,36,0.1)]",
          )}
        >
          <div className="relative z-999 container grid w-full grid-cols-2 items-center justify-between gap-8 xl:grid-cols-3">
            <a
              href={LOGO.url}
              className="flex max-h-8 items-center gap-2 text-lg font-semibold tracking-tighter"
            >
              <img
                src={LOGO.src}
                alt={LOGO.alt}
                className="inline-block size-6"
              />
              <span className="hidden md:inline-block">{LOGO.title}</span>
            </a>
            <div className="hidden xl:flex">
              <NavigationMenuList>
                {NAVIGATION.map((item, index) => (
                  <DesktopMenuItem
                    key={`desktop-link-${index}`}
                    item={item}
                    index={index}
                    contained={contained}
                  />
                ))}
              </NavigationMenuList>
            </div>
            <div className="justify-self-end">
              <div className="hidden xl:block">
                <Button variant="ghost">
                  <a href={BUTTON.url} className="flex items-center gap-1">
                    {BUTTON.label}
                    <ChevronRight className="rtl:rotate-180" />
                  </a>
                </Button>
              </div>
              <div className="xl:hidden">
                <Button
                  className="size-11"
                  variant="ghost"
                  size="icon"
                  onClick={handleMobileMenu}
                  aria-label={open ? "بستن منو" : "باز کردن منو"}
                >
                  {open ? (
                    <X className="size-5.5 stroke-foreground" />
                  ) : (
                    <MenuIcon className="size-5.5 stroke-foreground" />
                  )}
                </Button>
              </div>
            </div>
          </div>
        </NavigationMenu>
      </section>
      <MobileNavigationMenu open={open} />
    </Fragment>
  );
};

const DesktopMenuItem = ({
  item,
  index,
  contained = false,
}: DesktopMenuItemProps) => {
  if (item.links || item.featuredLinks || item.groupLinks) {
    return (
      <NavigationMenuItem key={`desktop-menu-item-${index}`} value={`${index}`}>
        <NavigationMenuTrigger className="h-fit bg-transparent text-start font-normal text-foreground/60 [&_svg]:ms-1 [&_svg]:!ml-0">
          {item.title}
        </NavigationMenuTrigger>
        <NavigationMenuContent
          dir="rtl"
          className="inset-x-0 left-auto right-auto hidden w-full !rounded-xl !border-0 !p-0 text-start xl:block"
        >
          <div
            className={cn(
              "mx-auto w-full animate-[fade-in-slide-down_0.35s_cubic-bezier(0.33,1,0.68,1)_forwards] px-8 pt-6 pb-12 text-start",
              !contained && "max-w-[100vw]",
            )}
          >
            <div className={cn("mx-auto w-full", contained ? "max-w-full" : "container")}>
              {item.id === 1 && <DropdownMenu1 links={item.links} />}
              {item.id === 2 && (
                <DropdownMenu2
                  featuredLinks={item.featuredLinks}
                  links={item.links}
                />
              )}
              {item.id === 3 && (
                <DropdownMenu3
                  groupLinks={item.groupLinks}
                  imageLink={item.imageLink}
                />
              )}
            </div>
          </div>
        </NavigationMenuContent>
      </NavigationMenuItem>
    );
  }

  return (
    <NavigationMenuItem key={`desktop-menu-item-${index}`} value={`${index}`}>
      <NavigationMenuLink
        href={item.url}
        className={`${navigationMenuTriggerStyle()} h-fit bg-transparent text-start font-normal text-foreground/60`}
      >
        {item.title}
      </NavigationMenuLink>
    </NavigationMenuItem>
  );
};

const DropdownMenu1 = ({ links }: { links?: MenuLink[] }) => {
  const linksRef = useRef<HTMLAnchorElement[]>([]);
  const imageRefs = useRef<HTMLDivElement[]>([]);

  const updateImageClasses = (activeIndex: number) => {
    imageRefs.current.forEach((img, i) => {
      if (!img) return;
      const isActive = i === activeIndex;

      img.classList.toggle("opacity-100", isActive);
      img.classList.toggle("translate-y-0", isActive);
      img.classList.toggle("opacity-0", !isActive);
      img.classList.toggle("translate-y-20", !isActive);
      img.classList.toggle("z-10", isActive);
    });
  };

  const handleMouseEnter =
    (index: number) => (event: React.MouseEvent<HTMLAnchorElement>) => {
      linksRef.current.forEach((link) => {
        if (link && link !== event.currentTarget) {
          link.classList.add("opacity-50");
        }
      });

      updateImageClasses(index);
    };

  const handleMouseLeave = () => {
    linksRef.current.forEach((link) => {
      link?.classList.remove("opacity-50");
    });

    updateImageClasses(0);
  };

  if (!links) return null;

  return (
    <div className="grid grid-cols-2 gap-8">
      <ul className="grid grid-cols-2 gap-8">
        {links.map((link, index) => (
          <NavLink
            key={`default-nav-link-${index}`}
            link={link}
            onMouseEnter={handleMouseEnter(index)}
            onMouseLeave={handleMouseLeave}
            ref={(el) => {
              if (el) linksRef.current[index] = el;
            }}
          />
        ))}
      </ul>
      <div className="relative !h-[16rem] w-full overflow-hidden rounded-lg bg-muted">
        {links.map((link, index) => (
          <div
            key={`default-nav-link-img-${index}`}
            ref={(el) => {
              if (el) imageRefs.current[index] = el;
            }}
            className={`will-change-opacity absolute top-14 start-14 aspect-video w-[43.75rem] overflow-hidden rounded-ss-md border-t border-s transition-all duration-600 ease-in-out will-change-transform ${index === 0
                ? "z-10 translate-y-0 opacity-100"
                : "pointer-events-none z-0 translate-y-20 opacity-0"
              }`}
          >
            <img
              src={link.image}
              alt={link.label}
              className="size-full object-cover object-top"
            />
          </div>
        ))}
      </div>
    </div>
  );
};

const DropdownMenu2 = ({
  links,
  featuredLinks,
}: {
  links?: MenuLink[];
  featuredLinks?: MenuLink[];
}) => {
  return (
    <div>
      <div className="flex gap-8 pb-8">
        {featuredLinks &&
          featuredLinks.map((link, index) => (
            <FeaturedLink key={`desktop-featured-link-${index}`} link={link} />
          ))}
      </div>
      <Separator />
      <div className="grid grid-cols-4 pt-8">
        {links &&
          links.map((link, index) => (
            <NavLink key={`default-nav-link-${index}`} link={link} />
          ))}
      </div>
    </div>
  );
};

const DropdownMenu3 = ({
  groupLinks,
  imageLink,
}: {
  groupLinks?: MenuGroup[];
  imageLink?: MenuLink;
}) => {
  return (
    <div className="grid grid-cols-2 gap-8">
      <GroupLinks groupLinks={groupLinks} />
      <FeaturedImageLink link={imageLink} />
    </div>
  );
};

const GroupLinks = ({ groupLinks }: { groupLinks?: MenuGroup[] }) => {
  const linksRef = useRef<HTMLAnchorElement[]>([]);

  const handleMouseEnter =
    () => (event: React.MouseEvent<HTMLAnchorElement>) => {
      linksRef.current.forEach((link) => {
        if (link && link !== event.currentTarget) {
          link.classList.add("opacity-50");
        }
      });
    };

  const handleMouseLeave = () => {
    linksRef.current.forEach((link) => {
      link?.classList.remove("opacity-50");
    });
  };

  if (!groupLinks) return null;

  let linkIndex = 0;
  return (
    <div className="grid grid-cols-2 gap-8">
      {groupLinks.map((group, index1) => (
        <div key={`group-link-${index1}`}>
          <div className="mb-4 text-start text-xs text-muted-foreground">
            {group.title}
          </div>
          <ul className="flex flex-col gap-8">
            {group.links.map((link, index2) => {
              const index = linkIndex++;
              return (
                <li key={`group-link-${index1}-${index2}`}>
                  <NavLink
                    link={link}
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}
                    ref={(el) => {
                      if (el) linksRef.current[index] = el;
                    }}
                  />
                </li>
              );
            })}
          </ul>
        </div>
      ))}
    </div>
  );
};

const FeaturedImageLink = ({ link }: { link?: MenuLink }) => {
  if (!link) return null;

  return (
    <div className="hidden xl:block">
      <a href={link.url} className="w-full max-w-[36.875rem]">
        <AspectRatio
          ratio={1.77245509}
          className="overflow-hidden rounded-[0.25rem] bg-muted"
        >
          <div className="size-full">
            <Badge className="absolute top-2 start-2">جدید</Badge>
            <div className="flex w-full flex-col items-center justify-center gap-8 pt-10 text-center">
              <div className="text-xl font-semibold">{link.label}</div>
              <div className="w-[80%]">
                <AspectRatio
                  ratio={1.5}
                  className="overflow-hidden rounded-[0.25rem] bg-muted"
                >
                  <img
                    src={link.image}
                    alt={link.label}
                    className="size-full object-cover object-top"
                  />
                </AspectRatio>
              </div>
            </div>
          </div>
        </AspectRatio>
      </a>
    </div>
  );
};

const FeaturedLink = ({ link }: { link: MenuLink }) => {
  return (
    <a
      href={link.url}
      className="group relative flex w-full overflow-hidden rounded-xl bg-muted px-8 py-7"
    >
      <div className="relative z-10 flex w-full items-center gap-6">
        <div className="flex size-12 shrink-0 rounded-lg border bg-background shadow-lg">
          {link.icon && (
            <link.icon className="m-auto size-5 stroke-foreground" />
          )}
        </div>
        <div className="flex flex-col gap-2">
          <div className="text-lg font-semibold text-white">{link.label}</div>
          <div className="font-medium text-white/80">{link.description}</div>
        </div>
      </div>
      <img
        src={link.background}
        alt={link.label}
        className="absolute inset-0 size-full object-cover object-top opacity-90 transition-opacity duration-300 ease-in-out group-hover:opacity-100"
      />
    </a>
  );
};

const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(
  ({ link, onMouseEnter, onMouseLeave }, ref) => {
    return (
      <a
        ref={ref}
        href={link.url}
        className="flex w-full gap-2 text-start transition-opacity duration-300"
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
      >
        {link.icon && (
          <div className="flex size-6 shrink-0 rounded-md border shadow">
            <link.icon className="m-auto size-3.5" />
          </div>
        )}
        <div className="flex min-w-0 flex-col items-start gap-2 text-start">
          {link.company && (
            <div className="block text-base leading-normal xl:hidden">
              {link.company.name}
            </div>
          )}
          {link.company && (
            <img
              className="hidden h-6 xl:block"
              src={link.company.logo}
              alt={link.company.name}
            />
          )}
          {link.label && (
            <div className="text-base leading-normal">{link.label}</div>
          )}
          <div className="text-sm leading-normal text-muted-foreground">
            {link.description}
          </div>
        </div>
      </a>
    );
  },
);

const MobileNavigationMenu = ({ open }: MobileNavigationMenuProps) => {
  return (
    <Sheet open={open}>
      <SheetContent
        aria-describedby={undefined}
        side="top"
        className="inset-0 z-998 h-dvh w-full bg-background pt-20 [&>button]:hidden"
      >
        <div className="flex-1 overflow-y-auto">
          <div className="container py-8">
            <div className="absolute -m-px h-px w-px overflow-hidden border-0 mask-clip-border p-0 text-nowrap whitespace-nowrap">
              <SheetTitle className="text-primary">منوی موبایل</SheetTitle>
            </div>
            <div className="flex min-h-full flex-col gap-6">
              <Accordion
                type="multiple"
                dir="rtl"
                className="w-full text-start"
              >
                {NAVIGATION.map((item, index) =>
                  renderMobileMenuItem(item, index),
                )}
              </Accordion>

              <Button asChild>
                <a href={BUTTON.url}>{BUTTON.label}</a>
              </Button>
            </div>
          </div>
        </div>
      </SheetContent>
    </Sheet>
  );
};

const renderMobileMenuItem = (item: MenuItem, index: number) => {
  if (item.links || item.featuredLinks || item.groupLinks) {
    return (
      <AccordionItem
        key={item.title}
        value={`nav-${index}`}
        className="border-b-0"
      >
        <AccordionTrigger className="h-[2.5rem] items-center justify-start text-start text-base font-normal text-foreground hover:no-underline [&>svg]:ms-auto [&>svg]:me-0">
          {item.title}
        </AccordionTrigger>
        <AccordionContent className="flex flex-col gap-6 p-2">
          {item.featuredLinks && (
            <div className="flex flex-col gap-2 p-2">
              {item.featuredLinks.map((link, index) => (
                <NavLink key={`default-nav-link-${index}`} link={link} />
              ))}
            </div>
          )}

          {item.links && (
            <div className="flex flex-col gap-2 p-2">
              {item.links.map((link, index) => (
                <NavLink key={`default-nav-link-${index}`} link={link} />
              ))}
            </div>
          )}

          {item.groupLinks && (
            <div className="flex flex-col gap-2 p-2">
              {item.groupLinks.map((group, index1) => (
                <div className="mb-8 last:mb-0" key={`group-link-${index1}`}>
                  <div className="mb-4 text-start text-xs text-muted-foreground">
                    {group.title}
                  </div>
                  <ul className="flex flex-col gap-2">
                    {group.links.map((link, index2) => (
                      <li key={`group-link-${index1}-${index2}`}>
                        <NavLink link={link} />
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          )}
        </AccordionContent>
      </AccordionItem>
    );
  }

  return (
    <a
      key={item.title}
      href={item.url}
      className="flex h-[2.5rem] items-center rounded-md text-start text-base leading-[3.75] font-normal text-foreground ring-ring/10 outline-ring/50 transition-all focus-visible:ring-4 focus-visible:outline-1 nth-last-1:border-0"
    >
      {item.title}
    </a>
  );
};

export { Navbar10 };