archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(navbar): hide overlay when menu is closed (#4490)

Browse Source
This commit is contained in:
Peterl561 2025-01-04 10:16:46 +08:00 committed by GitHub
parent ef916ead52
commit a43b156801
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 46 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/honest-waves-camp.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/navbar": patch
---
fixed NavbarMenu applying Overlay while closed

74
packages/components/navbar/src/navbar-menu.tsx
View File

@ -4,6 +4,7 @@ import {clsx, dataAttr} from "@nextui-org/shared-utils";
import {AnimatePresence, HTMLMotionProps, LazyMotion, m} from "framer-motion";
import {mergeProps} from "@react-aria/utils";
import {Overlay} from "@react-aria/overlays";
import React from "react";
import {menuVariants} from "./navbar-menu-transitions";
import {useNavbarContext} from "./navbar-context";
@ -31,47 +32,54 @@ 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;
const contents = disableAnimation ? (
<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 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>
) : (
<AnimatePresence mode="wait">
{isMenuOpen ? (
<LazyMotion features={domAnimation}>
<m.ul
ref={domRef}
layoutScroll
animate="enter"
className={slots.menu?.({class: styles})}
data-open={dataAttr(isMenuOpen)}
exit="exit"
initial="exit"
style={{
// @ts-expect-error
"--navbar-height": typeof height === "number" ? `${height}px` : height,
...style,
}}
variants={menuVariants}
{...mergeProps(motionProps, otherProps)}
>
{children}
</m.ul>
</LazyMotion>
<Overlay portalContainer={portalContainer}>
<LazyMotion features={domAnimation}>
<m.ul
ref={domRef}
layoutScroll
animate="enter"
className={slots.menu?.({class: styles})}
data-open={dataAttr(isMenuOpen)}
exit="exit"
initial="exit"
style={{
// @ts-expect-error
"--navbar-height": typeof height === "number" ? `${height}px` : height,
...style,
}}
variants={menuVariants}
{...mergeProps(motionProps, otherProps)}
>
{children}
</m.ul>
</LazyMotion>
</Overlay>
) : null}
</AnimatePresence>
);
return <Overlay portalContainer={portalContainer}>{contents}</Overlay>;
return contents;
});
NavbarMenu.displayName = "NextUI.NavbarMenu";