reui-blocks/blocks/navbar5.tsx

"use client";

import { MenuIcon } from "lucide-react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { cn } from "@/lib/utils";

interface Navbar5Props {
  /** برای پیش‌نمایش بلاک: z-index و overflow درست زیرمنو */
  contained?: boolean;
  className?: string;
}

const features = [
  {
    title: "داشبورد",
    description: "نمای کلی متریک‌های محصول",
    href: "#",
  },
  {
    title: "تحلیل‌ها",
    description: "فعال‌سازی، نگهداشت و درآمد را پیگیری کنید",
    href: "#",
  },
  {
    title: "تنظیمات",
    description: "فضای کاری و دسترسی‌ها را پیکربندی کنید",
    href: "#",
  },
  {
    title: "یکپارچه‌سازی‌ها",
    description: "اتصال به CRM، انبار داده و ابزار رشد",
    href: "#",
  },
  {
    title: "داده رویداد",
    description: "مدیریت رویدادها و ویژگی‌های کاربر",
    href: "#",
  },
  {
    title: "پشتیبانی",
    description: "از مرکز راهنما یا تیم پشتیبانی کمک بگیرید",
    href: "#",
  },
];

const Navbar5 = ({ contained = false, className }: Navbar5Props) => {
  return (
    <section
      lang="fa"
      className={cn(
        "relative overflow-visible py-4 text-start",
        contained ? "z-30" : "z-20",
        className,
      )}
    >
      <div className="container">
        <nav className="relative z-30 flex items-center justify-between overflow-visible">
          <a
            href="https://www.ShadcnBlocks"
            className="flex items-center gap-2"
          >
            <img
              src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
              className="max-h-8 dark:invert"
              alt="لوگو"
            />
            <span className="text-lg font-semibold tracking-tighter">
              داده‌نما
            </span>
          </a>
          <div className="relative hidden flex-1 justify-center overflow-visible lg:flex">
            <NavigationMenu
              dir="rtl"
              viewport={false}
              className="relative z-50 max-w-none overflow-visible"
            >
              <NavigationMenuList>
              <NavigationMenuItem className="static">
                <NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
                  ویژگی‌ها
                </NavigationMenuTrigger>
                <NavigationMenuContent
                  dir="rtl"
                  className={cn(
                    "top-full start-auto end-auto left-1/2 right-auto z-[200] -translate-x-1/2 !overflow-visible p-4 text-start shadow-md",
                    "!w-[640px] !min-w-[640px] !max-w-[calc(100vw-2rem)] md:!w-[640px]",
                    contained && "!w-[min(640px,calc(100%-1rem))] !min-w-0",
                  )}
                >
                  <div className="grid w-full min-w-0 grid-cols-2 gap-2">
                    {features.map((feature, index) => (
                      <NavigationMenuLink
                        href={feature.href}
                        key={index}
                        className="min-w-0 rounded-md p-3 text-start transition-colors hover:bg-muted/70"
                      >
                        <p className="mb-1 font-semibold text-foreground">
                          {feature.title}
                        </p>
                        <p className="text-sm text-muted-foreground">
                          {feature.description}
                        </p>
                      </NavigationMenuLink>
                    ))}
                  </div>
                </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuLink
                  href="#"
                  className={cn(navigationMenuTriggerStyle(), "text-start")}
                >
                  محصولات
                </NavigationMenuLink>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuLink
                  href="#"
                  className={cn(navigationMenuTriggerStyle(), "text-start")}
                >
                  منابع
                </NavigationMenuLink>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuLink
                  href="#"
                  className={cn(navigationMenuTriggerStyle(), "text-start")}
                >
                  تماس
                </NavigationMenuLink>
              </NavigationMenuItem>
              </NavigationMenuList>
            </NavigationMenu>
          </div>
          <div className="hidden items-center gap-4 lg:flex">
            <Button variant="outline">ورود</Button>
            <Button>شروع رایگان</Button>
          </div>
          <Sheet>
            <SheetTrigger asChild className="lg:hidden">
              <Button variant="outline" size="icon" aria-label="باز کردن منو">
                <MenuIcon className="h-4 w-4" />
              </Button>
            </SheetTrigger>
            <SheetContent
              side="top"
              dir="rtl"
              className="max-h-screen overflow-auto text-start"
            >
              <SheetHeader>
                <SheetTitle>
                  <a
                    href="https://www.ShadcnBlocks"
                    className="flex items-center gap-2"
                  >
                    <img
                      src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
                      className="max-h-8 dark:invert"
                      alt="لوگو"
                    />
                    <span className="text-lg font-semibold tracking-tighter">
                      داده‌نما
                    </span>
                  </a>
                </SheetTitle>
              </SheetHeader>
              <div className="flex flex-col p-4">
                <Accordion
                  type="single"
                  collapsible
                  dir="rtl"
                  className="mt-4 mb-2 w-full text-start"
                >
                  <AccordionItem value="solutions" className="border-none">
                    <AccordionTrigger className="justify-start text-base hover:no-underline">
                      ویژگی‌ها
                    </AccordionTrigger>
                    <AccordionContent>
                      <div className="grid md:grid-cols-2">
                        {features.map((feature, index) => (
                          <a
                            href={feature.href}
                            key={index}
                            className="rounded-md p-3 text-start transition-colors hover:bg-muted/70"
                          >
                            <p className="mb-1 font-semibold text-foreground">
                              {feature.title}
                            </p>
                            <p className="text-sm text-muted-foreground">
                              {feature.description}
                            </p>
                          </a>
                        ))}
                      </div>
                    </AccordionContent>
                  </AccordionItem>
                </Accordion>
                <div className="flex flex-col gap-6">
                  <a href="#" className="font-medium">
                    محصولات
                  </a>
                  <a href="#" className="font-medium">
                    منابع
                  </a>
                  <a href="#" className="font-medium">
                    تماس
                  </a>
                </div>
                <div className="mt-6 flex flex-col gap-4">
                  <Button variant="outline">ورود</Button>
                  <Button>شروع رایگان</Button>
                </div>
              </div>
            </SheetContent>
          </Sheet>
        </nav>
      </div>
    </section>
  );
};

export { Navbar5 };