From b9c901b58e42bcc333f55943682f2f2c039f67de Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Mon, 3 Apr 2023 12:15:30 -0400
Subject: [PATCH] feat(nx-dev): display toc for smaller viewport sizes (#16061)

---
 .../feature-doc-viewer/src/lib/doc-viewer.tsx | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx b/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
index 7d889fbd946f3..dfd1f2508dd01 100644
--- a/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
+++ b/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
@@ -8,6 +8,7 @@ import { Breadcrumbs, Footer } from '@nrwl/nx-dev/ui-common';
 import { renderMarkdown } from '@nrwl/nx-dev/ui-markdoc';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
+import { cx } from 'nx-dev/ui-primitives';
 import { useRef } from 'react';
 import { collectHeadings, TableOfContents } from './table-of-contents';
 
@@ -19,6 +20,7 @@ export function DocViewer({
   relatedDocuments: RelatedDocument[];
 }): JSX.Element {
   const router = useRouter();
+  const isIntro = router.asPath.includes('/getting-started/intro');
   const ref = useRef<HTMLDivElement | null>(null);
 
   const { metadata, node, treeNode } = renderMarkdown(
@@ -86,17 +88,26 @@ export function DocViewer({
               <div
                 ref={ref}
                 data-document="main"
-                className="prose prose-slate dark:prose-invert w-full max-w-none 2xl:max-w-4xl"
+                className={cx(
+                  'prose prose-slate dark:prose-invert w-full max-w-none 2xl:max-w-4xl',
+                  { 'xl:max-w-2xl': !isIntro }
+                )}
               >
                 {vm.content}
               </div>
-              <div className="fixed top-36 right-[max(4rem,calc(50%-55rem))] z-20 hidden w-60 overflow-y-auto bg-white py-10 text-sm dark:bg-slate-900 2xl:block">
-                <TableOfContents
-                  elementRef={ref}
-                  path={router.basePath}
-                  headings={vm.tableOfContent}
-                />
-              </div>
+              {!isIntro && (
+                <div
+                  className={cx(
+                    'fixed top-36 right-[max(4rem,calc(50%-55rem))] z-20 hidden w-60 overflow-y-auto bg-white py-10 text-sm dark:bg-slate-900 xl:block'
+                  )}
+                >
+                  <TableOfContents
+                    elementRef={ref}
+                    path={router.basePath}
+                    headings={vm.tableOfContent}
+                  />
+                </div>
+              )}
             </div>
             {/*RELATED CONTENT*/}
             <div