Skip to content

Bug fix: mobile menu crashing #4804

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 26, 2025
Merged

Bug fix: mobile menu crashing #4804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/theme/Navbar/Content/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export default function NavbarContent() {
<button className="click-button primary-btn">Get started</button>
</a>
</div>
<MobileSideBarMenu sidebar={items} menu={{ ...sidebars, dropdownCategories }} />
<MobileSideBarMenu sidebar={items} menu={{ dropdownCategories }} />
</div>
</div>
<div className={clsx("secondary-nav--items", styles.secondaryMenu)}>
Expand Down
28 changes: 14 additions & 14 deletions src/theme/Navbar/MobileSidebar/SecondaryMenu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import {
useNavbarMobileSidebar,
useNavbarMobileSidebar,
} from '@docusaurus/theme-common/internal';
import Translate from '@docusaurus/Translate';
import SearchBar from "@theme/SearchBar";
Expand All @@ -9,18 +9,18 @@ import { ThemeClassNames } from '@docusaurus/theme-common'
import { useNavbarSecondaryMenu } from '@docusaurus/theme-common/internal';
import styles from './styles.module.scss'
import DocSidebarItems from '@theme/DocSidebarItems'
import sidebars from '../../../../../sidebars';
import { dropdownCategories } from '../../../Navbar/Content/MenuData';

function SecondaryMenuBackButton(props) {
return (
<button {...props} type="button" className="clean-btn navbar-sidebar__back">
<Translate
id="theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel"
description="The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)">
← Back to main menu
</Translate>
</button>
);
return (
<button {...props} type="button" className="clean-btn navbar-sidebar__back">
<Translate
id="theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel"
description="The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)">
← Back to main menu
</Translate>
</button>
);
}

// The secondary menu slides from the right and shows the top nav items. This is a little unusual - we use this to show the drop down items
Expand All @@ -37,16 +37,16 @@ export default function NavbarMobileSidebarSecondaryMenu() {
</div>
</div>
<ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list', styles.docsMobileMenuItems)}>
<DocSidebarItems items={sidebars.dropdownCategories.map(item => ({
<DocSidebarItems items={dropdownCategories.map(item => ({
...item,
label: (
label: React.isValidElement(item.label) ? item.label : (
<Translate id={`sidebar.dropdownCategories.category.${item.label}`}>
{item.label}
</Translate>
),
items: item.items?.map(subItem => ({
...subItem,
label: (
label: React.isValidElement(subItem.label) ? subItem.label : (
<Translate id={`sidebar.dropdownCategories.category.${item.label}.${subItem.label}`}>
{subItem.label}
</Translate>
Expand Down