@opensite/ui 1.0.7 → 1.0.9

package/dist/navbar-enterprise-mega.js

@@ -1139,7 +1139,7 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
+        /* @__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,
@@ -1834,7 +1834,7 @@ var DesktopMenuItem = ({
   if (hasDropdown) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { value: `${index}`, children: [
       /* @__PURE__ */ 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__ */ jsx(NavigationMenuContent, { className: "!rounded-xl !border-0 !p-6", children: renderDropdownContent(
+      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "rounded-xl! border-0! p-4!", children: renderDropdownContent(
         { ...item, layout: effectiveLayout },
         optixFlowConfig
       ) })
@@ -1905,7 +1905,7 @@ var renderDropdownContent = (item, optixFlowConfig) => {
 var renderMobileDropdownContent = (item) => {
   switch (item.layout) {
     case "solutions-with-platform":
-      return /* @__PURE__ */ jsx("div", { className: "relative", children: item.solutionCards?.map((solution) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-2", children: item.solutionCards?.map((solution) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -1933,7 +1933,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
@@ -1944,7 +1944,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__ */ jsx(DynamicIcon, { name: resource.icon, size: 14 }),
             resource.title
@@ -2033,7 +2033,7 @@ var MobileNavigationMenu = ({
             typeof item.label === "string" ? item.label : `nav-${index}`
           );
         }) }),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-6 flex flex-col gap-4", actionsClassName), children: renderActions })
+        /* @__PURE__ */ jsx("div", { className: cn("mt-4 flex flex-col gap-4", actionsClassName), children: renderActions })
       ] })
     }
   );

package/dist/navbar-feature-grid.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,

package/dist/navbar-feature-grid.js

@@ -1139,7 +1139,7 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
+        /* @__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,

package/dist/navbar-icon-links.cjs

@@ -1059,7 +1059,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,
@@ -1265,6 +1265,7 @@ var NavbarIconLinks = ({
         /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
+            size: "icon",
             className: cn(
               "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
               "text-muted-foreground hover:bg-accent hover:text-accent-foreground",

package/dist/navbar-icon-links.js

@@ -1036,7 +1036,7 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
+        /* @__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,
@@ -1242,6 +1242,7 @@ var NavbarIconLinks = ({
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
           Pressable,
           {
+            size: "icon",
             className: cn(
               "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
               "text-muted-foreground hover:bg-accent hover:text-accent-foreground",

package/dist/navbar-image-preview.cjs

@@ -7,6 +7,7 @@ var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
+var AccordionPrimitive = require('@radix-ui/react-accordion');
 var NavigationMenuPrimitive = require('@radix-ui/react-navigation-menu');
 
 function _interopNamespace(e) {
@@ -28,6 +29,7 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var NavigationMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(NavigationMenuPrimitive);
 
 // components/blocks/navbars/navbar-image-preview.tsx
@@ -992,6 +994,66 @@ var NavbarLogo = ({
     }
   );
 };
+function Accordion({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-b ", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    AccordionPrimitive__namespace.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-0 pb-4", className), children })
+    }
+  );
+}
 function NavigationMenu({
   className,
   children,
@@ -1160,7 +1222,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,
@@ -1479,7 +1541,7 @@ var DesktopMenuItem = ({
               onMouseLeave: handleMouseLeave,
               children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm leading-normal font-medium", children: link.label }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-normal text-muted-foreground", children: link.description })
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-normal", children: link.description })
               ] })
             }
           ) }, `desktop-nav-sublink-${linkIndex}`)) })
@@ -1507,44 +1569,17 @@ var MobileNavigationMenu = ({
   authActions,
   authActionsSlot
 }) => {
-  const renderMobileNavigation = React.useMemo(() => {
-    if (mobileNavigationSlot) return mobileNavigationSlot;
-    if (!mobileNavigation || mobileNavigation.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-full grid-cols-2 gap-x-4 gap-y-10", children: mobileNavigation.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn(
-          "flex flex-col gap-4 text-primary-foreground",
-          item.className
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground uppercase", children: item.title }),
-          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-3", children: item.links?.map((link, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              href: getLinkUrl(link),
-              className: cn(
-                "text-primary-foreground leading-normal font-medium",
-                index === 0 ? "text-2xl" : "text-base"
-              ),
-              children: link.label
-            }
-          ) }, `mobile-nav-link-${i}`)) })
-        ]
-      },
-      `mobile-menu-item-${index}`
-    )) });
-  }, [mobileNavigationSlot, mobileNavigation]);
+  const handleClose = () => setOpen(false);
   const renderSocialLinks = React.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-2 flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground uppercase", children: "SOCIAL" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4", children: socialLinks.map((link, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mt-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 text-[10px] text-muted-foreground uppercase", children: "SOCIAL" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4 px-4", children: socialLinks.map((link, index) => /* @__PURE__ */ jsxRuntime.jsxs(
         Pressable,
         {
           href: link.url,
-          className: "text-primary-foreground",
+          onClick: handleClose,
           children: [
             link.icon ?? (link.iconName && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.iconName, size: 20 })),
             !link.icon && !link.iconName && link.label
@@ -1553,11 +1588,11 @@ var MobileNavigationMenu = ({
         `social-link-${index}`
       )) })
     ] });
-  }, [socialLinksSlot, socialLinks]);
+  }, [socialLinksSlot, socialLinks, handleClose]);
   const renderMobileAuthActions = React.useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: authActions.map((action, index) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 mt-6", children: authActions.map((action, index) => {
       const {
         label,
         icon,
@@ -1571,6 +1606,7 @@ var MobileNavigationMenu = ({
         {
           asButton: true,
           className: cn("w-full", actionClassName),
+          onClick: handleClose,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             icon,
@@ -1581,20 +1617,63 @@ var MobileNavigationMenu = ({
         index
       );
     }) });
-  }, [authActionsSlot, authActions]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    NavbarMobileMenu,
-    {
-      open,
-      onClose: () => setOpen(false),
-      title: "Mobile Navigation",
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col justify-between gap-30", children: [
-        renderMobileNavigation,
-        renderSocialLinks,
-        renderMobileAuthActions
-      ] }) })
-    }
-  );
+  }, [authActionsSlot, authActions, handleClose]);
+  if (mobileNavigationSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx(NavbarMobileMenu, { open, onClose: handleClose, title: "Mobile Navigation", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
+      mobileNavigationSlot,
+      renderSocialLinks,
+      renderMobileAuthActions
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(NavbarMobileMenu, { open, onClose: handleClose, title: "Mobile Navigation", 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: mobileNavigation.map((item, index) => {
+      if (item.links && item.links.length > 0) {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          AccordionItem,
+          {
+            value: `nav-${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: "overflow-x-none", children: item.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                Pressable,
+                {
+                  href: getLinkUrl(link),
+                  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: handleClose,
+                  children: [
+                    link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
+                      DynamicIcon,
+                      {
+                        name: link.iconName,
+                        size: 16,
+                        className: "stroke-muted-foreground"
+                      }
+                    ) : null,
+                    link.label
+                  ]
+                },
+                `mobile-link-${linkIndex}`
+              )) })
+            ]
+          },
+          `nav-item-${index}`
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          href: item.url,
+          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: handleClose,
+          children: item.title
+        },
+        `nav-link-${index}`
+      );
+    }) }),
+    renderSocialLinks,
+    renderMobileAuthActions
+  ] }) }) });
 };
 
 exports.NavbarImagePreview = NavbarImagePreview;

package/dist/navbar-image-preview.js

@@ -6,6 +6,7 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 
 // components/blocks/navbars/navbar-image-preview.tsx
@@ -970,6 +971,66 @@ var NavbarLogo = ({
     }
   );
 };
+function Accordion({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-b ", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cn("pt-0 pb-4", className), children })
+    }
+  );
+}
 function NavigationMenu({
   className,
   children,
@@ -1138,7 +1199,7 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
+        /* @__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,
@@ -1457,7 +1518,7 @@ var DesktopMenuItem = ({
               onMouseLeave: handleMouseLeave,
               children: /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("h3", { className: "text-sm leading-normal font-medium", children: link.label }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs leading-normal text-muted-foreground", children: link.description })
+                /* @__PURE__ */ jsx("p", { className: "text-xs leading-normal", children: link.description })
               ] })
             }
           ) }, `desktop-nav-sublink-${linkIndex}`)) })
@@ -1485,44 +1546,17 @@ var MobileNavigationMenu = ({
   authActions,
   authActionsSlot
 }) => {
-  const renderMobileNavigation = useMemo(() => {
-    if (mobileNavigationSlot) return mobileNavigationSlot;
-    if (!mobileNavigation || mobileNavigation.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-2 gap-x-4 gap-y-10", children: mobileNavigation.map((item, index) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "flex flex-col gap-4 text-primary-foreground",
-          item.className
-        ),
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground uppercase", children: item.title }),
-          /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3", children: item.links?.map((link, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              href: getLinkUrl(link),
-              className: cn(
-                "text-primary-foreground leading-normal font-medium",
-                index === 0 ? "text-2xl" : "text-base"
-              ),
-              children: link.label
-            }
-          ) }, `mobile-nav-link-${i}`)) })
-        ]
-      },
-      `mobile-menu-item-${index}`
-    )) });
-  }, [mobileNavigationSlot, mobileNavigation]);
+  const handleClose = () => setOpen(false);
   const renderSocialLinks = useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "col-span-2 flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground uppercase", children: "SOCIAL" }),
-      /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: socialLinks.map((link, index) => /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mt-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-4 text-[10px] text-muted-foreground uppercase", children: "SOCIAL" }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-4 px-4", children: socialLinks.map((link, index) => /* @__PURE__ */ jsxs(
         Pressable,
         {
           href: link.url,
-          className: "text-primary-foreground",
+          onClick: handleClose,
           children: [
             link.icon ?? (link.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: link.iconName, size: 20 })),
             !link.icon && !link.iconName && link.label
@@ -1531,11 +1565,11 @@ var MobileNavigationMenu = ({
         `social-link-${index}`
       )) })
     ] });
-  }, [socialLinksSlot, socialLinks]);
+  }, [socialLinksSlot, socialLinks, handleClose]);
   const renderMobileAuthActions = useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: authActions.map((action, index) => {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 mt-6", children: authActions.map((action, index) => {
       const {
         label,
         icon,
@@ -1549,6 +1583,7 @@ var MobileNavigationMenu = ({
         {
           asButton: true,
           className: cn("w-full", actionClassName),
+          onClick: handleClose,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
             icon,
@@ -1559,20 +1594,63 @@ var MobileNavigationMenu = ({
         index
       );
     }) });
-  }, [authActionsSlot, authActions]);
-  return /* @__PURE__ */ jsx(
-    NavbarMobileMenu,
-    {
-      open,
-      onClose: () => setOpen(false),
-      title: "Mobile Navigation",
-      children: /* @__PURE__ */ jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between gap-30", children: [
-        renderMobileNavigation,
-        renderSocialLinks,
-        renderMobileAuthActions
-      ] }) })
-    }
-  );
+  }, [authActionsSlot, authActions, handleClose]);
+  if (mobileNavigationSlot) {
+    return /* @__PURE__ */ jsx(NavbarMobileMenu, { open, onClose: handleClose, title: "Mobile Navigation", children: /* @__PURE__ */ jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+      mobileNavigationSlot,
+      renderSocialLinks,
+      renderMobileAuthActions
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsx(NavbarMobileMenu, { open, onClose: handleClose, title: "Mobile Navigation", 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: mobileNavigation.map((item, index) => {
+      if (item.links && item.links.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.title }),
+              /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: item.links.map((link, linkIndex) => /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  href: getLinkUrl(link),
+                  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: handleClose,
+                  children: [
+                    link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsx(
+                      DynamicIcon,
+                      {
+                        name: link.iconName,
+                        size: 16,
+                        className: "stroke-muted-foreground"
+                      }
+                    ) : null,
+                    link.label
+                  ]
+                },
+                `mobile-link-${linkIndex}`
+              )) })
+            ]
+          },
+          `nav-item-${index}`
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          href: item.url,
+          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: handleClose,
+          children: item.title
+        },
+        `nav-link-${index}`
+      );
+    }) }),
+    renderSocialLinks,
+    renderMobileAuthActions
+  ] }) }) });
 };
 
 export { NavbarImagePreview };

package/dist/navbar-mega-menu.cjs

@@ -1222,7 +1222,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,

package/dist/navbar-mega-menu.js

@@ -1199,7 +1199,7 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
+        /* @__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,