@moontra/moonui-pro 3.4.22 → 3.4.24

package/dist/index.d.ts

@@ -4045,6 +4045,8 @@ interface NavbarConfig {
     enableNProgress?: boolean;
     /** Position progress bar inside border-radius (default: true for professional look) */
     progressBarInset?: boolean;
+    /** Automatically push content down when navbar is sticky (default: true when sticky && !overlayMode) */
+    pushContent?: boolean;
 }
 interface NavbarProps extends NavbarConfig {
     className?: string;

package/dist/index.mjs

@@ -79131,6 +79131,7 @@ function NavbarInternal({
   containerMaxWidth = "5xl",
   enableNProgress = true,
   progressBarInset = true,
+  pushContent,
   className,
   activePath,
   onNavigate
@@ -79143,6 +79144,7 @@ function NavbarInternal({
   const [currentTheme, setCurrentTheme] = useState(theme);
   const [isDarkMode, setIsDarkMode] = useState(false);
   const navRef = useRef(null);
+  const shouldPushContent = pushContent ?? (sticky && !overlayMode);
   const { scrolled, hidden, scrollProgress, isMinimal } = useNavbarScroll({
     sticky,
     hideOnScroll,
@@ -79321,70 +79323,73 @@ function NavbarInternal({
   }) });
   const MobileMenu = () => /* @__PURE__ */ jsxs(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
     /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "icon", className: "lg:hidden", children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" }) }) }),
-    /* @__PURE__ */ jsx(SheetContent, { side: mobileMenuPosition, className: "w-80 p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center p-4 border-b", children: branding && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        getActiveLogo(),
-        branding.title && /* @__PURE__ */ jsx("span", { className: "font-semibold text-lg", children: branding.title })
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: !hideNavItems && sections.map((section) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        section.items.map((item) => /* @__PURE__ */ jsx("div", { children: item.items && item.items.length > 0 ? /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
-          /* @__PURE__ */ jsx(
-            MoonUIDropdownMenuTriggerPro,
-            {
-              asChild: true,
-              children: /* @__PURE__ */ jsxs(
-                MoonUIButtonPro,
-                {
-                  variant: "ghost",
-                  className: "w-full justify-between",
-                  disabled: item.disabled,
-                  children: [
-                    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                      item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
-                      item.title
-                    ] }),
-                    /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
-                  ]
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            MoonUIDropdownMenuContentPro,
+    /* @__PURE__ */ jsxs(SheetContent, { side: mobileMenuPosition, className: "w-80 p-0", children: [
+      /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center p-4 border-b", children: branding && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          getActiveLogo(),
+          branding.title && /* @__PURE__ */ jsx("span", { className: "font-semibold text-lg", children: branding.title })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: !hideNavItems && sections.map((section) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          section.items.map((item) => /* @__PURE__ */ jsx("div", { children: item.items && item.items.length > 0 ? /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+            /* @__PURE__ */ jsx(
+              MoonUIDropdownMenuTriggerPro,
+              {
+                asChild: true,
+                children: /* @__PURE__ */ jsxs(
+                  MoonUIButtonPro,
+                  {
+                    variant: "ghost",
+                    className: "w-full justify-between",
+                    disabled: item.disabled,
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                        item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
+                        item.title
+                      ] }),
+                      /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MoonUIDropdownMenuContentPro,
+              {
+                align: "start",
+                className: "w-56",
+                children: item.items && renderDropdownMenu(
+                  item.items
+                )
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(
+            MoonUIButtonPro,
             {
-              align: "start",
-              className: "w-56",
-              children: item.items && renderDropdownMenu(
-                item.items
-              )
+              variant: "ghost",
+              className: "w-full justify-start",
+              disabled: item.disabled,
+              onClick: () => handleItemClick(item),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                  item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
+                  item.title
+                ] }),
+                item.badge && /* @__PURE__ */ jsx(
+                  MoonUIBadgePro,
+                  {
+                    variant: item.badgeVariant || "secondary",
+                    className: "ml-auto",
+                    children: item.badge
+                  }
+                )
+              ]
             }
-          )
-        ] }) : /* @__PURE__ */ jsxs(
-          MoonUIButtonPro,
-          {
-            variant: "ghost",
-            className: "w-full justify-start",
-            disabled: item.disabled,
-            onClick: () => handleItemClick(item),
-            children: [
-              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
-                item.title
-              ] }),
-              item.badge && /* @__PURE__ */ jsx(
-                MoonUIBadgePro,
-                {
-                  variant: item.badgeVariant || "secondary",
-                  className: "ml-auto",
-                  children: item.badge
-                }
-              )
-            ]
-          }
-        ) }, item.id)),
-        /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "my-2" })
-      ] }, section.id)) })
-    ] }) })
+          ) }, item.id)),
+          /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "my-2" })
+        ] }, section.id)) })
+      ] })
+    ] })
   ] });
   const getHeight = (scrolled2 = false) => {
     switch (size4) {
@@ -79400,6 +79405,21 @@ function NavbarInternal({
         return scrolled2 ? "h-14" : "h-16";
     }
   };
+  const getNavbarHeight = () => {
+    const heightMap = {
+      sm: "h-14",
+      // 56px
+      md: "h-16",
+      // 64px
+      lg: "h-20",
+      // 80px
+      xl: "h-24",
+      // 96px
+      "2xl": "h-28"
+      // 112px
+    };
+    return heightMap[size4] || heightMap.md;
+  };
   const getSizeClasses = () => {
     switch (size4) {
       case "sm":
@@ -80911,7 +80931,8 @@ function NavbarInternal({
           ] })
         ]
       }
-    )
+    ),
+    shouldPushContent && !overlayMode && /* @__PURE__ */ jsx("div", { className: cn(getNavbarHeight()), "aria-hidden": "true" })
   ] });
 }
 function Navbar(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moontra/moonui-pro",
-    "version": "3.4.22",
+    "version": "3.4.24",
     "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
     "type": "module",
     "main": "dist/index.mjs",