fix missing mobile menu in 404 page (#2227)

## Description

- Removed MenuProvider wrapper and implement custom useMenu hook with
useSyncExternalStore
- Added missing sidebar to main layout for 404 page
- Patched Nextra Theme Docs again to show the same sidebar and use the
same layout wrapper in all pages in Pages router (previously Nextra used
the default wrapper for layout=raw, so we had two subtly different
sidebars)
- Fixed "Registeration" typo

---------

Co-authored-by: Jonathan Brennan <jonathanawesome@users.noreply.github.com>

Author: hasparus

patches/nextra-theme-docs.patch

@@ -36,7 +36,7 @@ index 71f87bcd1dde49d7c19ad49fc098e715a76c5c10..a0b8143b6b7ef89513c2199b956f5f87
 +  flatDocsDirectories: Item[]
 +}
 diff --git a/dist/index.js b/dist/index.js
-index 56201641fd965dcc5ab7c5df53e444c41293c00e..71f4d353b5bd6c0fcab630330f578b5593f8596e 100644
+index 56201641fd965dcc5ab7c5df53e444c41293c00e..cb6682bf947351f5757f51b43ff85237f16f1096 100644
 --- a/dist/index.js
 +++ b/dist/index.js
 @@ -100,10 +100,10 @@ IntersectionObserverContext.displayName = "IntersectionObserver";
@@ -125,3 +125,12 @@ index 56201641fd965dcc5ab7c5df53e444c41293c00e..71f4d353b5bd6c0fcab630330f578b55
          body
        ] })
      }
+@@ -2524,7 +2485,7 @@ function getComponents({
+   components
+ }) {
+   if (isRawLayout) {
+-    return { a: A, wrapper: DEFAULT_COMPONENTS.wrapper };
++    return { a: A, wrapper: components.wrapper };
+   }
+   const context = { index: 0 };
+   return __spreadValues(__spreadProps(__spreadValues({}, DEFAULT_COMPONENTS), {

patches/nextra.patch

@@ -20,6 +20,22 @@ index 9d05118d3d10e746cd2c020785a0f34465bb8570..218107600d7efed1b5f9d49f0a696b16
    Playground,
    Popup,
    Pre,
+diff --git a/dist/client/hooks/use-fs-route.js b/dist/client/hooks/use-fs-route.js
+index 7948959d9c044d66e241864789454e0ea637c659..46e352a845c3776965f3f1957e5d93b946444a3a 100644
+--- a/dist/client/hooks/use-fs-route.js
++++ b/dist/client/hooks/use-fs-route.js
+@@ -1,9 +1,9 @@
+-import { useRouter } from "next/router";
++import { useRouter } from "next/compat/router";
+ import { useMemo } from "react";
+ import { DEFAULT_LOCALE, ERROR_ROUTES } from "../../constants.js";
+ const template = "https://nextra.site";
+ const useFSRoute = () => {
+-  const { locale = DEFAULT_LOCALE, asPath, route } = useRouter();
++  const { locale = DEFAULT_LOCALE, asPath, route } = useRouter() || {};
+   return useMemo(() => {
+     const clientRoute = ERROR_ROUTES.has(route) ? route : asPath;
+     const { pathname } = new URL(clientRoute, template);
 diff --git a/dist/client/normalize-pages.js b/dist/client/normalize-pages.js
 index 15afee0c1de26f47d781f423e5ec32e33ad925d3..fefd01736bd2b778df275bf50ac48384d5f63845 100644
 --- a/dist/client/normalize-pages.js

pnpm-lock.yaml

@@ -4,8 +4,12 @@ import { ThemeProvider } from "next-themes"
 import { Footer } from "../../components/footer"
 import { NewFontsStyleTag } from "../fonts"
 import { Navbar } from "../../components/navbar/navbar"
-import { topLevelNavbarItems } from "../../components/navbar/top-level-items"
-import { MenuProvider } from "./menu-provider"
+import {
+  directories,
+  docsDirectories,
+  topLevelNavbarItems,
+} from "../../components/navbar/top-level-items"
+import { Sidebar } from "../../components/sidebar"
 
 export default function MainLayout({
   children,
@@ -16,13 +20,18 @@ export default function MainLayout({
     <>
       <NewFontsStyleTag />
       <ThemeProvider attribute="class">
-        <MenuProvider>
-          <Navbar items={topLevelNavbarItems} />
-          <div className="isolate bg-neu-0 text-neu-900 antialiased">
-            {children}
-          </div>
-          <Footer />
-        </MenuProvider>
+        <Navbar items={topLevelNavbarItems} />
+        <Sidebar
+          includePlaceholder={false}
+          toc={[]}
+          docsDirectories={docsDirectories}
+          fullDirectories={directories}
+          asPopover
+        />
+        <div className="isolate bg-neu-0 text-neu-900 antialiased">
+          {children}
+        </div>
+        <Footer />
       </ThemeProvider>
     </>
   )

src/app/(main)/layout.tsx

@@ -38,7 +38,7 @@ export function RegisterToday({ className }: RegisterTodayProps) {
         </div>
         <div className="mt-10 flex gap-x-6 gap-y-4 max-sm:flex-col">
           <Button disabled className="opacity-55" href={GET_TICKETS_LINK}>
-            Registeration closed
+            Registration closed
           </Button>
           <Button
             disabled

src/app/(main)/menu-provider.tsx

@@ -8,7 +8,6 @@ import NextLink from "next/link"
 import { Button } from "nextra/components"
 import type * as normalizePages from "nextra/normalize-pages"
 import React, { useEffect, type ReactElement, type ReactNode } from "react"
-import { useMenu } from "nextra-theme-docs"
 import { Anchor } from "@/app/conf/_design-system/anchor"
 
 import MenuIcon from "@/app/conf/_design-system/pixelarticons/menu.svg?svgr"
@@ -17,6 +16,7 @@ import { GraphQLWordmarkLogo } from "../../icons"
 import { ThemeSwitch } from "../theme-switch"
 import { Flexsearch } from "../flexsearch"
 import { NavLink, navLinkClasses } from "./nav-link"
+import { useMenu } from "../use-menu"
 
 type Item = normalizePages.PageItem | normalizePages.MenuItem
 export interface NavBarProps {

src/app/conf/2025/components/register-today/index.tsx

@@ -47,4 +47,5 @@ export function normalizeMetaToItems(meta: Record<string, any>, parent = "/") {
   return result
 }
 
-export const { topLevelNavbarItems } = normalizeMetaToItems(meta)
+export const { topLevelNavbarItems, docsDirectories, directories } =
+  normalizeMetaToItems(meta)

src/components/navbar/navbar.tsx

@@ -49,6 +49,7 @@ export function NextraMdxWrapper({
         <TableOfContents toc={toc} filePath={config.filePath} />
       </nav>
     )
+
   return (
     <div
       className={clsx(