Place copy page button in docs sidebar

Author: portdeveloper

docusaurus.config.js

@@ -371,7 +371,12 @@ module.exports = {
         versions: VERSIONS_JSON,
       },
     ],
-    'docusaurus-plugin-copy-page-button',
+    [
+      'docusaurus-plugin-copy-page-button',
+      {
+        injectButton: false,
+      },
+    ],
   ],
   customFields: {},
   themes: [],

package-lock.json

@@ -50,7 +50,7 @@
     "clsx": "^1.1.1",
     "concurrently": "^6.2.0",
     "crowdin": "^3.5.0",
-    "docusaurus-plugin-copy-page-button": "^0.4.2",
+    "docusaurus-plugin-copy-page-button": "^0.6.1",
     "docusaurus-plugin-module-alias": "^0.0.2",
     "docusaurus-plugin-sass": "^0.2.6",
     "fs-extra": "^9.1.0",

package.json

@@ -13,6 +13,7 @@ import React from 'react';
 import clsx from 'clsx';
 import {useWindowSize} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import CopyPageButton from 'docusaurus-plugin-copy-page-button/react';
 import DocItemPaginator from '@theme/DocItem/Paginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
@@ -23,6 +24,7 @@ import DocItemContent from '@theme/DocItem/Content';
 import ContentVisibility from '@theme/ContentVisibility';
 import type {Props} from '@theme/DocItem/Layout';
 import styles from '@docusaurus/theme-classic/lib/theme/DocItem/Layout/styles.module.css';
+import copyPageStyles from './styles.module.css';
 
 // CUSTOM CODE
 import DocDemo from '@components/global/DocDemo';
@@ -86,6 +88,15 @@ export default function DocItemLayout({children, ...props}: Props): JSX.Element
             <article>
               <DocVersionBadge />
               {docTOC.mobile}
+              <div className={copyPageStyles.copyPageArticleAction}>
+                <CopyPageButton
+                  customStyles={{
+                    container: {className: copyPageStyles.copyPageContainer},
+                    button: {className: copyPageStyles.copyPageButton},
+                    dropdown: {className: copyPageStyles.copyPageDropdown},
+                  }}
+                />
+              </div>
               <DocItemContent>{children}</DocItemContent>
               <DocItemFooter />
             </article>

src/theme/DocItem/Layout/index.tsx

@@ -0,0 +1,21 @@
+.copyPageArticleAction {
+  display: flex;
+  justify-content: flex-end;
+  min-height: 37px;
+  margin-bottom: 1rem;
+}
+
+.copyPageContainer {
+  display: inline-block;
+}
+
+.copyPageButton,
+.copyPageDropdown {
+  font-family: var(--ifm-font-family-base);
+}
+
+@media (min-width: 997px) {
+  .copyPageArticleAction {
+    display: none;
+  }
+}

src/theme/DocItem/Layout/styles.module.css

@@ -8,10 +8,12 @@
 
 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();
@@ -28,6 +30,15 @@ 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} />
     </>
   );

src/theme/DocSidebar/index.tsx

@@ -0,0 +1,18 @@
+.copyPageAction {
+  padding: 0 var(--sidebar-spacing-horizontal) 1rem;
+}
+
+.copyPageContainer {
+  display: block;
+  width: 100%;
+}
+
+.copyPageButton {
+  width: 100%;
+  justify-content: space-between;
+  font-family: var(--ifm-font-family-base);
+}
+
+.copyPageDropdown {
+  font-family: var(--ifm-font-family-base);
+}