fix(theme): mobile drawer sidebar should use native modal dialog and backdrop

packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ComponentProps, type ReactNode} from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {ThemeClassNames, useThemeConfig} from '@docusaurus/theme-common';
 import {
@@ -18,16 +18,6 @@ import type {Props} from '@theme/Navbar/Layout';
 
 import styles from './styles.module.css';
 
-function NavbarBackdrop(props: ComponentProps<'div'>) {
-  return (
-    <div
-      role="presentation"
-      {...props}
-      className={clsx('navbar-sidebar__backdrop', props.className)}
-    />
-  );
-}
-
 export default function NavbarLayout({children}: Props): ReactNode {
   const {
     navbar: {hideOnScroll, style},
@@ -57,7 +47,6 @@ export default function NavbarLayout({children}: Props): ReactNode {
         },
       )}>
       {children}
-      <NavbarBackdrop onClick={mobileSidebar.toggle} />
       <NavbarMobileSidebar />
     </nav>
   );

packages/docusaurus-theme-classic/src/theme/Navbar/Layout/styles.module.css

@@ -5,10 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.navbarHideable {
-  transition: transform var(--ifm-transition-fast) ease;
+.navbar-sidebar {
+  inset: 0;
+  margin: 0;
+  padding: 0;
+  bottom: 0;
+  border: 0;
+  height: 100%;
+  max-height: 100%;
 }
 
-.navbarHidden {
-  transform: translate3d(0, calc(-100% - 2px), 0);
+.navbar-sidebar::backdrop {
+  background-color: #0009;
 }

packages/docusaurus-theme-classic/src/theme/Navbar/MobileSidebar/Layout/index.tsx

@@ -5,9 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {version, type ReactNode} from 'react';
+import React, {useEffect, useRef, version, type ReactNode} from 'react';
 import clsx from 'clsx';
-import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
+import {
+  useNavbarMobileSidebar,
+  useNavbarSecondaryMenu,
+} from '@docusaurus/theme-common/internal';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import type {Props} from '@theme/Navbar/MobileSidebar/Layout';
 
@@ -47,12 +50,47 @@ export default function NavbarMobileSidebarLayout({
   secondaryMenu,
 }: Props): ReactNode {
   const {shown: secondaryMenuShown} = useNavbarSecondaryMenu();
+  const navbarModalDialog = useRef<HTMLDialogElement | null>(null);
+  const {shown, toggle} = useNavbarMobileSidebar();
+
+  useEffect(() => {
+    const {current: dialogEl} = navbarModalDialog;
+
+    if (!dialogEl) {
+      return;
+    }
+    if (shown) {
+      dialogEl.showModal();
+    } else {
+      dialogEl.close();
+    }
+  });
+
+  useEffect(() => {
+    const {current: dialogEl} = navbarModalDialog;
+
+    function toggleOnEscape(e: {key: string}) {
+      if (e.key === 'Escape') {
+        if (shown) {
+          toggle();
+        }
+      }
+    }
+
+    dialogEl?.addEventListener('keydown', toggleOnEscape);
+
+    return () => {
+      dialogEl?.removeEventListener('keydown', toggleOnEscape);
+    };
+  }, [shown, toggle]);
+
   return (
-    <div
+    <dialog
       className={clsx(
         ThemeClassNames.layout.navbar.mobileSidebar.container,
         'navbar-sidebar',
-      )}>
+      )}
+      ref={navbarModalDialog}>
       {header}
       <div
         className={clsx('navbar-sidebar__items', {
@@ -65,6 +103,6 @@ export default function NavbarMobileSidebarLayout({
           {secondaryMenu}
         </NavbarMobileSidebarPanel>
       </div>
-    </div>
+    </dialog>
   );
 }