diff --git a/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/translations.test.ts.snap b/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/translations.test.ts.snap
index 084840bf39..d36f4e6959 100644
--- a/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/translations.test.ts.snap
+++ b/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/translations.test.ts.snap
@@ -133,7 +133,6 @@ exports[`translateThemeConfig returns translated themeConfig 1`] = `
],
"style": "light",
},
- "hideableSidebar": true,
"navbar": {
"hideOnScroll": false,
"items": [
diff --git a/packages/docusaurus-theme-classic/src/__tests__/translations.test.ts b/packages/docusaurus-theme-classic/src/__tests__/translations.test.ts
index ebb3040de5..1c530f978e 100644
--- a/packages/docusaurus-theme-classic/src/__tests__/translations.test.ts
+++ b/packages/docusaurus-theme-classic/src/__tests__/translations.test.ts
@@ -16,7 +16,6 @@ const ThemeConfigSample: ThemeConfig = {
docs: {
versionPersistence: 'none',
},
- hideableSidebar: true,
navbar: {
title: 'navbar title',
style: 'dark',
diff --git a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts
index ac986bd0df..c80aeec5d1 100644
--- a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts
+++ b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts
@@ -37,6 +37,13 @@ describe('themeConfig', () => {
defaultLanguage: 'javascript',
additionalLanguages: ['kotlin', 'java'],
},
+ docs: {
+ versionPersistence: 'localStorage',
+ sidebar: {
+ hideable: true,
+ autoCollapseCategories: false,
+ },
+ },
announcementBar: {
id: 'supports',
content: 'pls support',
@@ -101,6 +108,19 @@ describe('themeConfig', () => {
});
});
+ it('rejects outdated sidebar options', () => {
+ expect(() =>
+ testValidateThemeConfig({hideableSidebar: true}),
+ ).toThrowErrorMatchingInlineSnapshot(
+ `"themeConfig.hideableSidebar has been moved to themeConfig.docs.sidebar.hideable."`,
+ );
+ expect(() =>
+ testValidateThemeConfig({autoCollapseSidebarCategories: true}),
+ ).toThrowErrorMatchingInlineSnapshot(
+ `"themeConfig.autoCollapseSidebarCategories has been moved to themeConfig.docs.sidebar.autoCollapseCategories."`,
+ );
+ });
+
it('allows possible types of navbar items', () => {
const config = {
navbar: {
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/index.tsx
index b2b9357d91..845fd89439 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/index.tsx
@@ -18,7 +18,9 @@ import styles from './styles.module.css';
function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
const {
navbar: {hideOnScroll},
- hideableSidebar,
+ docs: {
+ sidebar: {hideable},
+ },
} = useThemeConfig();
return (
@@ -30,7 +32,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
)}>
{hideOnScroll && }
- {hideableSidebar && }
+ {hideable && }
);
}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx
index c3d5ed9fc4..7a9a52e0e8 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx
@@ -127,23 +127,21 @@ export default function DocSidebarItemCategory({
setExpandedItem(toCollapsed ? null : index);
setCollapsed(toCollapsed);
}
- const {autoCollapseSidebarCategories} = useThemeConfig();
+ const {
+ docs: {
+ sidebar: {autoCollapseCategories},
+ },
+ } = useThemeConfig();
useEffect(() => {
if (
collapsible &&
expandedItem &&
expandedItem !== index &&
- autoCollapseSidebarCategories
+ autoCollapseCategories
) {
setCollapsed(true);
}
- }, [
- collapsible,
- expandedItem,
- index,
- setCollapsed,
- autoCollapseSidebarCategories,
- ]);
+ }, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]);
return (
;
- sidebarCollapsible: boolean;
tableOfContents: TableOfContents;
};
diff --git a/website/docs/api/docusaurus.config.js.md b/website/docs/api/docusaurus.config.js.md
index 37ef04dbb1..488fd728c3 100644
--- a/website/docs/api/docusaurus.config.js.md
+++ b/website/docs/api/docusaurus.config.js.md
@@ -286,8 +286,12 @@ Example:
```js title="docusaurus.config.js"
module.exports = {
themeConfig: {
- hideableSidebar: false,
- autoCollapseSidebarCategories: false,
+ docs: {
+ sidebar: {
+ hideable: false,
+ autoCollapseCategories: false,
+ },
+ },
colorMode: {
defaultMode: 'light',
disableSwitch: false,
diff --git a/website/docs/guides/docs/sidebar/index.md b/website/docs/guides/docs/sidebar/index.md
index 9634f4853c..74d601cb92 100644
--- a/website/docs/guides/docs/sidebar/index.md
+++ b/website/docs/guides/docs/sidebar/index.md
@@ -121,13 +121,17 @@ type SidebarsFile = {
### Hideable sidebar {#hideable-sidebar}
-By enabling the `themeConfig.hideableSidebar` option, you can make the entire sidebar hideable, allowing users to better focus on the content. This is especially useful when content is consumed on medium-sized screens (e.g. tablets).
+By enabling the `themeConfig.docs.sidebar.hideable` option, you can make the entire sidebar hideable, allowing users to better focus on the content. This is especially useful when content is consumed on medium-sized screens (e.g. tablets).
```js title="docusaurus.config.js"
module.exports = {
themeConfig: {
// highlight-start
- hideableSidebar: true,
+ docs: {
+ sidebar: {
+ hideable: true,
+ },
+ },
// highlight-end
},
};
@@ -135,13 +139,18 @@ module.exports = {
### Auto-collapse sidebar categories {#auto-collapse-sidebar-categories}
-The `themeConfig.autoCollapseSidebarCategories` option would collapse all sibling categories when expanding one category. This saves the user from having too many categories open and helps them focus on the selected section.
+The `themeConfig.docs.sidebar.autoCollapseCategories` option would collapse all sibling categories when expanding one category. This saves the user from having too many categories open and helps them focus on the selected section.
```js title="docusaurus.config.js"
module.exports = {
themeConfig: {
- // highlight-next-line
- autoCollapseSidebarCategories: true,
+ // highlight-start
+ docs: {
+ sidebar: {
+ autoCollapseCategories: true,
+ },
+ },
+ // highlight-end
},
};
```
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 022a36ae3c..93728881ad 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -357,8 +357,12 @@ const config = {
liveCodeBlock: {
playgroundPosition: 'bottom',
},
- hideableSidebar: true,
- autoCollapseSidebarCategories: true,
+ docs: {
+ sidebar: {
+ hideable: true,
+ autoCollapseCategories: true,
+ },
+ },
colorMode: {
defaultMode: 'light',
disableSwitch: false,