diff --git a/layout/MDXLayout.tsx b/layout/MDXLayout.tsx index 30791690ed2f..54a465c3a67c 100644 --- a/layout/MDXLayout.tsx +++ b/layout/MDXLayout.tsx @@ -28,6 +28,7 @@ import { Table, } from '@/components' import { useI18n } from '@/i18n' +import { NavItemGroup } from '@/navigation' const mdxComponents = { blockquote: Blockquote, @@ -75,13 +76,21 @@ export const MDXLayout = ({ pagePath, navItems, frontmatter, outline, children } const { pathWithoutLocale } = useI18n() // Compute some values for the `NavContext` - const { pageNavItems, previousPage, currentPage, nextPage } = useMemo(() => { + const { previousPage, currentPage, nextPage, currentGroup } = useMemo(() => { let previousPage = null let currentPage = null let nextPage = null + let currentGroup = null const pageNavItems = navItems.flatMap((navItem) => { if ('children' in navItem) { - return navItem.children.filter((childNavItem) => 'path' in childNavItem) + return navItem.children.filter((childNavItem) => { + if ('path' in childNavItem) { + if (childNavItem.path === pathWithoutLocale) { + currentGroup = navItem + } + return true + } + }) } if ('path' in navItem) { return [navItem] @@ -97,7 +106,7 @@ export const MDXLayout = ({ pagePath, navItems, frontmatter, outline, children } } pageNavItemIndex++ } - return { pageNavItems, previousPage, currentPage, nextPage } + return { previousPage, currentPage, nextPage, currentGroup: currentGroup as NavItemGroup | null } }, [navItems, pathWithoutLocale]) // Provide `markOutlineItem` to the `DocumentContext` so child `Heading` components can mark outline items as "in or above view" or not @@ -129,7 +138,7 @@ export const MDXLayout = ({ pagePath, navItems, frontmatter, outline, children } }, [outline, outlineItemIsInOrAboveView]) return ( - + @@ -155,7 +164,12 @@ export const MDXLayout = ({ pagePath, navItems, frontmatter, outline, children }
- {frontmatter?.title && {frontmatter.title}} + {currentGroup ? ( +
+ {currentGroup.title} +
+ ) : null} + {frontmatter?.title ? {frontmatter.title} : null} {children}
diff --git a/layout/NavContext.ts b/layout/NavContext.ts index 118088f10e24..b1ee39dd4963 100644 --- a/layout/NavContext.ts +++ b/layout/NavContext.ts @@ -1,14 +1,14 @@ import { createContext, Context } from 'react' -import { NavItem, NavItemPage } from '@/navigation' +import { NavItem, NavItemPage, NavItemGroup } from '@/navigation' export type NavContextProps = { pagePath: string navItems: NavItem[] - pageNavItems: NavItemPage[] previousPage: NavItemPage | null currentPage: NavItemPage | null nextPage: NavItemPage | null + currentGroup: NavItemGroup | null } export const NavContext = createContext(null) as Context