miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

fix(nx-dev): make toc sticky (#29784)

Browse Source 
Makes sidebar table of contents not overlap the footer

Fixes #29719
This commit is contained in:
Isaac Mann 2025-01-28 13:43:19 -05:00 committed by GitHub
parent 5aec542774
commit 67f12a2d7a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 62 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
View File

@ -115,72 +115,76 @@ export function DocViewer({
</div> </div>
<div className="min-w-0 flex-auto pb-24 lg:pb-16"> <div className="min-w-0 flex-auto pb-24 lg:pb-16">
{/*MAIN CONTENT*/} {/*MAIN CONTENT*/}
<div className="relative"> <div className="flex justify-between">
<div <div className="relative">
ref={ref}
data-document="main"
className={cx(
'prose prose-slate dark:prose-invert w-full max-w-none 2xl:max-w-4xl',
{ 'xl:max-w-2xl': !hideTableOfContent }
)}
>
{vm.content}
</div>
{!hideTableOfContent && (
<div <div
ref={ref}
data-document="main"
className={cx( className={cx(
'fixed right-[max(2rem,calc(50%-55rem))] top-44 z-20 hidden w-60 space-y-6 overflow-y-auto bg-white text-sm xl:block dark:bg-slate-900' 'prose prose-slate dark:prose-invert w-full max-w-none 2xl:max-w-4xl',
{ 'xl:max-w-2xl': !hideTableOfContent }
)} )}
> >
{widgetData.githubStarsCount > 0 && ( {vm.content}
<div className="px-6"> </div>
<GitHubStarWidget </div>
starsCount={widgetData.githubStarsCount} {!hideTableOfContent && (
/> <div>
</div> <div
)} className={cx(
<TableOfContents 'sticky top-2 z-20 ml-[max(2rem,calc(50%-8rem))] hidden w-60 space-y-6 overflow-y-auto bg-white text-sm xl:block dark:bg-slate-900'
elementRef={ref} )}
path={router.basePath}
headings={vm.tableOfContent}
document={document}
> >
<> {widgetData.githubStarsCount > 0 && (
<div className="my-4 flex items-center justify-center space-x-2 rounded-md border border-slate-200 pl-2 pr-2 hover:border-slate-400 dark:border-slate-700 print:hidden"> <div className="px-6">
<button <GitHubStarWidget
type="button" starsCount={widgetData.githubStarsCount}
aria-label="Give feedback on this page" />
title="Give feedback of this page"
className="whitespace-nowrap border-transparent px-4 py-2 font-bold hover:text-slate-900 dark:hover:text-sky-400"
onClick={() => setShowFeedback(true)}
>
Feedback
</button>
</div> </div>
<div className="my-4 flex items-center justify-center space-x-2 rounded-md border border-slate-200 pl-2 pr-2 hover:border-slate-400 dark:border-slate-700 print:hidden"> )}
{document.filePath ? ( <TableOfContents
<a elementRef={ref}
aria-hidden="true" path={router.basePath}
href={[ headings={vm.tableOfContent}
'https://github.com/nrwl/nx/blob/master', document={document}
document.filePath >
.replace( <>
'nx-dev/nx-dev/public/documentation', <div className="my-4 flex items-center justify-center space-x-2 rounded-md border border-slate-200 pl-2 pr-2 hover:border-slate-400 dark:border-slate-700 print:hidden">
'docs' <button
) type="button"
.replace('public/documentation', 'docs'), aria-label="Give feedback on this page"
].join('/')} title="Give feedback of this page"
target="_blank"
rel="noreferrer"
title="Edit this page on GitHub"
className="whitespace-nowrap border-transparent px-4 py-2 font-bold hover:text-slate-900 dark:hover:text-sky-400" className="whitespace-nowrap border-transparent px-4 py-2 font-bold hover:text-slate-900 dark:hover:text-sky-400"
onClick={() => setShowFeedback(true)}
> >
Edit this page Feedback
</a> </button>
) : null} </div>
</div> <div className="my-4 flex items-center justify-center space-x-2 rounded-md border border-slate-200 pl-2 pr-2 hover:border-slate-400 dark:border-slate-700 print:hidden">
</> {document.filePath ? (
</TableOfContents> <a
aria-hidden="true"
href={[
'https://github.com/nrwl/nx/blob/master',
document.filePath
.replace(
'nx-dev/nx-dev/public/documentation',
'docs'
)
.replace('public/documentation', 'docs'),
].join('/')}
target="_blank"
rel="noreferrer"
title="Edit this page on GitHub"
className="whitespace-nowrap border-transparent px-4 py-2 font-bold hover:text-slate-900 dark:hover:text-sky-400"
>
Edit this page
</a>
) : null}
</div>
</>
</TableOfContents>
</div>
</div> </div>
)} )}
</div> </div>