Update mobile navbar layout. Add a single-panel mobile menu component

Author: nikoscham

src/css/custom.css

@@ -442,8 +442,10 @@ html[data-theme="dark"] .theme-toggle .icon-moon {
     margin-right: auto;
   }
 
-  .navbar-sidebar__brand .theme-toggle {
-    margin: 0;
+  /* The theme switch lives in the page navbar; the sidebar is docs navigation only */
+  .navbar-sidebar__brand .theme-toggle,
+  .navbar-sidebar__back {
+    display: none;
   }
 }
 

src/theme/Navbar/MobileSidebar/Layout/index.js

@@ -0,0 +1,25 @@
+import React from "react";
+import clsx from "clsx";
+import { useNavbarSecondaryMenu } from "@docusaurus/theme-common/internal";
+import { ThemeClassNames } from "@docusaurus/theme-common";
+
+// Single-panel mobile menu: the version selector (the only main-menu item shown on
+// mobile) above the docs sidebar, instead of the default two sliding panels.
+export default function NavbarMobileSidebarLayout({ header, primaryMenu, secondaryMenu }) {
+  const { content } = useNavbarSecondaryMenu();
+  const hasSidebar = Boolean(content);
+
+  return (
+    <div className={clsx(ThemeClassNames.layout.navbar.mobileSidebar.container, "navbar-sidebar")}>
+      {header}
+      <div className="navbar-sidebar__items">
+        <div
+          className={clsx(ThemeClassNames.layout.navbar.mobileSidebar.panel, "navbar-sidebar__item menu")}
+        >
+          {primaryMenu}
+          {hasSidebar && secondaryMenu}
+        </div>
+      </div>
+    </div>
+  );
+}

src/theme/NavbarItem/GitHubNavbarItem.js

@@ -4,6 +4,8 @@ export default function GitHubNavbarItem({ mobile = false }) {
   const [stars, setStars] = useState(null);
 
   useEffect(() => {
+    if (mobile) return undefined;
+
     const controller = new AbortController();
 
     async function loadStars() {
@@ -28,10 +30,12 @@ export default function GitHubNavbarItem({ mobile = false }) {
 
     loadStars();
     return () => controller.abort();
-  }, []);
+  }, [mobile]);
+
+  if (mobile) return null;
 
   return (
-    <div className={mobile ? "menu__list-item" : "navbar__item"}>
+    <div className="navbar__item">
       <a
         className="nav-icon nav-github"
         href="https://github.com/FEAScript/FEAScript-core"