From e7231166f197470365e87f69d5b03b3990c5df31 Mon Sep 17 00:00:00 2001
From: Hidde de Vries <hidde@hiddedevries.nl>
Date: Thu, 21 Nov 2024 11:23:00 +0100
Subject: [PATCH] fix: only render secondaryMenu if it should be shown

fixes #10704

Issue was that with keyboard, you could reach the primary menu, while it was made invisible by CSS. By not rendering secondaryMenu based on the secondaryMenuShown logic, , we make sure it isn't accessible by keyboard while it is hidden.
---
 .../theme/Navbar/MobileSidebar/Layout/index.tsx   | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

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 b3bbaec8fae0..53fef7922769 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
@@ -19,13 +19,12 @@ export default function NavbarMobileSidebarLayout({
   return (
     <div className="navbar-sidebar">
       {header}
-      <div
-        className={clsx('navbar-sidebar__items', {
-          'navbar-sidebar__items--show-secondary': secondaryMenuShown,
-        })}>
-        <div className="navbar-sidebar__item menu">{primaryMenu}</div>
-        <div className="navbar-sidebar__item menu">{secondaryMenu}</div>
-      </div>
-    </div>
+      <div className={clsx('navbar-sidebar__items')}>
+        {secondaryMenuShown ? (
+          <div className="navbar-sidebar__item menu">{secondaryMenu}</div>
+        ) : (
+          <div className="navbar-sidebar__item menu">{primaryMenu}</div>
+        )}    
+     </div>
   );
 }