"use client"; import { useId, useState } from "react"; import type { HTMLAttributes, ReactNode } from "react"; import * as NavigationMenu from "@radix-ui/react-navigation-menu"; import * as Dialog from "@radix-ui/react-dialog"; export type MegaMenuLink = { title: string; href: string; description?: string; }; export type MegaMenuGroup = { label: string; items: MegaMenuLink[]; footer?: { label: string; href: string }; }; export type MegaMenuNavbarProps = Omit, "children"> & { brand: ReactNode; brandHref?: string; groups: MegaMenuGroup[]; links?: { label: string; href: string }[]; actions?: ReactNode; currentHref?: string; label?: string; mobileOpen?: boolean; defaultMobileOpen?: boolean; onMobileOpenChange?: (open: boolean) => void; }; const ring = "outline-none focus-visible:ring-2 focus-visible:ring-[#1F4E79] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-[#8CB6E0] dark:focus-visible:ring-offset-[#121A22]"; function Chevron({ className = "" }: { className?: string }) { return ( ); } export function MegaMenuNavbar({ brand, brandHref = "/", groups, links = [], actions, currentHref, label = "Main", mobileOpen, defaultMobileOpen = false, onMobileOpenChange, className = "", ...props }: MegaMenuNavbarProps) { const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultMobileOpen); const [expandedGroup, setExpandedGroup] = useState(null); const open = mobileOpen ?? uncontrolledOpen; const baseId = useId(); const setOpen = (next: boolean) => { if (mobileOpen === undefined) setUncontrolledOpen(next); onMobileOpenChange?.(next); }; return (

{brand} {groups.map((group) => ( {group.label}

{item.title} {item.description ? ( {item.description} ) : null}

{group.footer ? (

{group.footer.label}

) : null} ))} {links.map((link) => ( {link.label} ))}

{actions ?

{actions}

: null}

Menu Site navigation

{actions ?

{actions}

: null}

); }