[v3] fix invisible mobile menu after click on hamburger (#2400)

Author: Dimitri POSTOLOV

.changeset/beige-moose-learn.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+fix invisible mobile menu after click on hamburger

packages/nextra-theme-docs/src/components/sidebar.tsx

@@ -1,5 +1,4 @@
 import cn from 'clsx'
-import { useRouter } from 'next/router'
 import type { Heading } from 'nextra'
 import { useFSRoute, useMounted } from 'nextra/hooks'
 import { ArrowRightIcon, ExpandIcon } from 'nextra/icons'
@@ -321,7 +320,6 @@ export function Sidebar({
 }: SideBarProps): ReactElement {
   const config = useConfig()
   const { menu, setMenu } = useMenu()
-  const router = useRouter()
   const [focused, setFocused] = useState<null | string>(null)
   const [showSidebar, setSidebar] = useState(true)
   const [showToggleAnimation, setToggleAnimation] = useState(false)
@@ -359,19 +357,14 @@ export function Sidebar({
     }
   }, [menu])
 
-  // Always close mobile nav when route was changed (e.g. logo click)
-  useEffect(() => {
-    setMenu(false)
-  }, [router.asPath, setMenu])
-
   const hasI18n = config.i18n.length > 0
   const hasMenu = config.darkMode || hasI18n || config.sidebar.toggleButton
 
   return (
     <>
-      {includePlaceholder && asPopover ? (
+      {includePlaceholder && asPopover && (
         <div className="max-xl:_hidden _h-0 _w-64 _shrink-0" />
-      ) : null}
+      )}
       <div
         className={cn(
           'motion-reduce:_transition-none [transition:background-color_1.5s_ease]',
@@ -460,7 +453,7 @@ export function Sidebar({
           >
             <LocaleSwitch
               lite={!showSidebar}
-              className={cn(showSidebar ? '_grow' : 'max-md:_grow')}
+              className={showSidebar ? '_grow' : 'max-md:_grow'}
             />
             {config.darkMode && (
               <div

packages/nextra-theme-docs/src/contexts/config.tsx

@@ -1,8 +1,9 @@
 import { ThemeProvider } from 'next-themes'
+import { useRouter } from 'next/router'
 import type { FrontMatter, PageMapItem, PageOpts } from 'nextra'
 import { metaSchema } from 'nextra/schemas'
 import type { ReactElement, ReactNode } from 'react'
-import { createContext, useContext, useState } from 'react'
+import { createContext, useContext, useEffect, useState } from 'react'
 import type { ZodError } from 'zod'
 import type { DocsThemeConfig } from '../constants'
 import { DEEP_OBJECT_KEYS, DEFAULT_THEME } from '../constants'
@@ -71,6 +72,7 @@ export function ConfigProvider({
   value: Context
 }): ReactElement {
   const [menu, setMenu] = useState(false)
+  const { asPath } = useRouter()
   // Merge only on first load
   theme ||= {
     ...DEFAULT_THEME,
@@ -106,6 +108,11 @@ export function ConfigProvider({
 
   const { nextThemes } = extendedConfig
 
+  // Always close mobile nav when route was changed (e.g. logo click)
+  useEffect(() => {
+    setMenu(false)
+  }, [asPath])
+
   return (
     <ThemeProvider
       attribute="class"

packages/nextra-theme-docs/src/index.tsx

@@ -136,12 +136,9 @@ function InnerLayout({
   const { direction } = config.i18n.find(l => l.locale === locale) || config
   const dir = direction === 'rtl' ? 'rtl' : 'ltr'
 
-  const components = getComponents({
-    isRawLayout: themeContext.layout === 'raw',
-    components: {
-      ...config.components,
-      // @ts-expect-error fixme
-      wrapper: function NextraWrapper({ toc, children }) {
+  const wrapper: NextraMDXContent = useMemo(
+    () =>
+      function NextraWrapper({ toc, children }) {
         const tocEl =
           activeType === 'page' ||
           !themeContext.toc ||
@@ -198,7 +195,29 @@ function InnerLayout({
             </Body>
           </div>
         )
-      } satisfies NextraMDXContent
+      },
+    [
+      activeIndex,
+      activePath,
+      activeType,
+      config.toc.component,
+      config.toc.float,
+      directories,
+      docsDirectories,
+      filePath,
+      flatDocsDirectories,
+      hideSidebar,
+      themeContext,
+      timestamp
+    ]
+  )
+
+  const components = getComponents({
+    isRawLayout: themeContext.layout === 'raw',
+    components: {
+      ...config.components,
+      // @ts-expect-error fixme
+      wrapper
     }
   })
 

packages/nextra-theme-docs/src/mdx-components.tsx

@@ -175,6 +175,55 @@ const A = ({ href = '', ...props }) => (
   <Anchor href={href} newWindow={EXTERNAL_HREF_REGEX.test(href)} {...props} />
 )
 
+const DEFAULT_COMPONENTS: Components = {
+  h1: props => (
+    <h1
+      className="_mt-2 _text-4xl _font-bold _tracking-tight _text-slate-900 dark:_text-slate-100"
+      {...props}
+    />
+  ),
+  ul: props => (
+    <ul
+      className="_mt-6 _list-disc first:_mt-0 ltr:_ml-6 rtl:_mr-6"
+      {...props}
+    />
+  ),
+  ol: props => (
+    <ol
+      className="_mt-6 _list-decimal first:_mt-0 ltr:_ml-6 rtl:_mr-6"
+      {...props}
+    />
+  ),
+  li: props => <li className="_my-2" {...props} />,
+  blockquote: props => (
+    <blockquote
+      className={cn(
+        '_mt-6 _border-gray-300 _italic _text-gray-700 dark:_border-gray-700 dark:_text-gray-400',
+        'first:_mt-0 ltr:_border-l-2 ltr:_pl-6 rtl:_border-r-2 rtl:_pr-6'
+      )}
+      {...props}
+    />
+  ),
+  hr: props => (
+    <hr
+      className="_my-8 _border-neutral-200/70 contrast-more:_border-neutral-400 dark:_border-primary-100/10 contrast-more:dark:_border-neutral-400"
+      {...props}
+    />
+  ),
+  a: Link,
+  table: props => (
+    <Table className="nextra-scrollbar _mt-6 _p-0 first:_mt-0" {...props} />
+  ),
+  p: props => <p className="_mt-6 _leading-7 first:_mt-0" {...props} />,
+  tr: Tr,
+  th: Th,
+  td: Td,
+  details: Details,
+  summary: Summary,
+  pre: Pre,
+  code: Code
+}
+
 export function getComponents({
   isRawLayout,
   components
@@ -188,57 +237,12 @@ export function getComponents({
 
   const context = { index: 0 }
   return {
-    h1: props => (
-      <h1
-        className="_mt-2 _text-4xl _font-bold _tracking-tight _text-slate-900 dark:_text-slate-100"
-        {...props}
-      />
-    ),
+    ...DEFAULT_COMPONENTS,
     h2: createHeading('h2', context),
     h3: createHeading('h3', context),
     h4: createHeading('h4', context),
     h5: createHeading('h5', context),
     h6: createHeading('h6', context),
-    ul: props => (
-      <ul
-        className="_mt-6 _list-disc first:_mt-0 ltr:_ml-6 rtl:_mr-6"
-        {...props}
-      />
-    ),
-    ol: props => (
-      <ol
-        className="_mt-6 _list-decimal first:_mt-0 ltr:_ml-6 rtl:_mr-6"
-        {...props}
-      />
-    ),
-    li: props => <li className="_my-2" {...props} />,
-    blockquote: props => (
-      <blockquote
-        className={cn(
-          '_mt-6 _border-gray-300 _italic _text-gray-700 dark:_border-gray-700 dark:_text-gray-400',
-          'first:_mt-0 ltr:_border-l-2 ltr:_pl-6 rtl:_border-r-2 rtl:_pr-6'
-        )}
-        {...props}
-      />
-    ),
-    hr: props => (
-      <hr
-        className="_my-8 _border-neutral-200/70 contrast-more:_border-neutral-400 dark:_border-primary-100/10 contrast-more:dark:_border-neutral-400"
-        {...props}
-      />
-    ),
-    a: Link,
-    table: props => (
-      <Table className="nextra-scrollbar _mt-6 _p-0 first:_mt-0" {...props} />
-    ),
-    p: props => <p className="_mt-6 _leading-7 first:_mt-0" {...props} />,
-    tr: Tr,
-    th: Th,
-    td: Td,
-    details: Details,
-    summary: Summary,
-    pre: Pre,
-    code: Code,
     ...components
   }
 }

packages/nextra/src/client/setup-page.tsx

@@ -153,7 +153,6 @@ export function HOC_MDXWrapper(
     ]
     const { Layout, themeConfig } = __nextra_internal__
     const { route } = useRouter()
-    console.log({ route })
 
     const pageContext = __nextra_internal__.context[route]