Stop relying on Nextra's MenuProvider

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,17 @@ export default function MainLayout({
     <>
       <NewFontsStyleTag />
       <ThemeProvider attribute="class">
-        <MenuProvider>
           <Navbar items={topLevelNavbarItems} />
+          <Sidebar
+            includePlaceholder={false}
+            toc={[]}
+            docsDirectories={docsDirectories}
+            fullDirectories={directories}
+          />
           <div className="isolate bg-neu-0 text-neu-900 antialiased">
             {children}
           </div>
           <Footer />
-        </MenuProvider>
       </ThemeProvider>
     </>
   )

src/app/(main)/layout.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/(main)/menu-provider.tsx

@@ -47,4 +47,4 @@ 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(

src/components/navbar/top-level-items.tsx

@@ -22,20 +22,15 @@ import {
   useState,
 } from "react"
 import scrollIntoView from "scroll-into-view-if-needed"
-import {
-  useActiveAnchor,
-  useMenu,
-  useThemeConfig,
-  Collapse,
-  LocaleSwitch,
-} from "nextra-theme-docs"
+import { useActiveAnchor, useThemeConfig, Collapse } from "nextra-theme-docs"
 
 import ArrowBarLeft from "@/app/conf/_design-system/pixelarticons/arrow-bar-left.svg?svgr"
 import { Anchor } from "@/app/conf/_design-system/anchor"
 
-import { renderComponent } from "./utils/render-component"
-import { ThemeSwitch } from "./theme-switch"
-import { Flexsearch } from "./flexsearch"
+import { renderComponent } from "../utils/render-component"
+import { ThemeSwitch } from "../theme-switch"
+import { Flexsearch } from "../flexsearch"
+import { useMenu } from "../use-menu"
 
 const TreeState: Record<string, boolean> = Object.create(null)
 
@@ -229,7 +224,7 @@ function Separator({ title }: { title: string }): ReactElement {
       className={cn(
         "[word-break:break-word]",
         title
-          ? "typography-body-sm mb-2 px-2 py-1.5 font-semibold text-neu-800 [&:not(:first-child)]:mt-5"
+          ? "typography-body-sm mb-2 px-2 py-1.5 font-semibold text-neu-800 max-md:first:hidden [&:not(:first-child)]:mt-5"
           : "my-4",
       )}
     >
@@ -370,7 +365,6 @@ export function Sidebar({
   const { menu, setMenu } = useMenu()
   const [focused, setFocused] = useState("")
   const [showSidebar, setSidebar] = useState(true)
-  const [showToggleAnimation, setToggleAnimation] = useState(false)
 
   const anchors = useMemo(() => toc.filter(v => v.depth === 2), [toc])
   const sidebarRef = useRef<HTMLDivElement>(null!)
@@ -480,7 +474,6 @@ export function Sidebar({
           <SidebarFooter
             showSidebar={showSidebar}
             setSidebar={setSidebar}
-            showToggleAnimation={showToggleAnimation}
             hasI18n={hasI18n}
           />
         )}
@@ -492,17 +485,13 @@ export function Sidebar({
 export function SidebarFooter({
   showSidebar,
   setSidebar,
-  showToggleAnimation = false,
   hasI18n = false,
-  setToggleAnimation,
   className,
   hiddenOnMobile = true,
 }: {
   showSidebar: boolean
   setSidebar: (show: boolean) => void
-  showToggleAnimation?: boolean
   hasI18n?: boolean
-  setToggleAnimation?: (show: boolean) => void
   className?: string
   hiddenOnMobile?: boolean
 }) {
@@ -519,14 +508,7 @@ export function SidebarFooter({
           : "flex-col flex-wrap justify-center py-4",
         className,
       )}
-      data-toggle-animation={
-        showToggleAnimation ? (showSidebar ? "show" : "hide") : "off"
-      }
     >
-      <LocaleSwitch
-        lite={!showSidebar}
-        className={showSidebar ? "_grow" : "max-md:_grow"}
-      />
       <div className={showSidebar && !hasI18n ? "_grow _flex _flex-col" : ""}>
         <ThemeSwitch lite={!showSidebar} />
       </div>
@@ -539,7 +521,6 @@ export function SidebarFooter({
           )}
           onClick={() => {
             setSidebar(!showSidebar)
-            setToggleAnimation?.(true)
           }}
         >
           <ArrowBarLeft

src/components/nextra-mdx-wrapper.tsx

@@ -0,0 +1,24 @@
+import { useSyncExternalStore } from "react"
+
+const createStore = () => {
+  let state = false
+  const listeners = new Set<() => void>()
+  return {
+    get: () => state,
+    sub: (l: () => void) => (listeners.add(l), () => listeners.delete(l)),
+    set: (action: boolean | ((prev: boolean) => boolean)) => {
+      const val = typeof action === "function" ? action(state) : action
+      if (val !== state) {
+        state = val
+        listeners.forEach(l => l())
+      }
+    },
+  }
+}
+
+const store = createStore()
+
+export const useMenu = () => ({
+  menu: useSyncExternalStore(store.sub, store.get, store.get),
+  setMenu: store.set,
+})