fixing menu bar

Author: alexsb

src/css/custom.css

@@ -48,6 +48,12 @@ html[data-theme='dark'] .light-theme-display-component {
   }
 }
 
+@media only screen and (min-width: 997px) and (max-width: 1250px) {
+  :root {
+    --ifm-navbar-sidebar-width: 320px;
+  }
+}
+
 @media only screen and (max-width: 1250px) {
   .navbar > .container,
   .navbar > .container-fluid {
@@ -63,15 +69,15 @@ html[data-theme='dark'] .light-theme-display-component {
     margin-left: auto;
   }
 
-  .navbar__items--right .navbar__item {
+  .navbar__inner .navbar__items--right .navbar__item {
     display: none !important;
   }
 
-  .navbar__items--right > button {
+  .navbar__inner .navbar__items--right > button {
     display: none !important;
   }
 
-  .navbar__items:not(.navbar__items--right) .navbar__item {
+  .navbar__inner .navbar__items:not(.navbar__items--right) .navbar__item {
     display: none !important;
   }
 }

src/theme/Navbar/MobileSidebar/index.js

@@ -0,0 +1,33 @@
+/**
+ * Swizzled version of @docusaurus/theme-classic Navbar/MobileSidebar
+ *
+ * Change: also render the sidebar when `shown=true`, even above the default
+ * 996px mobile breakpoint. This fixes the "gray screen only" bug when the
+ * hamburger toggle is shown via CSS at intermediate widths (996–1250px).
+ */
+import React from 'react';
+import {
+  useLockBodyScroll,
+  useNavbarMobileSidebar,
+} from '@docusaurus/theme-common/internal';
+import NavbarMobileSidebarLayout from '@theme/Navbar/MobileSidebar/Layout';
+import NavbarMobileSidebarHeader from '@theme/Navbar/MobileSidebar/Header';
+import NavbarMobileSidebarPrimaryMenu from '@theme/Navbar/MobileSidebar/PrimaryMenu';
+import NavbarMobileSidebarSecondaryMenu from '@theme/Navbar/MobileSidebar/SecondaryMenu';
+
+export default function NavbarMobileSidebar() {
+  const mobileSidebar = useNavbarMobileSidebar();
+  useLockBodyScroll(mobileSidebar.shown);
+  // Render when Docusaurus considers it mobile OR when the user has explicitly
+  // opened the sidebar (e.g. via a hamburger shown at custom wider breakpoints).
+  if (!mobileSidebar.shouldRender && !mobileSidebar.shown) {
+    return null;
+  }
+  return (
+    <NavbarMobileSidebarLayout
+      header={<NavbarMobileSidebarHeader />}
+      primaryMenu={<NavbarMobileSidebarPrimaryMenu />}
+      secondaryMenu={<NavbarMobileSidebarSecondaryMenu />}
+    />
+  );
+}