complete DocPage refactor

facebook · Apr 29, 2022 · a7131ee · a7131ee
1 parent c5b1c58
commit a7131ee
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 37 deletions.
diff --git 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<SetStateAction<boolean>>;
   }
 
-  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/...Page/Layout/Aside/ExpandButton.module.css → ...ge/Layout/Sidebar/ExpandButton.module.css b/...Page/Layout/Aside/ExpandButton.module.css → ...ge/Layout/Sidebar/ExpandButton.module.css
diff --git a/...eme/DocPage/Layout/Aside/ExpandButton.tsx → ...e/DocPage/Layout/Sidebar/ExpandButton.tsx b/...eme/DocPage/Layout/Aside/ExpandButton.tsx → ...e/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/...eme/DocPage/Layout/Aside/index.module.css → ...e/DocPage/Layout/Sidebar/index.module.css b/...eme/DocPage/Layout/Aside/index.module.css → ...e/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/.../src/theme/DocPage/Layout/Aside/index.tsx → ...rc/theme/DocPage/Layout/Sidebar/index.tsx b/.../src/theme/DocPage/Layout/Aside/index.tsx → ...rc/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
@@ -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 {
       <BackToTopButton />
       <div className={styles.docPage}>
         {sidebar && (
-          <DocPageLayoutAside
+          <DocPageLayoutSidebar
             sidebar={sidebar.items}
             hiddenSidebarContainer={hiddenSidebarContainer}
             setHiddenSidebarContainer={setHiddenSidebarContainer}