@opensite/ui 1.0.7 → 1.0.9

package/dist/navbar-education-platform.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useState, useMemo } from 'react';
+import React__default, { useState, useEffect, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -1190,6 +1190,62 @@ var NavbarLogo = ({
     }
   );
 };
+var NavbarMobileMenu = ({
+  open,
+  onClose,
+  children,
+  className,
+  contentClassName,
+  title = "Mobile Navigation"
+}) => {
+  React.useEffect(() => {
+    if (open) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "fixed inset-0 z-998 flex flex-col bg-background",
+        "animate-in slide-in-from-top duration-300",
+        "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
+        className
+      ),
+      "data-state": open ? "open" : "closed",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: onClose,
+            className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+            "aria-label": "Close mobile menu",
+            children: [
+              /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "h-full overflow-y-auto pt-20 pb-8 px-4 sm:px-6",
+              contentClassName
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+};
 
 // components/blocks/navbars/layout-variant-utils.ts
 function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
@@ -1226,6 +1282,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     spacingOverride: isFloatingBar ? "none" : "py-0 md:py-0"
   };
 }
+var MOBILE_BREAKPOINT = 1024;
 var NavbarEducationPlatform = ({
   className,
   containerClassName,
@@ -1236,12 +1293,12 @@ var NavbarEducationPlatform = ({
   mobileMenuClassName,
   logo,
   logoSlot,
-  features,
-  docs,
-  company,
-  featuredImage,
+  menu,
+  menuSlot,
   authActions,
   authActionsSlot,
+  mobileAuthActions,
+  mobileAuthActionsSlot,
   layoutVariant = "fullScreenContainerizedLinks",
   background,
   spacing,
@@ -1250,6 +1307,33 @@ var NavbarEducationPlatform = ({
   optixFlowConfig
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const handleResize = () => {
+      if (window.innerWidth > MOBILE_BREAKPOINT) {
+        setIsOpen(false);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  const handleMobileMenuClose = () => {
+    setIsOpen(false);
+  };
+  const renderNavigation = useMemo(() => {
+    if (menuSlot) return menuSlot;
+    if (!menu || menu.length === 0) return null;
+    return /* @__PURE__ */ jsx(NavigationMenuList, { children: menu.map((item, index) => /* @__PURE__ */ jsx(
+      DesktopMenuItem,
+      {
+        item,
+        index,
+        optixFlowConfig
+      },
+      `desktop-link-${index}`
+    )) });
+  }, [menuSlot, menu, optixFlowConfig]);
   const renderAuthActions = useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
@@ -1278,18 +1362,18 @@ var NavbarEducationPlatform = ({
     sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
-  return /* @__PURE__ */ jsxs(
-    Section,
-    {
-      background,
-      spacing: spacingOverride ?? spacing,
-      className: cn(isOpen && "border-b-0", sectionClasses),
-      pattern,
-      patternOpacity,
-      containerClassName: sectionContainerClassName,
-      containerMaxWidth: sectionContainerMaxWidth,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Section,
+      {
+        background,
+        spacing: spacingOverride ?? spacing,
+        className: sectionClasses,
+        pattern,
+        patternOpacity,
+        containerClassName: sectionContainerClassName,
+        containerMaxWidth: sectionContainerMaxWidth,
+        children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
           "nav",
           {
             className: cn(
@@ -1314,130 +1398,7 @@ var NavbarEducationPlatform = ({
                       "hidden items-center gap-1.5 lg:flex",
                       navigationMenuClassName
                     ),
-                    children: /* @__PURE__ */ jsx(NavigationMenu, { delayDuration: 0, children: /* @__PURE__ */ jsxs(NavigationMenuList, { children: [
-                      /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
-                        /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: "Products" }),
-                        /* @__PURE__ */ jsx(NavigationMenuContent, { className: "p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
-                          /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-                            /* @__PURE__ */ jsx("p", { className: "mb-3 text-[10px] text-muted-foreground uppercase", children: "TOOLS" }),
-                            features?.map((feature) => /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
-                              Pressable,
-                              {
-                                href: feature.link,
-                                className: "group flex cursor-pointer flex-row gap-3",
-                                children: [
-                                  /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsx(
-                                    DynamicIcon,
-                                    {
-                                      name: feature.icon,
-                                      size: 20
-                                    }
-                                  ) }),
-                                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                                    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5 text-sm font-medium whitespace-nowrap", children: [
-                                      feature.title,
-                                      /* @__PURE__ */ jsx(
-                                        DynamicIcon,
-                                        {
-                                          name: "lucide/chevron-right",
-                                          size: 16,
-                                          className: "text-primary! opacity-0 transition-all duration-200 group-hover:translate-x-0.5 group-hover:opacity-100"
-                                        }
-                                      )
-                                    ] }),
-                                    /* @__PURE__ */ jsx("p", { className: "text-xs whitespace-nowrap text-muted-foreground", children: feature.description })
-                                  ] })
-                                ]
-                              }
-                            ) }, feature.title))
-                          ] }),
-                          /* @__PURE__ */ jsx(
-                            Separator,
-                            {
-                              orientation: "vertical",
-                              className: "data-[orientation=vertical]:h-auto"
-                            }
-                          ),
-                          /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-                            /* @__PURE__ */ jsx("p", { className: "mb-3 text-[10px] text-muted-foreground uppercase", children: "QUICK START" }),
-                            /* @__PURE__ */ jsx("div", {}),
-                            featuredImage && /* @__PURE__ */ jsxs(Fragment, { children: [
-                              /* @__PURE__ */ jsx("p", { className: "mt-5 mb-3 text-[10px] text-muted-foreground uppercase", children: "LATEST UPDATES" }),
-                              /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: featuredImage.href || "#", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-primary p-3", children: /* @__PURE__ */ jsx(
-                                Img,
-                                {
-                                  src: featuredImage.src,
-                                  alt: featuredImage.alt || "Featured update",
-                                  className: "aspect-video min-w-52 rounded-md object-cover",
-                                  optixFlowConfig
-                                }
-                              ) }) }) })
-                            ] })
-                          ] })
-                        ] }) })
-                      ] }),
-                      /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
-                        /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: "Support" }),
-                        /* @__PURE__ */ jsx(NavigationMenuContent, { className: "p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
-                          /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-                            /* @__PURE__ */ jsx("p", { className: "mb-3 text-[10px] text-muted-foreground uppercase", children: "GUIDES" }),
-                            docs?.map((doc) => /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
-                              Pressable,
-                              {
-                                href: doc.link,
-                                className: "group flex flex-row gap-3",
-                                children: [
-                                  /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsx(DynamicIcon, { name: doc.icon, size: 20 }) }),
-                                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                                    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5 text-sm font-medium whitespace-nowrap", children: [
-                                      doc.title,
-                                      /* @__PURE__ */ jsx(
-                                        DynamicIcon,
-                                        {
-                                          name: "lucide/chevron-right",
-                                          size: 16,
-                                          className: "text-primary! opacity-0 transition-all duration-200 group-hover:translate-x-0.5 group-hover:opacity-100"
-                                        }
-                                      )
-                                    ] }),
-                                    /* @__PURE__ */ jsx("p", { className: "text-xs whitespace-nowrap text-muted-foreground", children: doc.description })
-                                  ] })
-                                ]
-                              }
-                            ) }, doc.title))
-                          ] }),
-                          /* @__PURE__ */ jsx(
-                            Separator,
-                            {
-                              orientation: "vertical",
-                              className: "data-[orientation=vertical]:h-auto"
-                            }
-                          ),
-                          /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-                            /* @__PURE__ */ jsx("p", { className: "mb-3 text-[10px] text-muted-foreground uppercase", children: "ABOUT US" }),
-                            /* @__PURE__ */ jsx("div", { children: company?.map((item) => /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
-                              Pressable,
-                              {
-                                href: item.link,
-                                className: "flex flex-row items-center gap-3",
-                                children: [
-                                  /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 16 }),
-                                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium whitespace-nowrap", children: item.title })
-                                ]
-                              }
-                            ) }, item.title)) })
-                          ] })
-                        ] }) })
-                      ] }),
-                      /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-                        NavigationMenuLink,
-                        {
-                          asChild: true,
-                          className: navigationMenuTriggerStyle(),
-                          children: /* @__PURE__ */ jsx(Pressable, { href: "#", children: "About" })
-                        }
-                      ) })
-                    ] }) })
+                    children: /* @__PURE__ */ jsx(NavigationMenu, { delayDuration: 0, viewport: false, children: renderNavigation })
                   }
                 )
               ] }),
@@ -1451,113 +1412,194 @@ var NavbarEducationPlatform = ({
                   children: renderAuthActions
                 }
               ),
-              /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
                 Pressable,
                 {
-                  variant: "outline",
+                  className: "size-11",
+                  variant: "ghost",
                   size: "icon",
                   asButton: true,
-                  className: "lg:hidden",
                   onClick: () => setIsOpen(!isOpen),
-                  children: [
-                    isOpen ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 20 }),
-                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle menu" })
-                  ]
+                  children: /* @__PURE__ */ jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/menu",
+                      size: 22,
+                      className: "stroke-foreground"
+                    }
+                  )
                 }
-              )
+              ) })
             ]
           }
-        ) }) }) }),
-        isOpen && /* @__PURE__ */ jsx(
-          "div",
+        ) }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MobileNavigationMenu,
+      {
+        open: isOpen,
+        onClose: handleMobileMenuClose,
+        menu: menu ?? [],
+        mobileAuthActions,
+        mobileAuthActionsSlot,
+        mobileMenuClassName
+      }
+    )
+  ] });
+};
+var DesktopMenuItem = ({
+  item,
+  index,
+  optixFlowConfig
+}) => {
+  if (item.groups && item.groups.length > 0) {
+    return /* @__PURE__ */ jsxs(NavigationMenuItem, { value: `${index}`, children: [
+      /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: item.label }),
+      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "p-0", children: /* @__PURE__ */ jsx("div", { className: "flex", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        groupIndex > 0 && /* @__PURE__ */ jsx(
+          Separator,
           {
-            className: cn(
-              "border-t bg-background lg:hidden",
-              mobileMenuClassName
-            ),
-            children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-              /* @__PURE__ */ jsxs(Accordion, { type: "single", collapsible: true, className: "w-full", children: [
-                /* @__PURE__ */ jsxs(AccordionItem, { value: "learning-hub", children: [
-                  /* @__PURE__ */ jsx(AccordionTrigger, { className: "pr-2.5 text-base font-medium hover:no-underline", children: "Products" }),
-                  /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("p", { className: "mb-3 text-[10px] text-muted-foreground uppercase", children: "TOOLS" }),
-                      /* @__PURE__ */ jsx("div", { className: "space-y-5", children: features?.map((feature) => /* @__PURE__ */ jsxs(
-                        Pressable,
-                        {
-                          href: feature.link,
-                          className: "group flex cursor-pointer flex-row gap-3 rounded-md transition-colors",
-                          onClick: () => setIsOpen(false),
-                          children: [
-                            /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsx(DynamicIcon, { name: feature.icon, size: 16 }) }),
-                            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
-                              /* @__PURE__ */ jsx("span", { className: "text-sm leading-tight font-medium", children: feature.title }),
-                              /* @__PURE__ */ jsx("p", { className: "text-xs leading-tight text-muted-foreground", children: feature.description })
-                            ] })
-                          ]
-                        },
-                        feature.title
-                      )) })
-                    ] }),
-                    /* @__PURE__ */ jsx(Separator, {}),
-                    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "mb-3 text-[10px] text-muted-foreground uppercase", children: "QUICK START" }) })
-                  ] }) })
-                ] }),
-                /* @__PURE__ */ jsxs(AccordionItem, { value: "support", className: "last:border-b", children: [
-                  /* @__PURE__ */ jsx(AccordionTrigger, { className: "pr-2.5 text-base font-medium hover:no-underline", children: "Support" }),
-                  /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("p", { className: "mb-3 text-[10px] text-muted-foreground uppercase", children: "GUIDES" }),
-                      /* @__PURE__ */ jsx("div", { className: "space-y-5", children: docs?.map((doc) => /* @__PURE__ */ jsxs(
-                        Pressable,
-                        {
-                          href: doc.link,
-                          className: "group flex cursor-pointer flex-row gap-3 rounded-md transition-colors",
-                          onClick: () => setIsOpen(false),
-                          children: [
-                            /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsx(DynamicIcon, { name: doc.icon, size: 16 }) }),
-                            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
-                              /* @__PURE__ */ jsx("span", { className: "text-sm leading-tight font-medium", children: doc.title }),
-                              /* @__PURE__ */ jsx("p", { className: "text-xs leading-tight text-muted-foreground", children: doc.description })
-                            ] })
-                          ]
-                        },
-                        doc.title
-                      )) })
-                    ] }),
-                    /* @__PURE__ */ jsx(Separator, {}),
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("p", { className: "mb-3 text-[10px] text-muted-foreground uppercase", children: "ABOUT US" }),
-                      /* @__PURE__ */ jsx("div", { className: "space-y-5", children: company?.map((item) => /* @__PURE__ */ jsxs(
-                        Pressable,
-                        {
-                          href: item.link,
-                          className: "flex cursor-pointer flex-row items-center gap-3 rounded-md transition-colors",
-                          onClick: () => setIsOpen(false),
-                          children: [
-                            /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 16 }),
-                            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: item.title })
-                          ]
-                        },
-                        item.title
-                      )) })
-                    ] })
-                  ] }) })
+            orientation: "vertical",
+            className: "data-[orientation=vertical]:h-auto"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+          /* @__PURE__ */ jsx("p", { className: "mb-3 text-[10px] text-muted-foreground uppercase", children: group.label }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              href: link.href,
+              className: "group flex cursor-pointer flex-row gap-3",
+              children: [
+                link.icon && /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsx(DynamicIcon, { name: link.icon, size: 20 }) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5 text-sm font-medium whitespace-nowrap", children: [
+                    link.title,
+                    /* @__PURE__ */ jsx(
+                      DynamicIcon,
+                      {
+                        name: "lucide/chevron-right",
+                        size: 16,
+                        className: "text-primary! opacity-0 transition-all duration-200 group-hover:translate-x-0.5 group-hover:opacity-100"
+                      }
+                    )
+                  ] }),
+                  link.description && /* @__PURE__ */ jsx("p", { className: "text-xs whitespace-nowrap text-muted-foreground", children: link.description })
                 ] })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx(
-                Pressable,
-                {
-                  href: "#",
-                  className: "block border-b border-border py-4 pr-3 text-base font-medium transition-colors",
-                  onClick: () => setIsOpen(false),
-                  children: "About"
-                }
-              ) })
-            ] })
+              ]
+            }
+          ) }, link.title)) }),
+          group.featuredImage && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: group.featuredImage.href || "#", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted p-3", children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: group.featuredImage.src,
+              alt: group.featuredImage.alt || "Featured image",
+              className: "aspect-video w-full max-w-[240px] rounded-md object-cover object-center",
+              optixFlowConfig
+            }
+          ) }) }) }) })
+        ] })
+      ] }, `group-${groupIndex}`)) }) })
+    ] }, `desktop-menu-item-${index}`);
+  }
+  return /* @__PURE__ */ jsx(NavigationMenuItem, { value: `${index}`, children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, className: navigationMenuTriggerStyle(), children: /* @__PURE__ */ jsx(Pressable, { href: item.href, children: item.label }) }) }, `desktop-menu-item-${index}`);
+};
+var MobileNavigationMenu = ({
+  open,
+  onClose,
+  menu,
+  mobileAuthActions,
+  mobileAuthActionsSlot,
+  mobileMenuClassName
+}) => {
+  const renderMobileAuthActions = useMemo(() => {
+    if (mobileAuthActionsSlot) return mobileAuthActionsSlot;
+    if (!mobileAuthActions || mobileAuthActions.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: mobileAuthActions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: cn("w-full", actionClassName),
+          onClick: onClose,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    }) });
+  }, [mobileAuthActionsSlot, mobileAuthActions, onClose]);
+  return /* @__PURE__ */ jsx(
+    NavbarMobileMenu,
+    {
+      open,
+      onClose,
+      title: "Mobile Navigation",
+      className: mobileMenuClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", children: menu.map((item, index) => {
+          if (item.groups && item.groups.length > 0) {
+            return /* @__PURE__ */ jsxs(
+              AccordionItem,
+              {
+                value: `nav-${index}`,
+                className: "border-b-0",
+                children: [
+                  /* @__PURE__ */ 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.label }),
+                  /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsx("p", { className: "mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.label }),
+                    group.links.map((link) => /* @__PURE__ */ jsxs(
+                      Pressable,
+                      {
+                        href: link.href,
+                        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",
+                        onClick: onClose,
+                        children: [
+                          link.icon && /* @__PURE__ */ jsx(
+                            DynamicIcon,
+                            {
+                              name: link.icon,
+                              size: 16,
+                              className: "stroke-muted-foreground"
+                            }
+                          ),
+                          link.title
+                        ]
+                      },
+                      link.title
+                    ))
+                  ] }, `mobile-group-${groupIndex}`)) })
+                ]
+              },
+              `nav-item-${index}`
+            );
           }
-        )
-      ]
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: item.href,
+              className: "flex h-15 items-center rounded-md p-0 px-4 text-left text-base leading-[3.75] font-normal text-muted-foreground ring-ring/10 outline-ring/50 transition-all hover:bg-muted focus-visible:ring-4 focus-visible:outline-1",
+              onClick: onClose,
+              children: item.label
+            },
+            `nav-link-${index}`
+          );
+        }) }),
+        renderMobileAuthActions
+      ] }) })
     }
   );
 };

package/dist/navbar-enterprise-mega.cjs

@@ -1162,7 +1162,7 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             onClick: onClose,
@@ -1857,7 +1857,7 @@ var DesktopMenuItem = ({
   if (hasDropdown) {
     return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { value: `${index}`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted data-[state=open]:bg-muted/50", children: item.label }),
-      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "!rounded-xl !border-0 !p-6", children: renderDropdownContent(
+      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "rounded-xl! border-0! p-4!", children: renderDropdownContent(
         { ...item, layout: effectiveLayout },
         optixFlowConfig
       ) })
@@ -1928,7 +1928,7 @@ var renderDropdownContent = (item, optixFlowConfig) => {
 var renderMobileDropdownContent = (item) => {
   switch (item.layout) {
     case "solutions-with-platform":
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: item.solutionCards?.map((solution) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col space-y-2", children: item.solutionCards?.map((solution) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -1956,7 +1956,7 @@ var renderMobileDropdownContent = (item) => {
           Pressable,
           {
             href: product.href,
-            className: "flex items-center gap-2 text-sm text-muted-foreground",
+            className: "flex items-center pl-4 gap-2 text-sm text-muted-foreground",
             children: product.title
           },
           product.id
@@ -1967,7 +1967,7 @@ var renderMobileDropdownContent = (item) => {
         Pressable,
         {
           href: resource.href,
-          className: "flex items-center gap-2 text-sm text-muted-foreground",
+          className: "flex items-center pl-4 gap-2 text-sm text-muted-foreground",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: resource.icon, size: 14 }),
             resource.title
@@ -2056,7 +2056,7 @@ var MobileNavigationMenu = ({
             typeof item.label === "string" ? item.label : `nav-${index}`
           );
         }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 flex flex-col gap-4", actionsClassName), children: renderActions })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4 flex flex-col gap-4", actionsClassName), children: renderActions })
       ] })
     }
   );