Skip to content

Commit 5e99d9c

Browse files
Elvis Saraviaclaude
authored and
Elvis Saravia
committed
Improve CopyPageDropdown UI and alignment
- Fix button alignment with page content - Add theme-aware hover effects for dropdown items - Light mode: rgba(0, 0, 0, 0.05) - Dark mode: rgba(255, 255, 255, 0.1) - Fix main button dark mode hover (was showing white, now shows proper dark gray) - Add external link icons to "Open in Claude" and "Open in ChatGPT" options - Add border radius to menu items for smoother hover appearance - Improve button layout with flex for better icon alignment 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 9d51039 commit 5e99d9c

2 files changed

Lines changed: 72 additions & 30 deletions

File tree

‎components/CopyPageDropdown.tsx‎

Lines changed: 57 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,17 @@ const CopyPageDropdown: React.FC = () => {
66
const [showMarkdownModal, setShowMarkdownModal] = useState(false);
77
const [markdownContent, setMarkdownContent] = useState('');
88
const [copyStatus, setCopyStatus] = useState<'idle' | 'copying' | 'success'>('idle');
9+
const [hoveredButton, setHoveredButton] = useState<string | null>(null);
910
const router = useRouter();
1011

12+
// Helper to get hover background color based on theme
13+
const getHoverBg = (buttonId: string) => {
14+
if (hoveredButton !== buttonId) return 'transparent';
15+
// Check if dark mode (this works with Nextra's dark mode)
16+
const isDark = document.documentElement.classList.contains('dark');
17+
return isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)';
18+
};
19+
1120
// Get current page path
1221
const getPagePath = (): string => {
1322
const pathname = router.pathname;
@@ -109,26 +118,20 @@ const CopyPageDropdown: React.FC = () => {
109118
<div style={{ position: 'relative', display: 'inline-block' }}>
110119
<button
111120
onClick={() => setIsOpen(!isOpen)}
121+
className="hover:nx-bg-gray-100 dark:hover:nx-bg-neutral-800 nx-border nx-border-gray-200 dark:nx-border-neutral-700"
112122
style={{
113123
display: 'inline-flex',
114124
alignItems: 'center',
115125
gap: '6px',
116126
padding: '6px 12px',
117127
backgroundColor: 'transparent',
118-
border: '1px solid #e5e7eb',
119128
borderRadius: '6px',
120129
fontSize: '0.875rem',
121130
fontWeight: 500,
122131
cursor: 'pointer',
123132
color: 'inherit',
124133
transition: 'all 0.2s ease',
125134
}}
126-
onMouseOver={(e) => {
127-
e.currentTarget.style.backgroundColor = '#f3f4f6';
128-
}}
129-
onMouseOut={(e) => {
130-
e.currentTarget.style.backgroundColor = 'transparent';
131-
}}
132135
>
133136
<svg
134137
width="16"
@@ -180,20 +183,22 @@ const CopyPageDropdown: React.FC = () => {
180183
<button
181184
onClick={handleCopyAsMarkdown}
182185
disabled={copyStatus === 'copying'}
183-
className="hover:nx-bg-gray-100 dark:hover:nx-bg-neutral-800"
186+
onMouseEnter={() => setHoveredButton('copy')}
187+
onMouseLeave={() => setHoveredButton(null)}
184188
style={{
185189
width: '100%',
186190
display: 'flex',
187191
alignItems: 'center',
188192
gap: '8px',
189193
padding: '10px 12px',
190-
backgroundColor: 'transparent',
194+
backgroundColor: getHoverBg('copy'),
191195
border: 'none',
196+
borderRadius: '6px',
192197
fontSize: '0.875rem',
193198
cursor: copyStatus === 'copying' ? 'wait' : 'pointer',
194199
textAlign: 'left',
195200
color: 'inherit',
196-
transition: 'background-color 0.2s ease',
201+
transition: 'background-color 0.15s ease',
197202
}}
198203
>
199204
<svg
@@ -221,20 +226,22 @@ const CopyPageDropdown: React.FC = () => {
221226

222227
<button
223228
onClick={handleOpenInClaude}
224-
className="hover:nx-bg-gray-100 dark:hover:nx-bg-neutral-800"
229+
onMouseEnter={() => setHoveredButton('claude')}
230+
onMouseLeave={() => setHoveredButton(null)}
225231
style={{
226232
width: '100%',
227233
display: 'flex',
228234
alignItems: 'center',
229235
gap: '8px',
230236
padding: '10px 12px',
231-
backgroundColor: 'transparent',
237+
backgroundColor: getHoverBg('claude'),
232238
border: 'none',
239+
borderRadius: '6px',
233240
fontSize: '0.875rem',
234241
cursor: 'pointer',
235242
textAlign: 'left',
236243
color: 'inherit',
237-
transition: 'background-color 0.2s ease',
244+
transition: 'background-color 0.15s ease',
238245
}}
239246
>
240247
<svg
@@ -246,30 +253,47 @@ const CopyPageDropdown: React.FC = () => {
246253
>
247254
<path d="M 233.959793 800.214905 L 468.644287 668.536987 L 472.590637 657.100647 L 468.644287 650.738403 L 457.208069 650.738403 L 417.986633 648.322144 L 283.892639 644.69812 L 167.597321 639.865845 L 54.926208 633.825623 L 26.577238 627.785339 L 3.3e-05 592.751709 L 2.73832 575.27533 L 26.577238 559.248352 L 60.724873 562.228149 L 136.187973 567.382629 L 249.422867 575.194763 L 331.570496 580.026978 L 453.261841 592.671082 L 472.590637 592.671082 L 475.328857 584.859009 L 468.724915 580.026978 L 463.570557 575.194763 L 346.389313 495.785217 L 219.543671 411.865906 L 153.100723 363.543762 L 117.181267 339.060425 L 99.060455 316.107361 L 91.248367 266.01355 L 123.865784 230.093994 L 167.677887 233.073853 L 178.872513 236.053772 L 223.248367 270.201477 L 318.040283 343.570496 L 441.825592 434.738342 L 459.946411 449.798706 L 467.194672 444.64447 L 468.080597 441.020203 L 459.946411 427.409485 L 392.617493 305.718323 L 320.778564 181.932983 L 288.80542 130.630859 L 280.348999 99.865845 C 277.369171 87.221436 275.194641 76.590698 275.194641 63.624268 L 312.322174 13.20813 L 332.8591 6.604126 L 382.389313 13.20813 L 403.248352 31.328979 L 434.013519 101.71814 L 483.865753 212.537048 L 561.181274 363.221497 L 583.812134 407.919434 L 595.892639 449.315491 L 600.40271 461.959839 L 608.214783 461.959839 L 608.214783 454.711609 L 614.577271 369.825623 L 626.335632 265.61084 L 637.771851 131.516846 L 641.718201 93.745117 L 660.402832 48.483276 L 697.530334 24.000122 L 726.52356 37.852417 L 750.362549 72 L 747.060486 94.067139 L 732.886047 186.201416 L 705.100708 330.52356 L 686.979919 427.167847 L 697.530334 427.167847 L 709.61084 415.087341 L 758.496704 350.174561 L 840.644348 247.490051 L 876.885925 206.738342 L 919.167847 161.71814 L 946.308838 140.29541 L 997.61084 140.29541 L 1035.38269 196.429626 L 1018.469849 254.416199 L 965.637634 321.422852 L 921.825562 378.201538 L 859.006714 462.765259 L 819.785278 530.41626 L 823.409424 535.812073 L 832.75177 534.92627 L 974.657776 504.724915 L 1051.328979 490.872559 L 1142.818848 475.167786 L 1184.214844 494.496582 L 1188.724854 514.147644 L 1172.456421 554.335693 L 1074.604126 578.496765 L 959.838989 601.449829 L 788.939636 641.879272 L 786.845764 643.409485 L 789.261841 646.389343 L 866.255127 653.637634 L 899.194702 655.409424 L 979.812134 655.409424 L 1129.932861 666.604187 L 1169.154419 692.537109 L 1192.671265 724.268677 L 1188.724854 748.429688 L 1128.322144 779.194641 L 1046.818848 759.865845 L 856.590759 714.604126 L 791.355774 698.335754 L 782.335693 698.335754 L 782.335693 703.731567 L 836.69812 756.885986 L 936.322205 846.845581 L 1061.073975 962.81897 L 1067.436279 991.490112 L 1051.409424 1014.120911 L 1034.496704 1011.704712 L 924.885986 929.234924 L 882.604126 892.107544 L 786.845764 811.48999 L 780.483276 811.48999 L 780.483276 819.946289 L 802.550415 852.241699 L 919.087341 1027.409424 L 925.127625 1081.127686 L 916.671204 1098.604126 L 886.469849 1109.154419 L 853.288696 1103.114136 L 785.073914 1007.355835 L 714.684631 899.516785 L 657.906067 802.872498 L 650.979858 806.81897 L 617.476624 1167.704834 L 601.771851 1186.147705 L 565.530212 1200 L 535.328857 1177.046997 L 519.302124 1139.919556 L 535.328857 1066.550537 L 554.657776 970.792053 L 570.362488 894.68457 L 584.536926 800.134277 L 592.993347 768.724976 L 592.429626 766.630859 L 585.503479 767.516968 L 514.22821 865.369263 L 405.825531 1011.865906 L 320.053711 1103.677979 L 299.516815 1111.812256 L 263.919525 1093.369263 L 267.221497 1060.429688 L 287.114136 1031.114136 L 405.825531 880.107361 L 477.422913 786.52356 L 523.651062 732.483276 L 523.328918 724.671265 L 520.590698 724.671265 L 205.288605 929.395935 L 149.154434 936.644409 L 124.993355 914.01355 L 127.973183 876.885986 L 139.409409 864.80542 L 234.201385 799.570435 L 233.879227 799.8927 Z" />
248255
</svg>
249-
<div>
256+
<div style={{ flex: 1 }}>
250257
<div style={{ fontWeight: 500 }}>Open in Claude</div>
251258
<div className="nx-text-gray-500 dark:nx-text-gray-400" style={{ fontSize: '0.75rem' }}>
252259
Ask questions about this page
253260
</div>
254261
</div>
262+
<svg
263+
width="14"
264+
height="14"
265+
viewBox="0 0 24 24"
266+
fill="none"
267+
stroke="currentColor"
268+
strokeWidth="2"
269+
strokeLinecap="round"
270+
strokeLinejoin="round"
271+
style={{ opacity: 0.5 }}
272+
>
273+
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
274+
<polyline points="15 3 21 3 21 9"></polyline>
275+
<line x1="10" y1="14" x2="21" y2="3"></line>
276+
</svg>
255277
</button>
256278

257279
<button
258280
onClick={handleOpenInChatGPT}
259-
className="hover:nx-bg-gray-100 dark:hover:nx-bg-neutral-800"
281+
onMouseEnter={() => setHoveredButton('chatgpt')}
282+
onMouseLeave={() => setHoveredButton(null)}
260283
style={{
261284
width: '100%',
262285
display: 'flex',
263286
alignItems: 'center',
264287
gap: '8px',
265288
padding: '10px 12px',
266-
backgroundColor: 'transparent',
289+
backgroundColor: getHoverBg('chatgpt'),
267290
border: 'none',
291+
borderRadius: '6px',
268292
fontSize: '0.875rem',
269293
cursor: 'pointer',
270294
textAlign: 'left',
271295
color: 'inherit',
272-
transition: 'background-color 0.2s ease',
296+
transition: 'background-color 0.15s ease',
273297
}}
274298
>
275299
<svg
@@ -281,12 +305,27 @@ const CopyPageDropdown: React.FC = () => {
281305
>
282306
<path d="m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z" />
283307
</svg>
284-
<div>
308+
<div style={{ flex: 1 }}>
285309
<div style={{ fontWeight: 500 }}>Open in ChatGPT</div>
286310
<div className="nx-text-gray-500 dark:nx-text-gray-400" style={{ fontSize: '0.75rem' }}>
287311
Ask questions about this page
288312
</div>
289313
</div>
314+
<svg
315+
width="14"
316+
height="14"
317+
viewBox="0 0 24 24"
318+
fill="none"
319+
stroke="currentColor"
320+
strokeWidth="2"
321+
strokeLinecap="round"
322+
strokeLinejoin="round"
323+
style={{ opacity: 0.5 }}
324+
>
325+
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
326+
<polyline points="15 3 21 3 21 9"></polyline>
327+
<line x1="10" y1="14" x2="21" y2="3"></line>
328+
</svg>
290329
</button>
291330
</div>
292331
)}

‎theme.config.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -96,18 +96,21 @@ const config: DocsThemeConfig = {
9696

9797
return (
9898
<>
99-
{isEnglishPage && (
100-
<div style={{
101-
display: 'flex',
102-
justifyContent: 'flex-end',
103-
marginBottom: '16px',
104-
position: 'relative',
105-
zIndex: 10
106-
}}>
107-
<CopyPageDropdown />
108-
</div>
109-
)}
110-
{children}
99+
<div>
100+
{isEnglishPage && (
101+
<div style={{
102+
display: 'flex',
103+
justifyContent: 'flex-end',
104+
marginBottom: '16px',
105+
position: 'relative',
106+
zIndex: 10,
107+
maxWidth: '100%'
108+
}}>
109+
<CopyPageDropdown />
110+
</div>
111+
)}
112+
{children}
113+
</div>
111114
</>
112115
);
113116
},

0 commit comments

Comments
 (0)