diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md index 9958ddd680..2d3a3924fd 100644 --- a/CHANGELOG-2.x.md +++ b/CHANGELOG-2.x.md @@ -5,6 +5,7 @@ - Add sticky footer. - Remove empty doc sidebar container - PostCSS preset env now only polyfills Stage 3 features (previously it was stage 2) like Create React App. Stage 2 CSS is considered relatively unstable and subject to change while Stage 3 features will likely become a standard. +- Add ability expand all doc items in sidebar (same as `docsSideNavCollapsible` field in v1) ## 2.0.0-alpha.30 diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.js b/packages/docusaurus-theme-classic/src/theme/DocPage/index.js index cbcdecb100..85f9b0dc3e 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.js +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.js @@ -8,6 +8,7 @@ import React from 'react'; import {MDXProvider} from '@mdx-js/react'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import renderRoutes from '@docusaurus/renderRoutes'; import Layout from '@theme/Layout'; import DocSidebar from '@theme/DocSidebar'; @@ -19,6 +20,8 @@ function DocPage(props) { const {route, docsMetadata, location} = props; const {permalinkToSidebar, docsSidebars} = docsMetadata; const sidebar = permalinkToSidebar[location.pathname.replace(/\/$/, '')]; + const {siteConfig: {themeConfig = {}} = {}} = useDocusaurusContext(); + const {sidebarCollapsible = true} = themeConfig; return ( @@ -29,6 +32,7 @@ function DocPage(props) { docsSidebars={docsSidebars} location={location} sidebar={sidebar} + sidebarCollapsible={sidebarCollapsible} /> )} diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js index 70e72af3ad..2e863bb171 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js @@ -14,7 +14,7 @@ import styles from './styles.module.css'; const MOBILE_TOGGLE_SIZE = 24; -function DocSidebarItem({item, onItemClick}) { +function DocSidebarItem({item, onItemClick, collapsible}) { const {items, href, label, type} = item; const [collapsed, setCollapsed] = useState(item.collapsed); const [prevCollapsedProp, setPreviousCollapsedProp] = useState(null); @@ -36,11 +36,12 @@ function DocSidebarItem({item, onItemClick}) { })} key={label}> setCollapsed(!collapsed)}> + onClick={collapsible ? () => setCollapsed(!collapsed) : undefined}> {label} @@ -95,7 +97,12 @@ function mutateSidebarCollapsingState(item, location) { function DocSidebar(props) { const [showResponsiveSidebar, setShowResponsiveSidebar] = useState(false); - const {docsSidebars, location, sidebar: currentSidebar} = props; + const { + docsSidebars, + location, + sidebar: currentSidebar, + sidebarCollapsible, + } = props; if (!currentSidebar) { return null; @@ -109,9 +116,11 @@ function DocSidebar(props) { ); } - sidebarData.forEach(sidebarItem => - mutateSidebarCollapsingState(sidebarItem, location), - ); + if (sidebarCollapsible) { + sidebarData.forEach(sidebarItem => + mutateSidebarCollapsingState(sidebarItem, location), + ); + } return (
@@ -162,6 +171,7 @@ function DocSidebar(props) { onItemClick={() => { setShowResponsiveSidebar(false); }} + collapsible={sidebarCollapsible} /> ))} diff --git a/website/docs/migrating-from-v1-to-v2.md b/website/docs/migrating-from-v1-to-v2.md index 5ebaee0715..0685b3cf07 100644 --- a/website/docs/migrating-from-v1-to-v2.md +++ b/website/docs/migrating-from-v1-to-v2.md @@ -161,7 +161,7 @@ Infima uses 7 shades of each color. We recommend using [ColorBox](https://www.co } ``` -#### `footerIcon`, `copyright`, `ogImage`, `twitterImage` +#### `footerIcon`, `copyright`, `ogImage`, `twitterImage`, 'docsSideNavCollapsible' Site meta info such as assets, SEO, copyright info are now handled by themes. To customize them, use the `themeConfig` field in your `docusaurus.config.js`: @@ -177,6 +177,8 @@ module.exports = { copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, }, image: 'img/docusaurus.png', + // Equivalent to `docsSideNavCollapsible` + sidebarCollapsible: false, ... }, }; @@ -333,7 +335,7 @@ The following fields are all deprecated, you may remove from your configuration - `defaultVersionShown` - Versioning is not ported yet. You'd be unable to migration to Docusaurus 2 if you are using versioning. Stay tuned. - `disableHeaderTitle` - `disableTitleTagline` -- `docsSideNavCollapsible` - This is turned on by default now. +- `docsSideNavCollapsible` is available at `themeConfig.sidebarCollapsible`, and this is turned on by default now. - `facebookAppId` - `facebookComments` - `facebookPixelId`