From a7131eedb3c308956ad70b88c6d5991dba681bf7 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 29 Apr 2022 18:33:24 +0200 Subject: [PATCH] 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 && ( -