Move copy-page button from left sidebar to top of TOC (right sidebar)

Author: portdeveloper

src/theme/DocItem/TOC/Desktop/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * Wraps the original DocItem/TOC/Desktop to render the page-level
+ * copy/AI dropdown above the "Contents" heading in the right sidebar.
+ */
+
+import React from 'react';
+import CopyPageButton from 'docusaurus-plugin-copy-page-button/react';
+import TOCDesktop from '@theme-original/DocItem/TOC/Desktop';
+
+import styles from './styles.module.css';
+
+export default function TOCDesktopWrapper(): JSX.Element {
+  return (
+    <>
+      <div className={styles.copyPageAction}>
+        <CopyPageButton
+          customStyles={{
+            container: { className: styles.copyPageContainer },
+            button: { className: styles.copyPageButton },
+            dropdown: { className: styles.copyPageDropdown },
+          }}
+        />
+      </div>
+      <TOCDesktop />
+    </>
+  );
+}

src/theme/DocSidebar/styles.module.css …me/DocItem/TOC/Desktop/styles.module.csssrc/theme/DocSidebar/styles.module.css renamed to src/theme/DocItem/TOC/Desktop/styles.module.css src/theme/DocSidebar/styles.module.css renamed to src/theme/DocItem/TOC/Desktop/styles.module.css

@@ -1,5 +1,5 @@
 .copyPageAction {
-  padding: 0 var(--sidebar-spacing-horizontal) 1rem;
+  margin-bottom: 1rem;
 }
 
 .copyPageContainer {

src/theme/DocSidebar/index.tsx

@@ -8,12 +8,10 @@
 
 import React, { useEffect } from 'react';
 import { useLocation } from '@docusaurus/router';
-import CopyPageButton from 'docusaurus-plugin-copy-page-button/react';
 import DocSidebar from '@theme-original/DocSidebar';
 import type { Props } from '@theme/DocSidebar';
 
 import Logo from '@theme-original/Logo';
-import styles from './styles.module.css';
 
 export default function DocSidebarWrapper(props: Props): JSX.Element {
   const location = useLocation();
@@ -30,15 +28,6 @@ export default function DocSidebarWrapper(props: Props): JSX.Element {
   return (
     <>
       <Logo />
-      <div className={styles.copyPageAction}>
-        <CopyPageButton
-          customStyles={{
-            container: { className: styles.copyPageContainer },
-            button: { className: styles.copyPageButton },
-            dropdown: { className: styles.copyPageDropdown },
-          }}
-        />
-      </div>
       <DocSidebar {...props} />
     </>
   );