fix(navbar): allow height prop to accept number type and fix broken m…

…enu (#3601) * fix(navbar): allow height prop to accept number type and fix broken menu * fix(navbar): menu breaking when a numerical height value is provided. changeset
nextui-org · Aug 29, 2024 · 048de6e · 048de6e
1 parent 3c0a486
commit 048de6e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/healthy-clouds-refuse.md b/.changeset/healthy-clouds-refuse.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/navbar": patch
+---
+
+Fix navbar menu breaking when a numerical height value is provided. The height value is now converted to pixels if it is a number.
diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx
@@ -50,7 +50,7 @@ const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
         data-open={dataAttr(isMenuOpen)}
         style={{
           // @ts-expect-error
-          "--navbar-height": height,
+          "--navbar-height": typeof height === "number" ? `${height}px` : height,
         }}
         {...otherProps}
       >
@@ -72,7 +72,7 @@ const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
               initial="exit"
               style={{
                 // @ts-expect-error
-                "--navbar-height": height,
+                "--navbar-height": typeof height === "number" ? `${height}px` : height,
                 ...style,
               }}
               variants={menuVariants}

diff --git a/packages/components/navbar/src/use-navbar.ts b/packages/components/navbar/src/use-navbar.ts
@@ -198,7 +198,7 @@ export function useNavbar(originalProps: UseNavbarProps) {
     ref: domRef,
     className: slots.base({class: clsx(baseStyles, props?.className)}),
     style: {
-      "--navbar-height": height,
+      "--navbar-height": typeof height === "number" ? `${height}px` : height,
       ...otherProps?.style,
       ...props?.style,
     },