@opensite/ui 1.0.7 → 1.0.9

package/dist/navbar-sidebar-mobile.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useState } 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';
@@ -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,
@@ -1284,7 +1284,29 @@ var NavbarSidebarMobile = ({
   optixFlowConfig
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const renderAuthActions = () => {
+  const MOBILE_BREAKPOINT = 1024;
+  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);
+  }, []);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    document.body.style.overflow = isOpen ? "hidden" : "auto";
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [isOpen]);
+  const handleMobileMenu = () => {
+    setIsOpen(!isOpen);
+  };
+  const renderAuthActions = useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
     return authActions.map((action, index) => {
@@ -1311,17 +1333,12 @@ var NavbarSidebarMobile = ({
         index
       );
     });
-  };
+  }, [authActionsSlot, authActions]);
   const renderMenu = () => {
     if (menuSlot) return null;
     if (!menu || menu.length === 0) return null;
     return menu;
   };
-  const renderMobileExtraLinks = () => {
-    if (mobileExtraLinksSlot) return null;
-    if (!mobileExtraLinks || mobileExtraLinks.length === 0) return null;
-    return mobileExtraLinks;
-  };
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -1331,171 +1348,223 @@ var NavbarSidebarMobile = ({
     sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
-  return /* @__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(
-            "flex items-center justify-between py-4",
-            navClassName
-          ),
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
-              /* @__PURE__ */ jsx(
-                NavbarLogo,
-                {
-                  logo,
-                  logoSlot,
-                  logoClassName,
-                  optixFlowConfig
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                NavigationMenu,
-                {
-                  className: cn("hidden lg:flex", navigationMenuClassName),
-                  children: /* @__PURE__ */ jsx(NavigationMenuList, { children: menuSlot ? menuSlot : renderMenu()?.map(
-                    (item, index) => item.items ? /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
-                      /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: item.title }),
-                      /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx("ul", { className: "grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2", children: item.items.map((subItem, subIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
-                        Pressable,
-                        {
-                          href: subItem.url,
-                          className: "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-                          children: [
-                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                              subItem.icon && /* @__PURE__ */ jsx(
-                                DynamicIcon,
-                                {
-                                  name: subItem.icon,
-                                  size: 16
-                                }
-                              ),
-                              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium leading-none", children: subItem.title })
-                            ] }),
-                            subItem.description && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm leading-snug text-muted-foreground", children: subItem.description })
-                          ]
-                        }
-                      ) }) }, subIndex)) }) })
-                    ] }, index) : /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-                      NavigationMenuLink,
-                      {
-                        asChild: true,
-                        className: navigationMenuTriggerStyle(),
-                        children: /* @__PURE__ */ jsx(Pressable, { href: item.url, children: item.title })
-                      }
-                    ) }, index)
-                  ) })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "hidden items-center gap-2 lg:flex",
-                  actionsClassName
-                ),
-                children: renderAuthActions()
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              Pressable,
-              {
-                variant: "outline",
-                size: "icon",
-                asButton: true,
-                className: "lg:hidden",
-                onClick: () => setIsOpen(!isOpen),
-                children: [
-                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 20 }),
-                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle menu" })
-                ]
-              }
+  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(
+              "flex items-center justify-between py-4",
+              navClassName
             ),
-            /* @__PURE__ */ jsx(
-              NavbarMobileMenu,
-              {
-                open: isOpen,
-                onClose: () => setIsOpen(false),
-                title: "Navigation Menu",
-                children: /* @__PURE__ */ jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b pb-4", children: /* @__PURE__ */ jsx(
-                    NavbarLogo,
-                    {
-                      logo,
-                      logoSlot,
-                      logoClassName,
-                      optixFlowConfig
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto py-4", children: /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuSlot ? menuSlot : renderMenu()?.map(
-                    (item, index) => item.items ? /* @__PURE__ */ jsxs(
-                      AccordionItem,
-                      {
-                        value: `item-${index}`,
-                        children: [
-                          /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-base hover:no-underline", children: item.title }),
-                          /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-2 pl-4", children: item.items.map((subItem, subIndex) => /* @__PURE__ */ jsxs(
-                            Pressable,
-                            {
-                              href: subItem.url,
-                              className: "flex items-center gap-2 rounded-md py-2 text-sm text-muted-foreground hover:text-foreground",
-                              onClick: () => setIsOpen(false),
-                              children: [
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
+                /* @__PURE__ */ jsx(
+                  NavbarLogo,
+                  {
+                    logo,
+                    logoSlot,
+                    logoClassName,
+                    optixFlowConfig
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  NavigationMenu,
+                  {
+                    className: cn("hidden lg:flex", navigationMenuClassName),
+                    children: /* @__PURE__ */ jsx(NavigationMenuList, { children: menuSlot ? menuSlot : renderMenu()?.map(
+                      (item, index) => item.items ? /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
+                        /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: item.title }),
+                        /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx("ul", { className: "grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2", children: item.items.map((subItem, subIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
+                          Pressable,
+                          {
+                            href: subItem.url,
+                            className: "block w-full select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-muted focus:bg-muted",
+                            children: [
+                              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                                 subItem.icon && /* @__PURE__ */ jsx(
                                   DynamicIcon,
                                   {
                                     name: subItem.icon,
-                                    size: 14
+                                    size: 16
                                   }
                                 ),
-                                subItem.title
-                              ]
-                            },
-                            subIndex
-                          )) }) })
-                        ]
-                      },
-                      index
-                    ) : /* @__PURE__ */ jsx("div", { className: "border-b py-4", children: /* @__PURE__ */ jsx(
-                      Pressable,
-                      {
-                        href: item.url,
-                        className: "text-base font-medium",
-                        onClick: () => setIsOpen(false),
-                        children: item.title
-                      }
-                    ) }, index)
-                  ) }) }),
-                  /* @__PURE__ */ jsxs("div", { className: "border-t pt-4", children: [
-                    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: renderAuthActions() }),
-                    /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-x-4 gap-y-2", children: mobileExtraLinksSlot ? mobileExtraLinksSlot : renderMobileExtraLinks()?.map((link, index) => /* @__PURE__ */ jsx(
-                      Pressable,
-                      {
-                        href: link.url,
-                        className: "text-xs text-muted-foreground hover:text-foreground",
-                        onClick: () => setIsOpen(false),
-                        children: link.title
-                      },
-                      index
-                    )) })
-                  ] })
-                ] }) })
-              }
-            )
-          ]
-        }
-      ) }) }) })
+                                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium leading-none", children: subItem.title })
+                              ] }),
+                              subItem.description && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm leading-snug text-muted-foreground", children: subItem.description })
+                            ]
+                          }
+                        ) }) }, subIndex)) }) })
+                      ] }, index) : /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
+                        NavigationMenuLink,
+                        {
+                          asChild: true,
+                          className: navigationMenuTriggerStyle(),
+                          children: /* @__PURE__ */ jsx(Pressable, { href: item.url, children: item.title })
+                        }
+                      ) }, index)
+                    ) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "hidden items-center gap-2 lg:flex",
+                    actionsClassName
+                  ),
+                  children: renderAuthActions
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  className: "size-11",
+                  variant: "ghost",
+                  size: "icon",
+                  asButton: true,
+                  onClick: handleMobileMenu,
+                  children: /* @__PURE__ */ jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/menu",
+                      size: 22,
+                      className: "stroke-foreground"
+                    }
+                  )
+                }
+              ) })
+            ]
+          }
+        ) }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MobileNavigationMenu,
+      {
+        open: isOpen,
+        setOpen: setIsOpen,
+        menu: menu ?? [],
+        menuSlot,
+        authActions,
+        authActionsSlot,
+        mobileExtraLinks,
+        mobileExtraLinksSlot
+      }
+    )
+  ] });
+};
+var MobileNavigationMenu = ({
+  open,
+  setOpen,
+  menu,
+  menuSlot,
+  authActions,
+  authActionsSlot,
+  mobileExtraLinks,
+  mobileExtraLinksSlot
+}) => {
+  const renderMobileAuthActions = useMemo(() => {
+    if (authActionsSlot) return authActionsSlot;
+    if (!authActions || authActions.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: authActions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: cn("w-full", actionClassName),
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    }) });
+  }, [authActionsSlot, authActions]);
+  const renderMobileExtraLinks = useMemo(() => {
+    if (mobileExtraLinksSlot) return mobileExtraLinksSlot;
+    if (!mobileExtraLinks || mobileExtraLinks.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-x-4 gap-y-2", children: mobileExtraLinks.map((link, index) => /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        href: link.url,
+        className: "text-xs text-muted-foreground hover:text-foreground",
+        children: link.title
+      },
+      index
+    )) });
+  }, [mobileExtraLinksSlot, mobileExtraLinks]);
+  return /* @__PURE__ */ jsx(
+    NavbarMobileMenu,
+    {
+      open,
+      onClose: () => setOpen(false),
+      title: "Navigation Menu",
+      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: "single", collapsible: true, className: "w-full", children: menuSlot ? menuSlot : menu.map(
+          (item, index) => item.items ? /* @__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.items.map((subItem, subIndex) => /* @__PURE__ */ jsxs(
+                  Pressable,
+                  {
+                    href: subItem.url,
+                    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: [
+                      subItem.icon && /* @__PURE__ */ jsx(
+                        DynamicIcon,
+                        {
+                          name: subItem.icon,
+                          size: 16,
+                          className: "stroke-muted-foreground"
+                        }
+                      ),
+                      subItem.title
+                    ]
+                  },
+                  `mobile-link-${index}-${subIndex}`
+                )) })
+              ]
+            },
+            `nav-item-${index}`
+          ) : /* @__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 nth-last-1:border-0",
+              children: item.title
+            },
+            `nav-link-${index}`
+          )
+        ) }),
+        renderMobileAuthActions,
+        renderMobileExtraLinks
+      ] }) })
     }
   );
 };