[docs] Wide docs layout

docs/pages/material-ui/react-table.js

@@ -3,7 +3,7 @@ import AppFrame from 'docs/src/modules/components/AppFrame';
 import * as pageProps from 'docs/data/material/components/table/table.md?muiMarkdown';
 
 export default function Page() {
-  return <MarkdownDocs {...pageProps} />;
+  return <MarkdownDocs {...pageProps} wideLayout />;
 }
 
 Page.getLayout = (page) => {

docs/src/components/banner/TableOfContentsBanner.tsx → docs/src/components/banner/SideNavigationBanner.tsx

@@ -3,16 +3,13 @@ import Typography from '@mui/material/Typography';
 import { alpha } from '@mui/material/styles';
 import { Link } from '@mui/docs/Link';
 
-export default function TableOfContentsBanner() {
+export default function SideNavigationBanner() {
   return (
     <Link
       href="https://u24.gov.ua/about/"
       target="_blank"
       sx={[
         (theme) => ({
-          mt: 2,
-          mx: 0.5,
-          mb: 2,
           p: 1,
           pl: '10px',
           display: 'flex',

docs/src/modules/components/AppLayoutDocs.js

@@ -15,15 +15,14 @@ import Head from 'docs/src/modules/components/Head';
 import AppFrame from 'docs/src/modules/components/AppFrame';
 import AppContainer from 'docs/src/modules/components/AppContainer';
 import AppTableOfContents from 'docs/src/modules/components/AppTableOfContents';
+import { TOC_WIDTH } from 'docs/src/modules/components/TableOfContents';
 import AppLayoutDocsFooter from 'docs/src/modules/components/AppLayoutDocsFooter';
 import BackToTop from 'docs/src/modules/components/BackToTop';
 import getProductInfoFromUrl from '@mui/docs/getProductInfoFromUrl';
 import { convertProductIdToName } from 'docs/src/modules/components/AppSearch';
 
-const TOC_WIDTH = 242;
-
 const Main = styled('main', {
-  shouldForwardProp: (prop) => prop !== 'disableToc',
+  shouldForwardProp: (prop) => prop !== 'disableToc' && prop !== 'wideLayout',
 })(({ theme }) => ({
   minHeight: '100vh',
   display: 'grid',
@@ -35,24 +34,39 @@ const Main = styled('main', {
     {
       props: ({ disableToc }) => disableToc,
       style: {
-        [theme.breakpoints.up('md')]: {
+        [theme.breakpoints.up('lg')]: {
           marginRight: TOC_WIDTH / 2,
         },
       },
     },
     {
-      props: ({ disableToc }) => !disableToc,
+      props: ({ disableToc, wideLayout }) => !disableToc && !wideLayout,
       style: {
+        [theme.breakpoints.up('sm')]: {
+          gridTemplateColumns: '1fr auto',
+        },
         [theme.breakpoints.up('md')]: {
           gridTemplateColumns: `1fr ${TOC_WIDTH}px`,
         },
       },
     },
+    {
+      props: ({ disableToc, wideLayout }) => !disableToc && wideLayout,
+      style: {
+        [theme.breakpoints.up('sm')]: {
+          gridTemplateColumns: '1fr auto',
+        },
+        [`@media (min-width:${theme.breakpoints.values.xl + TOC_WIDTH}px)`]: {
+          gridTemplateColumns: `1fr ${TOC_WIDTH}px`,
+        },
+      },
+    },
   ],
 }));
 
 const StyledAppContainer = styled(AppContainer, {
-  shouldForwardProp: (prop) => prop !== 'disableAd' && prop !== 'hasTabs' && prop !== 'disableToc',
+  shouldForwardProp: (prop) =>
+    prop !== 'disableAd' && prop !== 'hasTabs' && prop !== 'disableToc' && prop !== 'wideLayout',
 })(({ theme }) => {
   return {
     position: 'relative',
@@ -65,21 +79,30 @@ const StyledAppContainer = styled(AppContainer, {
     },
     variants: [
       {
-        props: ({ disableToc }) => disableToc,
+        props: ({ disableToc, wideLayout }) => disableToc && !wideLayout,
         style: {
           // 105ch ≈ 930px
           maxWidth: `calc(105ch + ${TOC_WIDTH / 2}px)`,
         },
       },
       {
-        props: ({ disableToc }) => !disableToc,
+        props: ({ disableToc, wideLayout }) => !disableToc && !wideLayout,
         style: {
           // We're mostly hosting text content so max-width by px does not make sense considering font-size is system-adjustable.
           fontFamily: 'Arial',
           // 105ch ≈ 930px
           maxWidth: '105ch',
         },
       },
+      {
+        props: ({ disableToc, wideLayout }) => !disableToc && wideLayout,
+        style: {
+          maxWidth: theme.breakpoints.values.xl,
+          '& p, & li': {
+            maxWidth: '105ch',
+          },
+        },
+      },
       {
         props: ({ disableAd, hasTabs }) => !disableAd && hasTabs,
         style: {
@@ -127,6 +150,7 @@ export default function AppLayoutDocs(props) {
     // improves the UX. It's faster to transition, and you don't lose UI states, like scroll.
     disableLayout = false,
     disableToc = false,
+    wideLayout = false,
     hasTabs = false,
     location,
     title,
@@ -161,16 +185,21 @@ export default function AppLayoutDocs(props) {
           description={description}
           card={card}
         />
-        <Main disableToc={disableToc}>
+        <Main disableToc={disableToc} wideLayout={wideLayout}>
           {/*
             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.
           */}
-          <StyledAppContainer disableAd={disableAd} hasTabs={hasTabs} disableToc={disableToc}>
+          <StyledAppContainer
+            disableAd={disableAd}
+            hasTabs={hasTabs}
+            disableToc={disableToc}
+            wideLayout={wideLayout}
+          >
             {children}
             <AppLayoutDocsFooter tableOfContents={toc} location={location} />
           </StyledAppContainer>
-          {disableToc ? null : <AppTableOfContents toc={toc} />}
+          {disableToc ? null : <AppTableOfContents toc={toc} wideLayout={wideLayout} />}
           <BackToTop />
         </Main>
       </AdManager>
@@ -185,6 +214,7 @@ AppLayoutDocs.propTypes = {
     title: PropTypes.string,
   }),
   children: PropTypes.node.isRequired,
+  wideLayout: PropTypes.bool,
   description: PropTypes.string.isRequired,
   disableAd: PropTypes.bool.isRequired,
   disableLayout: PropTypes.bool,

docs/src/modules/components/AppNavDrawer.tsx

@@ -24,6 +24,8 @@ import { pageToTitleI18n } from '@mui/docs/helpers';
 import PageContext, { ProductVersion } from '@mui/docs/PageContext';
 import { useTranslate } from '@mui/docs/i18n';
 import MuiProductSelector from 'docs/src/modules/components/MuiProductSelector';
+import DiamondSponsors from 'docs/src/modules/components/DiamondSponsors';
+import SideNavigationBanner from 'docs/src/components/banner/SideNavigationBanner';
 import { MuiPage } from '@mui/docs/MuiPage';
 
 // TODO: Collapse should expose an API to customize the duration based on the height.
@@ -468,10 +470,10 @@ export default function AppNavDrawer(props: AppNavDrawerProps) {
         </ToolbarDiv>
         <Box
           sx={{
-            pt: 0.5,
-            pb: 5,
-            overflowY: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
             flexGrow: 1,
+            overflow: 'hidden',
             ...(swipeableDrawer
               ? {}
               : {
@@ -480,9 +482,33 @@ export default function AppNavDrawer(props: AppNavDrawerProps) {
                 }),
           }}
         >
-          <PersistScroll slot="side" enabled>
-            {navItems}
-          </PersistScroll>
+          <Box
+            sx={{
+              pt: 0.5,
+              pb: 5,
+              overflowY: 'auto',
+              flexGrow: 1,
+              scrollbarWidth: 'thin',
+            }}
+          >
+            <PersistScroll slot="side" enabled>
+              {navItems}
+            </PersistScroll>
+          </Box>
+          <Box
+            sx={{
+              flexShrink: 0,
+              borderTop: '1px solid',
+              borderColor: 'divider',
+              p: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 1,
+            }}
+          >
+            <DiamondSponsors />
+            <SideNavigationBanner />
+          </Box>
         </Box>
       </React.Fragment>
     );