@opensite/ui 1.1.0 → 1.1.1

package/dist/navbar-tabbed-sections.js

@@ -1115,7 +1115,8 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
-  closeContainerClassName = "",
+  closeContainerClassName,
+  closeIconClassName,
   title = "Mobile Navigation"
 }) => {
   React.useEffect(() => {
@@ -1144,8 +1145,8 @@ var NavbarMobileMenu = ({
           "div",
           {
             className: cn(
-              closeContainerClassName,
-              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
+              closeContainerClassName
             ),
             children: /* @__PURE__ */ jsxs(
               "button",
@@ -1154,7 +1155,7 @@ var NavbarMobileMenu = ({
                 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(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
                   /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
                 ]
               }

package/dist/navbar-transparent-overlay.cjs

@@ -998,7 +998,8 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
-  closeContainerClassName = "",
+  closeContainerClassName,
+  closeIconClassName,
   title = "Mobile Navigation"
 }) => {
   React__namespace.useEffect(() => {
@@ -1027,8 +1028,8 @@ var NavbarMobileMenu = ({
           "div",
           {
             className: cn(
-              closeContainerClassName,
-              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
+              closeContainerClassName
             ),
             children: /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
@@ -1037,7 +1038,7 @@ var NavbarMobileMenu = ({
                 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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
                 ]
               }
@@ -1499,6 +1500,7 @@ var MobileNavigationMenu = ({
       className: cn("bg-black/95", mobileMenuClassName),
       contentClassName: "flex flex-col items-center justify-center",
       closeContainerClassName: "bg-black/95",
+      closeIconClassName: "text-white",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex flex-col items-center gap-8", children: navItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
           Pressable,

package/dist/navbar-transparent-overlay.js

@@ -976,7 +976,8 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
-  closeContainerClassName = "",
+  closeContainerClassName,
+  closeIconClassName,
   title = "Mobile Navigation"
 }) => {
   React.useEffect(() => {
@@ -1005,8 +1006,8 @@ var NavbarMobileMenu = ({
           "div",
           {
             className: cn(
-              closeContainerClassName,
-              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
+              closeContainerClassName
             ),
             children: /* @__PURE__ */ jsxs(
               "button",
@@ -1015,7 +1016,7 @@ var NavbarMobileMenu = ({
                 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(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
                   /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
                 ]
               }
@@ -1477,6 +1478,7 @@ var MobileNavigationMenu = ({
       className: cn("bg-black/95", mobileMenuClassName),
       contentClassName: "flex flex-col items-center justify-center",
       closeContainerClassName: "bg-black/95",
+      closeIconClassName: "text-white",
       children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center", children: [
         /* @__PURE__ */ jsx("nav", { className: "flex flex-col items-center gap-8", children: navItems?.map((item, index) => /* @__PURE__ */ jsxs(
           Pressable,

package/dist/registry.cjs

@@ -57108,7 +57108,8 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
-  closeContainerClassName = "",
+  closeContainerClassName,
+  closeIconClassName,
   title = "Mobile Navigation"
 }) => {
   React52__namespace.useEffect(() => {
@@ -57137,8 +57138,8 @@ var NavbarMobileMenu = ({
           "div",
           {
             className: cn(
-              closeContainerClassName,
-              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
+              closeContainerClassName
             ),
             children: /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
@@ -57147,7 +57148,7 @@ var NavbarMobileMenu = ({
                 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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
                 ]
               }
@@ -60602,7 +60603,7 @@ var NavbarAnimatedPreview = ({
           "div",
           {
             className: cn(
-              "relative z-999 grid w-full grid-cols-2 items-center justify-between gap-8 xl:grid-cols-3"
+              "relative z-999 flex w-full items-center justify-between gap-4"
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -60877,7 +60878,7 @@ var FeaturedLink = ({ link, optixFlowConfig }) => {
     Pressable,
     {
       href: getLinkUrl(link),
-      className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-4 pt-12 pb-4",
+      className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-4 pt-24 pb-4",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex w-full items-center gap-6", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-12 shrink-0 rounded-lg border bg-background shadow-lg", children: link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -60992,10 +60993,10 @@ var renderMobileMenuItem4 = (item, index) => {
         className: "border-b-0",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-10 items-center text-base font-normal text-foreground hover:no-underline", children: item.label }),
-          /* @__PURE__ */ jsxRuntime.jsxs(AccordionContent, { className: "flex flex-col gap-6 p-2", children: [
-            item.featuredLinks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 p-2", children: item.featuredLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
-            item.links && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 p-2", children: item.links.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
-            item.groupLinks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 p-2", children: item.groupLinks.map((group, groupIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(AccordionContent, { className: "flex flex-col py-6 px-4", children: [
+            item.featuredLinks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: item.featuredLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
+            item.links && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: item.links.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
+            item.groupLinks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: item.groupLinks.map((group, groupIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
               group.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xs text-muted-foreground", children: group.label }),
               /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-2", children: group.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }) }, `group-link-${groupIdx}-${linkIdx}`)) })
             ] }, `group-link-${groupIdx}`)) })
@@ -61953,6 +61954,7 @@ var MobileNavigationMenu7 = ({
       className: cn("bg-black/95", mobileMenuClassName),
       contentClassName: "flex flex-col items-center justify-center",
       closeContainerClassName: "bg-black/95",
+      closeIconClassName: "text-white",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex flex-col items-center gap-8", children: navItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
           Pressable,
@@ -62455,11 +62457,7 @@ var NavbarStickyCompact = ({
                 {
                   logo,
                   logoSlot,
-                  logoClassName: cn(
-                    isScrolled ? "[&_img]:h-6 [&_span]:text-base" : "[&_img]:h-8 [&_span]:text-lg",
-                    "[&_img]:transition-all [&_img]:duration-300 [&_span]:transition-all [&_span]:duration-300",
-                    logoClassName
-                  ),
+                  logoClassName,
                   optixFlowConfig
                 }
               ),
@@ -62483,13 +62481,7 @@ var NavbarStickyCompact = ({
                   className: "lg:hidden transition-all duration-300",
                   onClick: () => setIsOpen(!isOpen),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/menu",
-                        size: isScrolled ? 18 : 20
-                      }
-                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: isScrolled ? 18 : 20 }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle menu" })
                   ]
                 }
@@ -62622,6 +62614,11 @@ var NavbarSearchFocused = ({
   optixFlowConfig
 }) => {
   const [isOpen, setIsOpen] = React52.useState(false);
+  const [searchQuery, setSearchQuery] = React52.useState("");
+  const handleSearchSubmit = (e) => {
+    e.preventDefault();
+    onSearch?.(searchQuery);
+  };
   const renderNavigation = (items) => {
     if (navigationSlot) return navigationSlot;
     if (!items || items.length === 0) return null;
@@ -62667,7 +62664,7 @@ var NavbarSearchFocused = ({
       );
     });
   }, [authActionsSlot, authActions]);
-  const renderMobileMenuActions = React52.useMemo(() => {
+  React52.useMemo(() => {
     if (mobileMenuActionsSlot) return mobileMenuActionsSlot;
     if (!mobileMenuActions || mobileMenuActions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: mobileMenuActions.map((action, index) => {
@@ -62696,100 +62693,157 @@ var NavbarSearchFocused = ({
     sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
-  return /* @__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(
-        "nav",
-        {
-          className: cn(
-            "flex items-center gap-4 py-3 lg:gap-8",
-            navClassName
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              NavbarLogo,
-              {
-                logo,
-                logoSlot,
-                logoClassName,
-                optixFlowConfig
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              NavigationMenu,
-              {
-                className: cn("hidden lg:flex", navigationMenuClassName),
-                children: renderNavigation(navItems?.slice(0, 2) ?? [])
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              NavigationMenu,
-              {
-                className: cn("hidden lg:flex", navigationMenuClassName),
-                children: renderNavigation(navItems?.slice(2) ?? [])
-              }
+  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(
+          "nav",
+          {
+            className: cn(
+              "flex items-center justify-between gap-4 py-3 lg:gap-6",
+              navClassName
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "hidden shrink-0 items-center gap-2 lg:flex",
-                  actionsClassName
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                NavbarLogo,
+                {
+                  logo,
+                  logoSlot,
+                  logoClassName,
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                NavigationMenu,
+                {
+                  className: cn("hidden lg:flex", navigationMenuClassName),
+                  children: renderNavigation(navItems ?? [])
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden flex-1 max-w-md lg:block", children: searchSlot ?? /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSearchSubmit, className: "relative", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DynamicIcon,
+                  {
+                    name: "lucide/search",
+                    size: 16,
+                    className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+                  }
                 ),
-                children: renderAuthActions
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              Pressable,
-              {
-                variant: "ghost",
-                size: "icon",
-                asButton: true,
-                className: "lg:hidden",
-                onClick: () => setIsOpen(!isOpen),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 20 }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle menu" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              NavbarMobileMenu,
-              {
-                open: isOpen,
-                onClose: () => setIsOpen(false),
-                title: "Navigation Menu",
-                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-screen-sm mx-auto", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: navItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-                    Pressable,
-                    {
-                      href: item.url,
-                      className: "flex items-center gap-2 rounded-md py-2 text-base font-medium",
-                      onClick: () => setIsOpen(false),
-                      children: [
-                        item.icon ?? (item.iconName && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 })),
-                        item.title
-                      ]
-                    },
-                    index
-                  )) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t pt-4 mt-6", children: renderMobileMenuActions })
-                ] })
-              }
-            )
-          ]
-        }
-      ) }) }) })
-    }
-  );
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Input,
+                  {
+                    type: "search",
+                    placeholder: typeof searchPlaceholder === "string" ? searchPlaceholder : "Search...",
+                    value: searchQuery,
+                    onChange: (e) => setSearchQuery(e.target.value),
+                    className: "pl-9 pr-4"
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "hidden shrink-0 items-center gap-2 lg:flex",
+                    actionsClassName
+                  ),
+                  children: renderAuthActions
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Pressable,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  asButton: true,
+                  className: "lg:hidden",
+                  onClick: () => setIsOpen(!isOpen),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 20 }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle menu" })
+                  ]
+                }
+              )
+            ]
+          }
+        ) }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MobileNavigationMenu10,
+      {
+        open: isOpen,
+        setOpen: setIsOpen,
+        navItems: navItems ?? [],
+        navigationSlot,
+        mobileMenuActions: mobileMenuActions ?? authActions,
+        mobileMenuActionsSlot: mobileMenuActionsSlot ?? authActionsSlot
+      }
+    )
+  ] });
+};
+var MobileNavigationMenu10 = ({
+  open,
+  setOpen,
+  navItems,
+  navigationSlot,
+  mobileMenuActions,
+  mobileMenuActionsSlot
+}) => {
+  const handleClose = () => setOpen(false);
+  const renderMobileActions = React52.useMemo(() => {
+    if (mobileMenuActionsSlot) return mobileMenuActionsSlot;
+    if (!mobileMenuActions || mobileMenuActions.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 flex flex-col gap-4", children: mobileMenuActions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: cn("w-full", actionClassName),
+          onClick: handleClose,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    }) });
+  }, [mobileMenuActionsSlot, mobileMenuActions]);
+  return /* @__PURE__ */ jsxRuntime.jsx(NavbarMobileMenu, { open, onClose: handleClose, title: "Navigation Menu", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
+    navigationSlot ?? /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex flex-col", children: navItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Pressable,
+      {
+        href: item.url,
+        className: "flex h-15 items-center gap-2 rounded-md 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.icon ?? (item.iconName && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 })),
+          item.title
+        ]
+      },
+      `nav-link-${index}`
+    )) }),
+    renderMobileActions
+  ] }) }) });
 };
 var MOBILE_BREAKPOINT7 = 1024;
 var NavbarSimpleLinks = ({
@@ -62992,7 +63046,7 @@ var NavbarSimpleLinks = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      MobileNavigationMenu10,
+      MobileNavigationMenu11,
       {
         open: isOpen,
         onClose: handleMobileMenuClose,
@@ -63004,7 +63058,7 @@ var NavbarSimpleLinks = ({
     )
   ] });
 };
-var MobileNavigationMenu10 = ({
+var MobileNavigationMenu11 = ({
   open,
   onClose,
   navItems,