diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx index 9d623fcd83..7afe2f823c 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx @@ -5,19 +5,37 @@ * LICENSE file in the root directory of this source tree. */ -import React, {type ReactNode} from 'react'; +import React, {version, type ReactNode} from 'react'; import clsx from 'clsx'; import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal'; import {ThemeClassNames} from '@docusaurus/theme-common'; import type {Props} from '@theme/Navbar/MobileSidebar/Layout'; -function NavbarMobileSidebarPanel({children}: {children: ReactNode}) { +// TODO Docusaurus v4: remove temporary inert workaround +// See https://github.com/facebook/react/issues/17157 +// See https://github.com/radix-ui/themes/pull/509 +function inertProps(inert: boolean) { + const isBeforeReact19 = parseInt(version!.split('.')[0]!, 10) < 19; + if (isBeforeReact19) { + return {inert: inert ? '' : undefined}; + } + return {inert}; +} + +function NavbarMobileSidebarPanel({ + children, + inert, +}: { + children: ReactNode; + inert: boolean; +}) { return (
+ )} + {...inertProps(inert)}> {children}
); @@ -40,8 +58,12 @@ export default function NavbarMobileSidebarLayout({ className={clsx('navbar-sidebar__items', { 'navbar-sidebar__items--show-secondary': secondaryMenuShown, })}> - {primaryMenu} - {secondaryMenu} + + {primaryMenu} + + + {secondaryMenu} + );