revise dropdown implementation to use swizzling

Author: paigecalvert

docs/intro-replicated.mdx

@@ -1,5 +1,6 @@
 ---
 pagination_prev: null
+hide_table_of_contents: true
 ---
 
 import ApiAbout from "/docs/partials/vendor-api/_api-about.mdx"

src/components/CopyMarkdown.js

@@ -9,6 +9,7 @@
 
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import styles from './CopyMarkdown.module.css';
+import clsx from 'clsx';
 
 function CopyMarkdown() {
   const [isOpen, setIsOpen] = useState(false);
@@ -18,6 +19,8 @@ function CopyMarkdown() {
   const buttonRef = useRef(null);
   const dropdownRef = useRef(null);
 
+  console.log('CopyMarkdown component mounted');
+
   // Toggle dropdown
   const toggleDropdown = useCallback(() => {
     setIsOpen(prev => !prev);
@@ -137,8 +140,30 @@ function CopyMarkdown() {
 
   // Initialize on client side
   useEffect(() => {
-    // Check if we have markdown content
-    const hasMarkdownContent = !!document.querySelector('.theme-doc-markdown.markdown h1');
+    // More detailed debugging
+    const h1Elements = document.querySelectorAll('h1');
+    console.log('Found h1 elements:', h1Elements);
+    h1Elements.forEach(el => {
+      console.log('H1 element:', el);
+      console.log('H1 text content:', el.textContent);
+      console.log('H1 parent element:', el.parentElement);
+      console.log('Full element tree:', el.closest('article'));
+    });
+
+    // Check for content in multiple ways
+    const hasH1 = document.querySelector('h1');
+    const hasArticle = document.querySelector('article');
+    const hasMainContent = document.querySelector('main');
+    
+    console.log('Detection results:', {
+      hasH1: !!hasH1,
+      hasArticle: !!hasArticle,
+      hasMainContent: !!hasMainContent
+    });
+
+    // Set content flag if we have both an h1 and either an article or main element
+    const hasMarkdownContent = !!hasH1 && (!!hasArticle || !!hasMainContent);
+    console.log('Setting hasContent to:', hasMarkdownContent);
     setHasContent(hasMarkdownContent);
 
     // Set up click outside handler
@@ -177,7 +202,7 @@ function CopyMarkdown() {
     <div className={styles.container}>
       <button 
         ref={buttonRef}
-        className={`${styles.button} ${isCopied ? styles.copied : ''}`}
+        className={clsx(styles.button, isCopied && styles.copied)}
         onClick={!isCopied ? toggleDropdown : undefined}
         aria-expanded={isOpen}
         aria-haspopup="true"
@@ -212,7 +237,7 @@ function CopyMarkdown() {
           aria-orientation="vertical"
         >
           <ul className={styles.list}>
-          <li className={styles.item}>
+            <li className={styles.item}>
               <button 
                 className={styles.actionButton} 
                 onClick={openInChatGpt}

src/components/CopyMarkdown.module.css

@@ -1,7 +1,8 @@
 .container {
   position: relative;
-  display: inline-block;
-  margin-left: auto;
+  display: flex;
+  align-items: center;
+  margin-left: 1rem;
   z-index: 10;
 }
 
@@ -70,7 +71,6 @@
 }
 
 .dropdown {
-  display: block;
   position: absolute;
   top: 100%;
   left: 0;
@@ -220,5 +220,7 @@ html[data-theme='dark'] .actionDescription {
   .container {
     margin-top: 1rem;
     margin-left: 0;
+    flex-direction: column;
+    align-items: flex-start;
   }
 } 

src/theme/DocItem/Layout/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import DocItem from '@theme-original/DocItem';
+import CopyMarkdown from '../../components/CopyMarkdown';
+import styles from './styles.module.css';
+
+export default function DocItemWrapper(props) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.headerContainer}>
+        <h1>{props.content.metadata.title}</h1>
+        <CopyMarkdown />
+      </div>
+      <div className={styles.contentContainer}>
+        <DocItem {...props} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,33 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.headerContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  gap: 1rem;
+  /* Ensure the header stays within article width */
+  max-width: 800px;
+  width: 100%;
+}
+
+.contentContainer {
+  width: 100%;
+}
+
+/* Hide the original h1 from DocItem */
+.contentContainer :global(h1:first-child) {
+  display: none;
+}
+
+/* Responsive styles */
+@media (max-width: 768px) {
+  .headerContainer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}