276 lines
9.8 KiB
TypeScript
276 lines
9.8 KiB
TypeScript
"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";
|
|
|
|
interface DropdownItem {
|
|
title: string;
|
|
href: string;
|
|
description: string;
|
|
}
|
|
|
|
interface NavItem {
|
|
label: string;
|
|
href: string;
|
|
dropdownItems?: DropdownItem[];
|
|
}
|
|
|
|
interface Navbar33Props {
|
|
logo?: {
|
|
src: string;
|
|
alt: string;
|
|
href?: string;
|
|
};
|
|
items?: NavItem[];
|
|
loginHref?: string;
|
|
/** When true, positions inside a relative parent (e.g. block preview) instead of the viewport. */
|
|
contained?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const Navbar33 = ({
|
|
logo = {
|
|
src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
|
|
alt: "لوگو",
|
|
href: "/",
|
|
},
|
|
items = [
|
|
{
|
|
label: "ویژگیها",
|
|
href: "#features",
|
|
dropdownItems: [
|
|
{
|
|
title: "تیمهای رشد مدرن",
|
|
href: "#feature-modern-teams",
|
|
description:
|
|
"بر پایه عادتهایی که تیمهای رشد را سریعتر به نتیجه میرساند",
|
|
},
|
|
{
|
|
title: "تخصیص ظرفیت",
|
|
href: "#resource-allocation",
|
|
description: "ظرفیت تیم و اجرای آزمایشها را ساده و یکپارچه کنید",
|
|
},
|
|
],
|
|
},
|
|
{ label: "درباره ما", href: "/about" },
|
|
{ label: "قیمتگذاری", href: "/pricing" },
|
|
{ label: "سوالات متداول", href: "/faq" },
|
|
{ label: "تماس با ما", href: "/contact" },
|
|
],
|
|
loginHref = "/login",
|
|
contained = false,
|
|
className,
|
|
}: Navbar33Props) => {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
|
|
const overlayPosition = contained ? "absolute" : "fixed";
|
|
|
|
return (
|
|
<header
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"z-50 w-full max-w-[700px] rounded-4xl border bg-background/70 backdrop-blur-md transition-all duration-300",
|
|
contained
|
|
? "relative mx-auto overflow-visible"
|
|
: "fixed 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={logo.href || "/"} className="flex shrink-0 items-center gap-2">
|
|
<img
|
|
src={logo.src}
|
|
alt={logo.alt}
|
|
className="h-5 w-auto dark:invert"
|
|
/>
|
|
</a>
|
|
|
|
{/* Desktop Navigation */}
|
|
<NavigationMenu
|
|
className={cn("max-lg:hidden", contained && "relative z-50")}
|
|
viewport={false}
|
|
>
|
|
<NavigationMenuList>
|
|
{items.map((link) =>
|
|
link.dropdownItems ? (
|
|
<NavigationMenuItem key={link.label}>
|
|
<NavigationMenuTrigger className="bg-transparent px-1.5 data-[state=open]:bg-accent/50">
|
|
{link.label}
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent
|
|
dir="rtl"
|
|
className={cn(contained && "z-50")}
|
|
>
|
|
<ul className="w-[400px] space-y-2 p-4 text-right">
|
|
{link.dropdownItems.map((item) => (
|
|
<li key={item.title}>
|
|
<NavigationMenuLink asChild>
|
|
<a
|
|
href={item.href}
|
|
className="group flex items-center gap-4 rounded-md p-3 text-right 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="space-y-1.5 transition-transform duration-300 group-hover:translate-x-1 rtl:group-hover:-translate-x-1">
|
|
<div className="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 transition-opacity hover:opacity-75"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</NavigationMenuItem>
|
|
),
|
|
)}
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
|
|
{/* Auth Buttons */}
|
|
<div className="flex items-center gap-2.5">
|
|
<a href={loginHref} className="max-lg:hidden">
|
|
<Button variant="outline">
|
|
<span className="relative z-10">ورود</span>
|
|
</Button>
|
|
</a>
|
|
|
|
{/* Hamburger Menu Button (Mobile Only) */}
|
|
<button
|
|
className="relative flex size-8 text-muted-foreground lg:hidden"
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
>
|
|
<span className="sr-only">باز کردن منوی اصلی</span>
|
|
<div className="absolute top-1/2 left-1/2 block w-[18px] -translate-x-1/2 -translate-y-1/2">
|
|
<span
|
|
aria-hidden="true"
|
|
className={cn(
|
|
"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={cn(
|
|
"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={cn(
|
|
"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>
|
|
|
|
{/* Mobile Menu Navigation */}
|
|
<div
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
overlayPosition,
|
|
"inset-x-0 top-[calc(100%+1rem)] flex flex-col rounded-2xl border bg-background p-6 text-right 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
|
|
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 shrink-0 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 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 { Navbar33 };
|