[docs] Fix layout shift when streaming the page

mui · Dec 26, 2022 · c665ec3 · c665ec3
1 parent 779a524
commit c665ec3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 27 deletions.
diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js
@@ -18,24 +18,27 @@ import BackToTop from 'docs/src/modules/components/BackToTop';
 const Main = styled('main', {
   shouldForwardProp: (prop) => prop !== 'disableToc',
 })(({ disableToc, theme }) => ({
-  display: 'flex',
   width: '100%',
-  ...(disableToc && {
-    [theme.breakpoints.up('lg')]: {
-      marginRight: '5%',
-    },
-  }),
-  [theme.breakpoints.up('lg')]: {
-    width: 'calc(100% - var(--MuiDocs-navDrawer-width))',
-  },
+  display: 'grid',
+  ...(disableToc
+    ? {
+        [theme.breakpoints.up('lg')]: {
+          marginRight: '5%',
+        },
+      }
+    : {
+        [theme.breakpoints.up('md')]: {
+          gridTemplateColumns: '1fr 242px',
+        },
+      }),
   '& .markdown-body .comment-link': {
     display: 'inline-block',
   },
 }));
 
 const StyledAppContainer = styled(AppContainer, {
-  shouldForwardProp: (prop) => prop !== 'disableAd' && prop !== 'disableToc',
-})(({ disableAd, disableToc, theme }) => {
+  shouldForwardProp: (prop) => prop !== 'disableAd',
+})(({ disableAd, theme }) => {
   return {
     position: 'relative',
     ...(!disableAd && {
@@ -46,15 +49,10 @@ const StyledAppContainer = styled(AppContainer, {
         marginBottom: 40,
       },
     }),
-    ...(!disableToc && {
-      [theme.breakpoints.up('sm')]: {
-        width: 'calc(100% - var(--MuiDocs-toc-width))',
-      },
-      [theme.breakpoints.up('lg')]: {
-        paddingLeft: '60px',
-        paddingRight: '60px',
-      },
-    }),
+    [theme.breakpoints.up('lg')]: {
+      paddingLeft: '60px',
+      paddingRight: '60px',
+    },
   };
 });
 
@@ -105,7 +103,6 @@ function AppLayoutDocs(props) {
         styles={{
           ':root': {
             '--MuiDocs-navDrawer-width': '300px',
-            '--MuiDocs-toc-width': '242px',
           },
         }}
       />
@@ -121,14 +118,14 @@ function AppLayoutDocs(props) {
             Render the TOCs first to avoid layout shift when the HTML is streamed.
             See https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/ for more details.
           */}
-          {disableToc ? null : <AppTableOfContents toc={toc} />}
-          <StyledAppContainer disableAd={disableAd} disableToc={disableToc}>
+          <StyledAppContainer disableAd={disableAd}>
             <ActionsDiv>{location && <EditPage markdownLocation={location} />}</ActionsDiv>
             {children}
             <NoSsr>
               <AppLayoutDocsFooter tableOfContents={toc} />
             </NoSsr>
           </StyledAppContainer>
+          {disableToc ? null : <AppTableOfContents toc={toc} />}
         </Main>
       </AdManager>
       <BackToTop />

diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
@@ -12,18 +12,15 @@ import TableOfContentsBanner from 'docs/src/components/banner/TableOfContentsBan
 
 const Nav = styled('nav')(({ theme }) => ({
   top: 0,
-  order: 1,
-  width: 'var(--MuiDocs-toc-width)',
   paddingLeft: 2, // Fix truncated focus outline style
-  flexShrink: 0,
   position: 'sticky',
   height: '100vh',
   overflowY: 'auto',
   paddingTop: 'calc(var(--MuiDocs-header-height) + 1rem)',
   paddingBottom: theme.spacing(4),
   paddingRight: theme.spacing(4), // We can't use `padding` as stylis-plugin-rtl doesn't swap it
   display: 'none',
-  [theme.breakpoints.up('sm')]: {
+  [theme.breakpoints.up('md')]: {
     display: 'block',
   },
 }));