Refactor classic sidebar and toc

src/theme/DocItem/Layout/index.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { useDoc } from "@docusaurus/theme-common/internal";
+import DocItemPaginator from "@theme/DocItem/Paginator";
+import DocVersionBanner from "@theme/DocVersionBanner";
+import DocVersionBadge from "@theme/DocVersionBadge";
+import DocItemFooter from "@theme/DocItem/Footer";
+import DocItemTOCMobile from "@theme/DocItem/TOC/Mobile";
+import DocItemTOCDesktop from "@theme/DocItem/TOC/Desktop";
+import DocItemContent from "@theme/DocItem/Content";
+import DocBreadcrumbs from "@theme/DocBreadcrumbs";
+import type { Props } from "@theme/DocItem/Layout";
+
+function useDocTOC() {
+  const { frontMatter, toc } = useDoc();
+
+  const hidden = frontMatter.hide_table_of_contents;
+  const canRender = !hidden && toc.length > 0;
+
+  return canRender;
+}
+
+export default function DocItemLayout({ children }: Props) {
+  const canRenderTOC = useDocTOC();
+
+  return (
+    <div className="flex lg:divide-x divide-gray-200 dark:divide-gray-800">
+      <div className="w-full lg:w-9/12 p-4">
+        <DocVersionBanner />
+        <div>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
+            {canRenderTOC && <DocItemTOCMobile />}
+            <DocItemContent>{children}</DocItemContent>
+            <DocItemFooter />
+          </article>
+          <DocItemPaginator />
+        </div>
+      </div>
+      {canRenderTOC && (
+        <div className="hidden lg:flex lg:w-3/12">
+          <DocItemTOCDesktop />
+        </div>
+      )}
+    </div>
+  );
+}

src/theme/DocPage/Layout/Sidebar/index.tsx

@@ -1,16 +1,9 @@
-import React, { type ReactNode, useState, useCallback } from "react";
-import clsx from "clsx";
-import {
-  prefersReducedMotion,
-  ThemeClassNames,
-} from "@docusaurus/theme-common";
+import React, { type ReactNode } from "react";
 import { useDocsSidebar } from "@docusaurus/theme-common/internal";
 import { useLocation } from "@docusaurus/router";
 import DocSidebar from "@theme/DocSidebar";
-import ExpandButton from "@theme/DocPage/Layout/Sidebar/ExpandButton";
-import type { Props } from "@theme/DocPage/Layout/Sidebar";
 
-import styles from "./styles.module.css";
+import type { Props } from "@theme/DocPage/Layout/Sidebar";
 
 // Reset sidebar state when sidebar changes
 // Use React key to unmount/remount the children
@@ -24,57 +17,22 @@ function ResetOnSidebarChange({ children }: { children: ReactNode }) {
   );
 }
 
+type SidebarProps = {
+  sidebar: Props["sidebar"];
+  className?: string;
+};
+
 export default function DocPageLayoutSidebar({
+  className,
   sidebar,
-  hiddenSidebarContainer,
-  setHiddenSidebarContainer,
-}: Props) {
+}: SidebarProps) {
   const { pathname } = useLocation();
 
-  const [hiddenSidebar, setHiddenSidebar] = useState(false);
-  const toggleSidebar = useCallback(() => {
-    if (hiddenSidebar) {
-      setHiddenSidebar(false);
-    }
-    // onTransitionEnd won't fire when sidebar animation is disabled
-    // fixes https://github.com/facebook/docusaurus/issues/8918
-    if (!hiddenSidebar && prefersReducedMotion()) {
-      setHiddenSidebar(true);
-    }
-    setHiddenSidebarContainer((value) => !value);
-  }, [setHiddenSidebarContainer, hiddenSidebar]);
-
   return (
-    <aside
-      className={clsx(
-        ThemeClassNames.docs.docSidebarContainer,
-        styles.docSidebarContainer,
-        hiddenSidebarContainer && styles.docSidebarContainerHidden
-      )}
-      onTransitionEnd={(e) => {
-        if (!e.currentTarget.classList.contains(styles.docSidebarContainer!)) {
-          return;
-        }
-
-        if (hiddenSidebarContainer) {
-          setHiddenSidebar(true);
-        }
-      }}
-    >
+    <aside className={className}>
       <ResetOnSidebarChange>
-        <div
-          className={clsx(
-            styles.sidebarViewport,
-            hiddenSidebar && styles.sidebarViewportHidden
-          )}
-        >
-          <DocSidebar
-            sidebar={sidebar}
-            path={pathname}
-            onCollapse={toggleSidebar}
-            isHidden={hiddenSidebar}
-          />
-          {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
+        <div className="p-2 xl:p-4 text-sm xl:text-base w-full">
+          <DocSidebar sidebar={sidebar} path={pathname} />
         </div>
       </ResetOnSidebarChange>
     </aside>

src/theme/DocPage/Layout/index.tsx

@@ -1,28 +1,24 @@
-import React, { useState } from "react";
+import React from "react";
 import { useDocsSidebar } from "@docusaurus/theme-common/internal";
 import Layout from "@theme/Layout";
 import BackToTopButton from "@theme/BackToTopButton";
 import DocPageLayoutSidebar from "@theme/DocPage/Layout/Sidebar";
-import DocPageLayoutMain from "@theme/DocPage/Layout/Main";
 import type { Props } from "@theme/DocPage/Layout";
 
 export default function DocPageLayout({ children }: Props) {
   const sidebar = useDocsSidebar();
-  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
+
   return (
     <Layout wrapperClassName="border-t border-b border-gray-200 dark:border-gray-800">
       <BackToTopButton />
-      <div className="container mx-auto flex divide-x divide-gray-200 dark:divide-gray-800">
+      <div className="container mx-auto flex lg:divide-x divide-gray-200 dark:divide-gray-800">
         {sidebar && (
           <DocPageLayoutSidebar
             sidebar={sidebar.items}
-            hiddenSidebarContainer={hiddenSidebarContainer}
-            setHiddenSidebarContainer={setHiddenSidebarContainer}
+            className="hidden lg:flex lg:w-1/5"
           />
         )}
-        <DocPageLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
-          {children}
-        </DocPageLayoutMain>
+        <main className="w-full lg:w-4/5">{children}</main>
       </div>
     </Layout>
   );