update mobile sidebar close icon.

src/components/Button/Button.tsx

@@ -10,5 +10,10 @@ export const Button = (
   props: TProps & HTMLProps<HTMLButtonElement>,
 ): JSX.Element => {
   const { children, className, ...rest } = props
-  return <button className={clsx('button', className)}>{children}</button>
+
+  return (
+    <button className={clsx('button', className)} {...(rest as any)}>
+      {children}
+    </button>
+  )
 }

src/theme/Navbar/Content/styles.module.scss

@@ -207,13 +207,17 @@ Hide color mode toggle in small viewports
   .sidebarButton.desktop {
     display: none;
   }
+
+  .root > div:first-child,
+  .headerMiddle {
+    transition: 1s;
+  }
 }
 
 .root {
   & > div:first-child,
   .headerMiddle {
     opacity: 1;
-    transition: 1s;
     visibility: visible;
   }
 }

src/theme/Navbar/MobileSidebar/Header/index.tsx

@@ -0,0 +1,32 @@
+import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'
+import { IconArrowLeftCircle } from '@site/src/components/Icon'
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle'
+import NavbarLogo from '@theme/Navbar/Logo'
+import React from 'react'
+
+function CloseButton() {
+  const mobileSidebar = useNavbarMobileSidebar()
+  return (
+    <button
+      type="button"
+      className="clean-btn navbar-sidebar__close"
+      onClick={() => mobileSidebar.toggle()}
+    >
+      <IconArrowLeftCircle />
+    </button>
+  )
+}
+
+export default function NavbarMobileSidebarHeader(): JSX.Element {
+  return (
+    <div className="navbar-sidebar__brand">
+      <div
+        style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
+      >
+        <CloseButton />
+        <NavbarLogo />
+      </div>
+      <NavbarColorModeToggle className="margin-right--md" />
+    </div>
+  )
+}

src/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx

@@ -0,0 +1,40 @@
+import React, { type ComponentProps } from 'react'
+import { useThemeConfig } from '@docusaurus/theme-common'
+import { useNavbarSecondaryMenu } from '@docusaurus/theme-common/internal'
+import Translate from '@docusaurus/Translate'
+import { ButtonWithIcon } from '@site/src/components/Button/ButtonWithIcon'
+import { IconArrowLeftCircle } from '@site/src/components/Icon'
+import styles from './styles.module.scss'
+
+function SecondaryMenuBackButton(props: ComponentProps<'button'>) {
+  return (
+    <ButtonWithIcon
+      className={styles.backButton}
+      icon={<IconArrowLeftCircle></IconArrowLeftCircle>}
+      {...props}
+    >
+      <Translate
+        id="theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel"
+        description="The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
+      >
+        Main Menu
+      </Translate>
+    </ButtonWithIcon>
+  )
+}
+
+// The secondary menu slides from the right and shows contextual information
+// such as the docs sidebar
+export default function NavbarMobileSidebarSecondaryMenu(): JSX.Element | null {
+  const isPrimaryMenuEmpty = useThemeConfig().navbar.items.length === 0
+  const secondaryMenu = useNavbarSecondaryMenu()
+  return (
+    <>
+      {/* edge-case: prevent returning to the primaryMenu when it's empty */}
+      {!isPrimaryMenuEmpty && (
+        <SecondaryMenuBackButton onClick={() => secondaryMenu.hide()} />
+      )}
+      {secondaryMenu.content}
+    </>
+  )
+}

src/theme/Navbar/MobileSidebar/SecondaryMenu/styles.module.scss

@@ -0,0 +1,18 @@
+.backButton {
+  & > div {
+    flex-direction: row-reverse;
+
+    color: #373738;
+    font-size: 0.875rem;
+
+    svg {
+      * {
+        stroke: #909091;
+      }
+    }
+  }
+
+  border: 1px solid #eeeef1;
+  padding: 12px 18px;
+  margin-bottom: 8px;
+}

src/theme/Navbar/index.scss

@@ -11,6 +11,7 @@
   --ifm-navbar-padding-vertical: 0.5rem;
 
   background: none;
+  overflow: hidden;
 }
 
 :root {