@opensite/ui 1.0.6 → 1.0.7

package/dist/navbar-platform-resources.js

@@ -1290,27 +1290,30 @@ var NavbarPlatformResources = ({
   const renderDropdownContent = (link) => {
     const layout = link.layout || "simple-list";
     if (layout === "simple-list") {
-      return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[640px] p-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
-        NavigationMenuLink,
+      return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "w-[400px] p-3", children: /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsx(
+        "li",
         {
-          href: getLinkUrl(item),
-          className: "flex flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-accent hover:text-accent-foreground",
-          children: [
-            item.image && /* @__PURE__ */ jsx("div", { className: "h-12 w-12 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: item.image,
-                alt: typeof item.label === "string" ? item.label : "Menu item",
-                className: "h-full w-full object-cover object-center",
-                optixFlowConfig
-              }
-            ) }),
-            !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 18 }) : null }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: item.label }),
-              item.description && /* @__PURE__ */ jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
-            ] })
-          ]
+          children: /* @__PURE__ */ jsxs(
+            NavigationMenuLink,
+            {
+              href: getLinkUrl(item),
+              className: "group/link flex-row gap-2 px-3 py-2 transition-colors duration-200",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 rounded-lg border duration-400 fade-in group-hover/link:bg-background", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(
+                  DynamicIcon,
+                  {
+                    name: item.iconName,
+                    size: 16,
+                    className: "m-auto group-hover/link:stroke-black"
+                  }
+                ) : null }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
+                  item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground group-hover/link:text-foreground", children: item.description })
+                ] })
+              ]
+            }
+          )
         },
         `${typeof item.label === "string" ? item.label : "item"}-${itemIndex}`
       )) }) });
@@ -1659,7 +1662,7 @@ var NavbarPlatformResources = ({
                           className: "border-b-0",
                           children: [
                             /* @__PURE__ */ jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal text-foreground hover:no-underline", children: link.label }),
-                            /* @__PURE__ */ jsx(AccordionContent, { className: "max-h-[60dvh] overflow-y-auto space-y-4", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+                            /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
                               Pressable,
                               {
                                 href: getLinkUrl(item),

package/dist/registry.cjs

@@ -57508,11 +57508,11 @@ var renderMobileMenuItem2 = (item) => {
   if (item.items) {
     return /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: item.title, className: "border-b-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal text-foreground hover:no-underline", children: item.title }),
-      /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "max-h-[60dvh] overflow-y-auto space-y-2", children: item.items.map((subItem) => /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.items.map((subItem) => /* @__PURE__ */ jsxRuntime.jsxs(
         Pressable,
         {
           href: subItem.url,
-          className: "flex items-center gap-2 pl-4 text-sm text-muted-foreground hover:text-foreground",
+          className: "flex items-center gap-2 pl-2 text-sm text-muted-foreground hover:text-foreground",
           children: [
             subItem.icon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: subItem.icon, size: 14 }),
             subItem.title
@@ -57889,51 +57889,6 @@ var DesktopMenuItem = ({
   }
   return null;
 };
-var MobileSubmenu = ({
-  submenu,
-  mobileMenuClassName,
-  optixFlowConfig
-}) => {
-  const items = submenu.links || [];
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "fixed inset-0 top-[72px] flex h-[calc(100vh-72px)] w-full flex-col overflow-scroll border-t border-border bg-background lg:hidden",
-        mobileMenuClassName
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-8 py-3.5 text-xs tracking-widest text-muted-foreground uppercase", children: submenu.label }),
-        items.map((item, index) => {
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            Pressable,
-            {
-              href: getLinkUrl(item),
-              className: "flex items-start gap-4 border-b border-border px-8 py-5",
-              children: [
-                item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  img.Img,
-                  {
-                    src: item.image,
-                    alt: typeof item.label === "string" ? item.label : "Menu item",
-                    className: "h-full w-full object-cover object-center",
-                    optixFlowConfig
-                  }
-                ) }),
-                !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base", children: item.label }),
-                  item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: item.description })
-                ] })
-              ]
-            },
-            `mobile-item-${index}`
-          );
-        })
-      ]
-    }
-  );
-};
 var NavbarMegaMenu = ({
   className,
   containerClassName,
@@ -57954,8 +57909,6 @@ var NavbarMegaMenu = ({
   optixFlowConfig
 }) => {
   const [open, setOpen] = React52.useState(false);
-  const [submenuIndex, setSubmenuIndex] = React52.useState(null);
-  const activeSubmenu = submenuIndex !== null ? menuLinks?.[submenuIndex] : null;
   const hasDropdownItems = (link) => Boolean(
     link.links && link.links.length > 0 || link.dropdownGroups && link.dropdownGroups.length > 0
   );
@@ -58009,36 +57962,15 @@ var NavbarMegaMenu = ({
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: navWrapperClasses, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                (!open || submenuIndex === null) && /* @__PURE__ */ jsxRuntime.jsx(
-                  NavbarLogo,
-                  {
-                    logo,
-                    logoSlot,
-                    logoClassName,
-                    optixFlowConfig
-                  }
-                ),
-                open && submenuIndex !== null && /* @__PURE__ */ jsxRuntime.jsxs(
-                  Pressable,
-                  {
-                    variant: "outline",
-                    asButton: true,
-                    onClick: () => setSubmenuIndex(null),
-                    children: [
-                      "Back",
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        DynamicIcon,
-                        {
-                          name: "lucide/chevron-left",
-                          size: 16,
-                          className: "ml-2"
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                NavbarLogo,
+                {
+                  logo,
+                  logoSlot,
+                  logoClassName,
+                  optixFlowConfig
+                }
+              ) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 NavigationMenuList,
                 {
@@ -58079,14 +58011,7 @@ var NavbarMegaMenu = ({
                   size: "icon",
                   asButton: true,
                   "aria-label": "Main Menu",
-                  onClick: () => {
-                    if (open) {
-                      setOpen(false);
-                      setSubmenuIndex(null);
-                    } else {
-                      setOpen(true);
-                    }
-                  },
+                  onClick: () => setOpen(!open),
                   children: [
                     !open && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 }),
                     open && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 16 })
@@ -58094,31 +58019,42 @@ var NavbarMegaMenu = ({
                 }
               ) })
             ] }),
-            open && submenuIndex === null && /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              NavbarMobileMenu,
               {
-                className: cn(
-                  "fixed inset-0 top-[72px] flex h-[calc(100vh-72px)] w-full flex-col overflow-scroll border-t border-border bg-background lg:hidden",
-                  mobileMenuClassName
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: menuLinks?.map((link, index) => {
+                open,
+                onClose: () => setOpen(false),
+                title: "Mobile Navigation",
+                contentClassName: "pt-10 pb-20",
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-screen-sm mx-auto", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: menuLinks?.map((link, index) => {
                     if (hasDropdownItems(link)) {
+                      const items = link.links || [];
                       return /* @__PURE__ */ jsxRuntime.jsxs(
-                        "button",
+                        AccordionItem,
                         {
-                          type: "button",
-                          className: "flex w-full items-center border-b border-border px-8 py-7 text-left",
-                          onClick: () => setSubmenuIndex(index),
+                          value: `menu-${index}`,
+                          className: "border-b-0",
                           children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: link.label }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              DynamicIcon,
+                            /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal text-foreground hover:no-underline", children: link.label }),
+                            /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                              Pressable,
                               {
-                                name: "lucide/chevron-right",
-                                size: 16
-                              }
-                            ) })
+                                href: getLinkUrl(item),
+                                className: "flex items-center gap-2 pl-4 text-sm text-muted-foreground hover:text-foreground",
+                                children: [
+                                  (item.icon || item.iconName) && (item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
+                                    DynamicIcon,
+                                    {
+                                      name: item.iconName,
+                                      size: 14
+                                    }
+                                  ) : null),
+                                  item.label
+                                ]
+                              },
+                              `mobile-link-${index}-${itemIndex}`
+                            )) })
                           ]
                         },
                         `mobile-menu-link-${index}`
@@ -58131,8 +58067,8 @@ var NavbarMegaMenu = ({
                       Pressable,
                       {
                         href: link.href,
-                        className: "flex w-full items-center border-b border-border px-8 py-7 text-left",
-                        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: link.label })
+                        className: "flex h-15 items-center text-base font-normal text-foreground",
+                        children: link.label
                       },
                       `mobile-menu-link-${index}`
                     );
@@ -58140,22 +58076,11 @@ var NavbarMegaMenu = ({
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: cn(
-                        "mx-8 mt-auto flex flex-col gap-4 py-12",
-                        actionsClassName
-                      ),
+                      className: cn("mt-6 flex flex-col gap-4", actionsClassName),
                       children: renderActions()
                     }
                   )
-                ]
-              }
-            ),
-            open && activeSubmenu && hasDropdownItems(activeSubmenu) && /* @__PURE__ */ jsxRuntime.jsx(
-              MobileSubmenu,
-              {
-                submenu: activeSubmenu,
-                mobileMenuClassName,
-                optixFlowConfig
+                ] })
               }
             )
           ]
@@ -58808,7 +58733,7 @@ var renderDropdownContent = (item, optixFlowConfig) => {
 var renderMobileDropdownContent = (item) => {
   switch (item.layout) {
     case "solutions-with-platform":
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: item.solutionCards?.map((solution) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: item.solutionCards?.map((solution) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -58920,7 +58845,7 @@ var MobileNavigationMenu = ({
                 className: "border-b-0",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal text-foreground hover:no-underline", children: item.label }),
-                  /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "max-h-[60dvh] overflow-y-auto", children: renderMobileDropdownContent(item) })
+                  /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: renderMobileDropdownContent(item) })
                 ]
               },
               typeof item.label === "string" ? item.label : `nav-${index}`
@@ -59075,15 +59000,15 @@ var NavbarFeatureGrid = ({
                 children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-screen-sm mx-auto", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs(Accordion, { type: "multiple", className: "w-full", children: [
                     features && features.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: "features", className: "border-b-0", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal text-foreground hover:no-underline", children: "Features" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "max-h-[60dvh] overflow-y-auto space-y-2", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                      /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal hover:no-underline", children: "Features" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(
                         Pressable,
                         {
                           href: feature.href,
-                          className: "flex items-start gap-2 pl-4 text-sm text-muted-foreground hover:text-foreground",
-                          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-semibold", children: feature.title }),
-                            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
+                          className: "flex items-start gap-2 pl-4 text-sm",
+                          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: feature.title }),
+                            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: feature.description })
                           ] })
                         },
                         index
@@ -59093,7 +59018,7 @@ var NavbarFeatureGrid = ({
                       Pressable,
                       {
                         href: item.url,
-                        className: "flex h-15 items-center text-base font-normal text-foreground",
+                        className: "flex h-15 items-center text-base font-normal",
                         children: item.title
                       },
                       index
@@ -59399,27 +59324,30 @@ var NavbarPlatformResources = ({
   const renderDropdownContent3 = (link) => {
     const layout = link.layout || "simple-list";
     if (layout === "simple-list") {
-      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[640px] p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
-        NavigationMenuLink,
+      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "w-[400px] p-3", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+        "li",
         {
-          href: getLinkUrl(item),
-          className: "flex flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-accent hover:text-accent-foreground",
-          children: [
-            item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-12 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                src: item.image,
-                alt: typeof item.label === "string" ? item.label : "Menu item",
-                className: "h-full w-full object-cover object-center",
-                optixFlowConfig
-              }
-            ) }),
-            !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 18 }) : null }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-foreground", children: item.label }),
-              item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
-            ] })
-          ]
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            NavigationMenuLink,
+            {
+              href: getLinkUrl(item),
+              className: "group/link flex-row gap-2 px-3 py-2 transition-colors duration-200",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 shrink-0 rounded-lg border duration-400 fade-in group-hover/link:bg-background", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
+                  DynamicIcon,
+                  {
+                    name: item.iconName,
+                    size: 16,
+                    className: "m-auto group-hover/link:stroke-black"
+                  }
+                ) : null }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: item.label }),
+                  item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground group-hover/link:text-foreground", children: item.description })
+                ] })
+              ]
+            }
+          )
         },
         `${typeof item.label === "string" ? item.label : "item"}-${itemIndex}`
       )) }) });
@@ -59768,7 +59696,7 @@ var NavbarPlatformResources = ({
                           className: "border-b-0",
                           children: [
                             /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal text-foreground hover:no-underline", children: link.label }),
-                            /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "max-h-[60dvh] overflow-y-auto space-y-4", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                            /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
                               Pressable,
                               {
                                 href: getLinkUrl(item),
@@ -59981,7 +59909,7 @@ var NavbarImagePreview = ({
                     {
                       className: cn("flex items-center gap-3.5", actionsClassName),
                       children: [
-                        renderAuthActions,
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:flex lg:items-center lg:gap-3.5", children: renderAuthActions }),
                         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
                           Pressable,
                           {
@@ -60005,7 +59933,7 @@ var NavbarImagePreview = ({
           {
             open,
             setOpen,
-            mobileNavigation: mobileNavigation ?? [],
+            mobileNavigation: mobileNavigation ?? navigation ?? [],
             mobileNavigationSlot,
             socialLinks: socialLinks ?? [],
             socialLinksSlot,
@@ -60628,21 +60556,21 @@ var NavbarAnimatedPreview = ({
     "h-full max-w-full after:absolute after:inset-0 after:z-998 after:block after:size-full after:content-[''] [&>div:last-child>div]:mt-0 [&>div:last-child>div]:animate-none [&>div:last-child>div]:rounded-none [&>div:last-child>div]:border-0 [&>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)]!",
     navigationMenuClassName
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Section,
-    {
-      background,
-      spacing: spacingOverride ?? spacing,
-      className: cn(
-        "pointer-events-auto fixed top-0 z-999 flex w-full items-center justify-center",
-        sectionClasses
-      ),
-      pattern,
-      patternOpacity,
-      containerClassName: sectionContainerClassName,
-      containerMaxWidth: sectionContainerMaxWidth,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: baseNavWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: innerContainerClasses, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu, { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Section,
+      {
+        background,
+        spacing: spacingOverride ?? spacing,
+        className: cn(
+          "pointer-events-auto fixed top-0 z-999 flex w-full items-center justify-center",
+          sectionClasses
+        ),
+        pattern,
+        patternOpacity,
+        containerClassName: sectionContainerClassName,
+        containerMaxWidth: sectionContainerMaxWidth,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: baseNavWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu, { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
@@ -60669,14 +60597,7 @@ var NavbarAnimatedPreview = ({
                     size: "icon",
                     asButton: true,
                     onClick: handleMobileMenu,
-                    children: open ? /* @__PURE__ */ jsxRuntime.jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/x",
-                        size: 22,
-                        className: "stroke-foreground"
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
                       DynamicIcon,
                       {
                         name: "lucide/menu",
@@ -60689,20 +60610,20 @@ var NavbarAnimatedPreview = ({
               ] })
             ]
           }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          MobileNavigationMenu4,
-          {
-            open,
-            setOpen,
-            menuLinks: menuLinks ?? [],
-            actions,
-            actionsSlot
-          }
-        )
-      ] }) }) })
-    }
-  );
+        ) }) }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MobileNavigationMenu4,
+      {
+        open,
+        setOpen,
+        menuLinks: menuLinks ?? [],
+        actions,
+        actionsSlot
+      }
+    )
+  ] });
 };
 var DesktopMenuItem5 = ({
   item,
@@ -61160,18 +61081,18 @@ var NavbarMultiColumnGroups = ({
     sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Section,
-    {
-      background,
-      spacing: spacingOverride ?? spacing,
-      className: sectionClasses,
-      pattern,
-      patternOpacity,
-      containerClassName: sectionContainerClassName,
-      containerMaxWidth: sectionContainerMaxWidth,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Section,
+      {
+        background,
+        spacing: spacingOverride ?? spacing,
+        className: sectionClasses,
+        pattern,
+        patternOpacity,
+        containerClassName: sectionContainerClassName,
+        containerMaxWidth: sectionContainerMaxWidth,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
@@ -61213,16 +61134,10 @@ var NavbarMultiColumnGroups = ({
                 {
                   className: "size-11",
                   variant: "ghost",
+                  size: "icon",
                   asButton: true,
                   onClick: handleMobileMenu,
-                  children: open ? /* @__PURE__ */ jsxRuntime.jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/x",
-                      size: 22,
-                      className: "stroke-foreground"
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
                     DynamicIcon,
                     {
                       name: "lucide/menu",
@@ -61234,20 +61149,20 @@ var NavbarMultiColumnGroups = ({
               ) })
             ]
           }
-        ) }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          MobileNavigationMenu5,
-          {
-            open,
-            setOpen,
-            navigation: navigation ?? [],
-            authActions: mobileAuthActions,
-            authActionsSlot: mobileAuthActionsSlot
-          }
-        )
-      ]
-    }
-  );
+        ) }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MobileNavigationMenu5,
+      {
+        open,
+        setOpen,
+        navigation: navigation ?? [],
+        authActions: mobileAuthActions,
+        authActionsSlot: mobileAuthActionsSlot
+      }
+    )
+  ] });
 };
 var DesktopMenuItem6 = ({ item, index }) => {
   if (item.groups) {
@@ -61329,7 +61244,6 @@ var MobileNavigationMenu5 = ({
       open,
       onClose: () => setOpen(false),
       title: "Mobile Navigation",
-      className: "dark",
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map((item, index) => renderMobileMenuItem5(item, index)) }),
         renderMobileAuthActions
@@ -61346,12 +61260,12 @@ var renderMobileMenuItem5 = (item, index) => {
         className: "border-b-0",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: item.title }),
-          /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "max-h-[60dvh] overflow-x-auto", children: item.groups.flatMap(
+          /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.flatMap(
             (group, groupIndex) => group.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
               Pressable,
               {
                 href: link.url,
-                className: "flex h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
+                className: "flex min-h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
                 children: [
                   link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
                     DynamicIcon,