diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js
index 6fbb7976265f8f..abcea11d00786b 100644
--- 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',
+ display: 'grid',
width: '100%',
- ...(disableToc && {
- [theme.breakpoints.up('lg')]: {
- marginRight: '5%',
- },
- }),
- [theme.breakpoints.up('lg')]: {
- width: 'calc(100% - var(--MuiDocs-navDrawer-width))',
- },
+ ...(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 : }
-
+
{location && }
{children}
+ {disableToc ? null : }
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index ff9aaafc74dcaa..c7808a54052126 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -12,10 +12,7 @@ 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',
@@ -23,7 +20,7 @@ const Nav = styled('nav')(({ theme }) => ({
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',
},
}));