From 99d48d56970a8048404c33f685fd2288b26ace1d Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 29 Apr 2022 18:00:19 +0200 Subject: [PATCH 1/4] extract useDocRouteMetadata --- .../src/theme/DocPage/index.tsx | 41 +---------------- packages/docusaurus-theme-common/src/index.ts | 1 + .../src/utils/docsUtils.tsx | 44 ++++++++++++++++++- 3 files changed, 46 insertions(+), 40 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx index 32a226270459..b1404be79846 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx @@ -6,12 +6,9 @@ */ import React from 'react'; -import renderRoutes from '@docusaurus/renderRoutes'; -import type {PropSidebar} from '@docusaurus/plugin-content-docs'; import NotFound from '@theme/NotFound'; import type {Props} from '@theme/DocPage'; import DocPageLayout from '@theme/DocPage/Layout'; -import {matchPath} from '@docusaurus/router'; import clsx from 'clsx'; @@ -21,47 +18,13 @@ import { docVersionSearchTag, DocsSidebarProvider, DocsVersionProvider, + useDocRouteMetadata, } from '@docusaurus/theme-common'; import SearchMetadata from '@theme/SearchMetadata'; -function extractDocRouteMetadata(props: Props): null | { - docElement: JSX.Element; - sidebarName: string | undefined; - sidebarItems: PropSidebar | undefined; -} { - const { - route: {routes: docRoutes}, - versionMetadata, - location, - } = props; - const currentDocRoute = docRoutes!.find((docRoute) => - matchPath(location.pathname, docRoute), - ); - if (!currentDocRoute) { - return null; - } - - // For now, the sidebarName is added as route config: not ideal! - const sidebarName = currentDocRoute.sidebar; - - const sidebarItems = sidebarName - ? versionMetadata.docsSidebars[sidebarName] - : undefined; - - const docElement = renderRoutes(props.route.routes, { - versionMetadata, - }); - - return { - docElement, - sidebarName, - sidebarItems, - }; -} - export default function DocPage(props: Props): JSX.Element { const {versionMetadata} = props; - const currentDocRouteMetadata = extractDocRouteMetadata(props); + const currentDocRouteMetadata = useDocRouteMetadata(props); if (!currentDocRouteMetadata) { return ; } diff --git a/packages/docusaurus-theme-common/src/index.ts b/packages/docusaurus-theme-common/src/index.ts index 4ee294d41cac..c2792bf448a4 100644 --- a/packages/docusaurus-theme-common/src/index.ts +++ b/packages/docusaurus-theme-common/src/index.ts @@ -55,6 +55,7 @@ export { useDocsVersionCandidates, useLayoutDoc, useLayoutDocsSidebar, + useDocRouteMetadata, } from './utils/docsUtils'; export {useTitleFormatter} from './utils/generalUtils'; diff --git a/packages/docusaurus-theme-common/src/utils/docsUtils.tsx b/packages/docusaurus-theme-common/src/utils/docsUtils.tsx index 8ee82d5eb2e4..3927cc6b9e3d 100644 --- a/packages/docusaurus-theme-common/src/utils/docsUtils.tsx +++ b/packages/docusaurus-theme-common/src/utils/docsUtils.tsx @@ -20,6 +20,7 @@ import type { PropSidebarItem, PropSidebarItemCategory, PropVersionDoc, + PropVersionMetadata, PropSidebarBreadcrumbsItem, } from '@docusaurus/plugin-content-docs'; import {useDocsPreferredVersion} from '../contexts/docsPreferredVersion'; @@ -27,7 +28,9 @@ import {useDocsVersion} from '../contexts/docsVersion'; import {useDocsSidebar} from '../contexts/docsSidebar'; import {uniq} from './jsUtils'; import {isSamePath} from './routesUtils'; -import {useLocation} from '@docusaurus/router'; +import {matchPath, useLocation} from '@docusaurus/router'; +import renderRoutes from '@docusaurus/renderRoutes'; +import type {RouteConfig} from 'react-router-config'; // TODO not ideal, see also "useDocs" export const isDocsPluginEnabled: boolean = !!useAllDocsData; @@ -281,3 +284,42 @@ Available doc ids are: return doc; }, [docId, versions]); } + +// TODO later read version/route directly from context +export function useDocRouteMetadata({ + route, + versionMetadata, +}: { + route: RouteConfig; + versionMetadata: PropVersionMetadata; +}): null | { + docElement: JSX.Element; + sidebarName: string | undefined; + sidebarItems: PropSidebar | undefined; +} { + const location = useLocation(); + const docRoutes = route.routes; + const currentDocRoute = docRoutes!.find((docRoute) => + matchPath(location.pathname, docRoute), + ); + if (!currentDocRoute) { + return null; + } + + // For now, the sidebarName is added as route config: not ideal! + const sidebarName = currentDocRoute.sidebar; + + const sidebarItems = sidebarName + ? versionMetadata.docsSidebars[sidebarName] + : undefined; + + const docElement = renderRoutes(route.routes!, { + versionMetadata, + }); + + return { + docElement, + sidebarName, + sidebarItems, + }; +} From 802aa4bba508219c7771ab4461e362ff20734439 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 29 Apr 2022 18:19:54 +0200 Subject: [PATCH 2/4] stable refactor --- .../src/theme-classic.d.ts | 10 +++++ .../Layout/Aside/ExpandButton.module.css | 37 +++++++++++++++++ .../DocPage/Layout/Aside/ExpandButton.tsx | 40 +++++++++++++++++++ .../index.module.css} | 29 -------------- .../Layout/{Aside.tsx => Aside/index.tsx} | 32 ++------------- .../src/theme/DocPage/Layout/Main.module.css | 28 +++++++++++++ .../src/theme/DocPage/Layout/Main.tsx | 2 +- .../src/theme/DocPage/Layout/index.module.css | 15 +++++++ .../src/theme/DocPage/Layout/index.tsx | 2 +- 9 files changed, 135 insertions(+), 60 deletions(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.module.css create mode 100644 packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.tsx rename packages/docusaurus-theme-classic/src/theme/DocPage/Layout/{styles.module.css => Aside/index.module.css} (63%) rename packages/docusaurus-theme-classic/src/theme/DocPage/Layout/{Aside.tsx => Aside/index.tsx} (66%) create mode 100644 packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Main.module.css create mode 100644 packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.module.css diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index a16f02a0933a..803123e9904f 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -281,6 +281,16 @@ declare module '@theme/DocPage/Layout/Aside' { export default function DocPageLayoutAside(props: Props): JSX.Element; } +declare module '@theme/DocPage/Layout/Aside/ExpandButton' { + export interface Props { + toggleSidebar: () => void; + } + + export default function DocPageLayoutAsideExpandButton( + props: Props, + ): JSX.Element; +} + declare module '@theme/DocPage/Layout/Main' { import type {ReactNode} from 'react'; diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.module.css new file mode 100644 index 000000000000..c2f429756b66 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.module.css @@ -0,0 +1,37 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +@media (min-width: 997px) { + .collapsedDocSidebar { + position: sticky; + top: 0; + height: 100%; + max-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + transition: background-color var(--ifm-transition-fast) ease; + } + + .collapsedDocSidebar:hover, + .collapsedDocSidebar:focus { + background-color: var(--ifm-color-emphasis-200); + } + + .expandSidebarButtonIcon { + transform: rotate(0); + } + + [dir='rtl'] .expandSidebarButtonIcon { + transform: rotate(180deg); + } + + [data-theme='dark'] .collapsedDocSidebar:hover, + [data-theme='dark'] .collapsedDocSidebar:focus { + background-color: var(--collapse-button-bg-color-dark); + } +} diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.tsx new file mode 100644 index 000000000000..a0ced952ce42 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.tsx @@ -0,0 +1,40 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import IconArrow from '@theme/IconArrow'; +import {translate} from '@docusaurus/Translate'; +import type {Props} from '@theme/DocPage/Layout/Aside/ExpandButton'; + +import styles from '../index.module.css'; + +export default function DocPageLayoutAsideExpandButton({ + toggleSidebar, +}: Props): JSX.Element { + return ( +
+ +
+ ); +} diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/index.module.css similarity index 63% rename from packages/docusaurus-theme-classic/src/theme/DocPage/Layout/styles.module.css rename to packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/index.module.css index bcd30b7193b2..c387029f1fab 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/index.module.css @@ -50,35 +50,6 @@ cursor: pointer; } - .collapsedDocSidebar { - position: sticky; - top: 0; - height: 100%; - max-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - transition: background-color var(--ifm-transition-fast) ease; - } - - .collapsedDocSidebar:hover, - .collapsedDocSidebar:focus { - background-color: var(--ifm-color-emphasis-200); - } - - .expandSidebarButtonIcon { - transform: rotate(0); - } - - [dir='rtl'] .expandSidebarButtonIcon { - transform: rotate(180deg); - } - - [data-theme='dark'] .collapsedDocSidebar:hover, - [data-theme='dark'] .collapsedDocSidebar:focus { - background-color: var(--collapse-button-bg-color-dark); - } - .docItemWrapperEnhanced { max-width: calc( var(--ifm-container-width) + var(--doc-sidebar-width) diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/index.tsx similarity index 66% rename from packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside.tsx rename to packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/index.tsx index 236382eae4ff..6f7477d3de23 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/index.tsx @@ -7,41 +7,15 @@ import React, {type ReactNode, useState, useCallback} from 'react'; import DocSidebar from '@theme/DocSidebar'; -import IconArrow from '@theme/IconArrow'; -import {translate} from '@docusaurus/Translate'; import {useLocation} from '@docusaurus/router'; import type {Props} from '@theme/DocPage/Layout/Aside'; +import ExpandButton from '@theme/DocPage/Layout/Aside/ExpandButton'; import clsx from 'clsx'; -import styles from './styles.module.css'; +import styles from './index.module.css'; import {ThemeClassNames, useDocsSidebar} from '@docusaurus/theme-common'; -function SidebarExpandButton({toggleSidebar}: {toggleSidebar: () => void}) { - return ( -
- -
- ); -} - // Reset sidebar state when sidebar changes // Use React key to unmount/remount the children // See https://github.com/facebook/docusaurus/issues/3414 @@ -94,7 +68,7 @@ export default function DocPageLayoutAside({ /> - {hiddenSidebar && } + {hiddenSidebar && } ); } diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Main.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Main.module.css new file mode 100644 index 000000000000..0754fce24b02 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Main.module.css @@ -0,0 +1,28 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.docMainContainer { + display: flex; + width: 100%; +} + +@media (min-width: 997px) { + .docMainContainer { + flex-grow: 1; + max-width: calc(100% - var(--doc-sidebar-width)); + } + + .docMainContainerEnhanced { + max-width: calc(100% - var(--doc-sidebar-hidden-width)); + } + + .docItemWrapperEnhanced { + max-width: calc( + var(--ifm-container-width) + var(--doc-sidebar-width) + ) !important; + } +} diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Main.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Main.tsx index 3cc4f0479e00..7ae012469544 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Main.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Main.tsx @@ -10,7 +10,7 @@ import React from 'react'; import {useDocsSidebar} from '@docusaurus/theme-common'; import clsx from 'clsx'; -import styles from './styles.module.css'; +import styles from './Main.module.css'; import type {Props} from '@theme/DocPage/Layout/Main'; export default function DocPageLayoutMain({ diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.module.css new file mode 100644 index 000000000000..2516de55e3d4 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.module.css @@ -0,0 +1,15 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.docPage { + display: flex; + width: 100%; +} + +.docsWrapper { + display: flex; +} diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx index 858a24e39183..64d445861606 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx @@ -12,7 +12,7 @@ import type {Props} from '@theme/DocPage/Layout'; import DocPageLayoutAside from '@theme/DocPage/Layout/Aside'; import DocPageLayoutMain from '@theme/DocPage/Layout/Main'; -import styles from './styles.module.css'; +import styles from './index.module.css'; import {useDocsSidebar} from '@docusaurus/theme-common'; From c5b1c58d6abc806640121dce9f2c6d5ad89e11a7 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 29 Apr 2022 18:27:08 +0200 Subject: [PATCH 3/4] DocPageLayoutAsideExpandButton refactor --- .../DocPage/Layout/Aside/ExpandButton.module.css | 14 +++++++------- .../theme/DocPage/Layout/Aside/ExpandButton.tsx | 6 +++--- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.module.css index c2f429756b66..8df23b581d4c 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.module.css +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.module.css @@ -6,7 +6,7 @@ */ @media (min-width: 997px) { - .collapsedDocSidebar { + .expandButton { position: sticky; top: 0; height: 100%; @@ -17,21 +17,21 @@ transition: background-color var(--ifm-transition-fast) ease; } - .collapsedDocSidebar:hover, - .collapsedDocSidebar:focus { + .expandButton:hover, + .expandButton:focus { background-color: var(--ifm-color-emphasis-200); } - .expandSidebarButtonIcon { + .expandButtonIcon { transform: rotate(0); } - [dir='rtl'] .expandSidebarButtonIcon { + [dir='rtl'] .expandButtonIcon { transform: rotate(180deg); } - [data-theme='dark'] .collapsedDocSidebar:hover, - [data-theme='dark'] .collapsedDocSidebar:focus { + [data-theme='dark'] .expandButton:hover, + [data-theme='dark'] .expandButton:focus { background-color: var(--collapse-button-bg-color-dark); } } diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.tsx index a0ced952ce42..7da46d74eae5 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.tsx @@ -10,14 +10,14 @@ import IconArrow from '@theme/IconArrow'; import {translate} from '@docusaurus/Translate'; import type {Props} from '@theme/DocPage/Layout/Aside/ExpandButton'; -import styles from '../index.module.css'; +import styles from './ExpandButton.module.css'; export default function DocPageLayoutAsideExpandButton({ toggleSidebar, }: Props): JSX.Element { return (
- +
); } From a7131eedb3c308956ad70b88c6d5991dba681bf7 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 29 Apr 2022 18:33:24 +0200 Subject: [PATCH 4/4] complete DocPage refactor --- .../src/theme-classic.d.ts | 8 +++--- .../ExpandButton.module.css | 0 .../{Aside => Sidebar}/ExpandButton.tsx | 4 +-- .../{Aside => Sidebar}/index.module.css | 26 ------------------- .../Layout/{Aside => Sidebar}/index.tsx | 6 ++--- .../src/theme/DocPage/Layout/index.tsx | 4 +-- 6 files changed, 11 insertions(+), 37 deletions(-) rename packages/docusaurus-theme-classic/src/theme/DocPage/Layout/{Aside => Sidebar}/ExpandButton.module.css (100%) rename packages/docusaurus-theme-classic/src/theme/DocPage/Layout/{Aside => Sidebar}/ExpandButton.tsx (89%) rename packages/docusaurus-theme-classic/src/theme/DocPage/Layout/{Aside => Sidebar}/index.module.css (62%) rename packages/docusaurus-theme-classic/src/theme/DocPage/Layout/{Aside => Sidebar}/index.tsx (91%) diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index 803123e9904f..6cce03bbf822 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -268,7 +268,7 @@ declare module '@theme/DocPage/Layout' { export default function DocPageLayout(props: Props): JSX.Element; } -declare module '@theme/DocPage/Layout/Aside' { +declare module '@theme/DocPage/Layout/Sidebar' { import type {Dispatch, SetStateAction} from 'react'; import type {PropSidebar} from '@docusaurus/plugin-content-docs'; @@ -278,15 +278,15 @@ declare module '@theme/DocPage/Layout/Aside' { readonly setHiddenSidebarContainer: Dispatch>; } - export default function DocPageLayoutAside(props: Props): JSX.Element; + export default function DocPageLayoutSidebar(props: Props): JSX.Element; } -declare module '@theme/DocPage/Layout/Aside/ExpandButton' { +declare module '@theme/DocPage/Layout/Sidebar/ExpandButton' { export interface Props { toggleSidebar: () => void; } - export default function DocPageLayoutAsideExpandButton( + export default function DocPageLayoutSidebarExpandButton( props: Props, ): JSX.Element; } diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Sidebar/ExpandButton.module.css similarity index 100% rename from packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.module.css rename to packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Sidebar/ExpandButton.module.css diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Sidebar/ExpandButton.tsx similarity index 89% rename from packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.tsx rename to packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Sidebar/ExpandButton.tsx index 7da46d74eae5..69dcd5937e5f 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Sidebar/ExpandButton.tsx @@ -8,11 +8,11 @@ import React from 'react'; import IconArrow from '@theme/IconArrow'; import {translate} from '@docusaurus/Translate'; -import type {Props} from '@theme/DocPage/Layout/Aside/ExpandButton'; +import type {Props} from '@theme/DocPage/Layout/Sidebar/ExpandButton'; import styles from './ExpandButton.module.css'; -export default function DocPageLayoutAsideExpandButton({ +export default function DocPageLayoutSidebarExpandButton({ toggleSidebar, }: Props): JSX.Element { return ( diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/index.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Sidebar/index.module.css similarity index 62% rename from packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/index.module.css rename to packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Sidebar/index.module.css index c387029f1fab..52a371cc3fb2 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/index.module.css +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Sidebar/index.module.css @@ -10,31 +10,11 @@ --doc-sidebar-hidden-width: 30px; } -.docPage, -.docMainContainer { - width: 100%; -} - -.docsWrapper, -.docPage, -.docMainContainer { - display: flex; -} - .docSidebarContainer { display: none; } @media (min-width: 997px) { - .docMainContainer { - flex-grow: 1; - max-width: calc(100% - var(--doc-sidebar-width)); - } - - .docMainContainerEnhanced { - max-width: calc(100% - var(--doc-sidebar-hidden-width)); - } - .docSidebarContainer { display: block; width: var(--doc-sidebar-width); @@ -49,10 +29,4 @@ width: var(--doc-sidebar-hidden-width); cursor: pointer; } - - .docItemWrapperEnhanced { - max-width: calc( - var(--ifm-container-width) + var(--doc-sidebar-width) - ) !important; - } } diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Sidebar/index.tsx similarity index 91% rename from packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/index.tsx rename to packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Sidebar/index.tsx index 6f7477d3de23..438d9f814e79 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Sidebar/index.tsx @@ -8,8 +8,8 @@ import React, {type ReactNode, useState, useCallback} from 'react'; import DocSidebar from '@theme/DocSidebar'; import {useLocation} from '@docusaurus/router'; -import type {Props} from '@theme/DocPage/Layout/Aside'; -import ExpandButton from '@theme/DocPage/Layout/Aside/ExpandButton'; +import type {Props} from '@theme/DocPage/Layout/Sidebar'; +import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton'; import clsx from 'clsx'; import styles from './index.module.css'; @@ -28,7 +28,7 @@ function ResetOnSidebarChange({children}: {children: ReactNode}) { ); } -export default function DocPageLayoutAside({ +export default function DocPageLayoutSidebar({ sidebar, hiddenSidebarContainer, setHiddenSidebarContainer, diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx index 64d445861606..8f95807481fd 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx @@ -9,7 +9,7 @@ import React, {useState} from 'react'; import Layout from '@theme/Layout'; import BackToTopButton from '@theme/BackToTopButton'; import type {Props} from '@theme/DocPage/Layout'; -import DocPageLayoutAside from '@theme/DocPage/Layout/Aside'; +import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar'; import DocPageLayoutMain from '@theme/DocPage/Layout/Main'; import styles from './index.module.css'; @@ -24,7 +24,7 @@ export default function DocPageLayout({children}: Props): JSX.Element {
{sidebar && ( -