miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 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 className="min-w-0 flex-auto pb-24 lg:pb-16">
{/*MAIN CONTENT*/}
<div className="relative">
<div
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 className="flex justify-between">
<div className="relative">
<div
ref={ref}
data-document="main"
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 && (
<div className="px-6">
<GitHubStarWidget
starsCount={widgetData.githubStarsCount}
/>
</div>
)}
<TableOfContents
elementRef={ref}
path={router.basePath}
headings={vm.tableOfContent}
document={document}
{vm.content}
</div>
</div>
{!hideTableOfContent && (
<div>
<div
className={cx(
'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'
)}
>
<>
<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">
<button
type="button"
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>
{widgetData.githubStarsCount > 0 && (
<div className="px-6">
<GitHubStarWidget
starsCount={widgetData.githubStarsCount}
/>
</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 ? (
<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"
)}
<TableOfContents
elementRef={ref}
path={router.basePath}
headings={vm.tableOfContent}
document={document}
>
<>
<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">
<button
type="button"
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)}
>
Edit this page
</a>
) : null}
</div>
</>
</TableOfContents>
Feedback
</button>
</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 ? (
<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>