fix(navbar): remove NavbarMenu when closed (#4506)

* fix(navbar): remove NavbarMenu when closed * chore(changeset): fixed NavbarMenu console prop error
heroui-inc · Jan 18, 2025 · 61ad020 · 61ad020
1 parent f7e5d20
commit 61ad020
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 20 deletions.
diff --git a/.changeset/nice-beds-battle.md b/.changeset/nice-beds-battle.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/navbar": patch
+---
+
+fixed NavbarMenu React.Fragment prop error when animation is disabled (#4501)
diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx
@@ -32,25 +32,28 @@ const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
 
   const styles = clsx(classNames?.menu, className);
 
-  // only apply overlay when menu is open
-  const OverlayComponent = isMenuOpen ? Overlay : React.Fragment;
+  if (disableAnimation) {
+    if (!isMenuOpen) return null;
 
-  const contents = disableAnimation ? (
-    <OverlayComponent portalContainer={portalContainer}>
-      <ul
-        ref={domRef}
-        className={slots.menu?.({class: styles})}
-        data-open={dataAttr(isMenuOpen)}
-        style={{
-          // @ts-expect-error
-          "--navbar-height": typeof height === "number" ? `${height}px` : height,
-        }}
-        {...otherProps}
-      >
-        {children}
-      </ul>
-    </OverlayComponent>
-  ) : (
+    return (
+      <Overlay portalContainer={portalContainer}>
+        <ul
+          ref={domRef}
+          className={slots.menu?.({class: styles})}
+          data-open={dataAttr(isMenuOpen)}
+          style={{
+            // @ts-expect-error
+            "--navbar-height": typeof height === "number" ? `${height}px` : height,
+          }}
+          {...otherProps}
+        >
+          {children}
+        </ul>
+      </Overlay>
+    );
+  }
+
+  return (
     <AnimatePresence mode="wait">
       {isMenuOpen ? (
         <Overlay portalContainer={portalContainer}>
@@ -78,8 +81,6 @@ const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
       ) : null}
     </AnimatePresence>
   );
-
-  return contents;
 });
 
 NavbarMenu.displayName = "HeroUI.NavbarMenu";