mui · oliviertassinari · Jan 5, 2020 · Sep 6, 2019 · Dec 23, 2019 · Dec 24, 2019
diff --git a/crowdin.yml b/crowdin.yml
@@ -5,8 +5,8 @@ files:
       - /docs/src/pages/getting-started/templates/*/**/*
       - /docs/src/pages/premium-themes/*/**/*
       - /docs/src/pages/discover-more/backers/*
-      - /docs/src/pages/discover-more/governance/*
       - /docs/src/pages/discover-more/roadmap/*
+      - /docs/src/pages/company/*
     translation: /%original_path%/%file_name%-%two_letters_code%.%file_extension%
   - source: /docs/translations/*.json
     ignore:

diff --git a/docs/pages/company/about.js b/docs/pages/company/about.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
+
+const req = require.context('docs/src/pages/company/about', false, /\.(md|js|tsx)$/);
+const reqSource = require.context(
+  '!raw-loader!../../src/pages/company/about',
+  false,
+  /\.(js|tsx)$/,
+);
+const reqPrefix = 'pages/company/about';
+
+export default function Page() {
+  return <TopLayoutCompany req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+}
diff --git a/docs/pages/company/contact.js b/docs/pages/company/contact.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
+
+const req = require.context('docs/src/pages/company/contact', false, /\.(md|js|tsx)$/);
+const reqSource = require.context(
+  '!raw-loader!../../src/pages/company/contact',
+  false,
+  /\.(js|tsx)$/,
+);
+const reqPrefix = 'pages/company/contact';
+
+export default function Page() {
+  return <TopLayoutCompany req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+}
diff --git a/docs/pages/discover-more/governance.js b/docs/pages/discover-more/governance.js
diff --git a/docs/pages/index.js b/docs/pages/index.js
@@ -31,9 +31,9 @@ function loadDependencies() {
 const useStyles = makeStyles(theme => ({
   root: {
     flex: '1 0 100%',
-  },
-  drawer: {
-    width: 0,
+    '& #main-content': {
+      outline: 0,
+    },
   },
   hero: {
     paddingTop: 64,
@@ -111,7 +111,7 @@ export default function HomePage() {
   const classes = useStyles();
 
   return (
-    <AppFrame classes={{ drawer: classes.drawer }}>
+    <AppFrame>
       <div className={classes.root}>
         <Head />
         <main id="main-content" tabIndex="-1">

diff --git a/docs/src/modules/components/AppContent.js b/docs/src/modules/components/AppContent.js
@@ -11,6 +11,7 @@ const useStyles = makeStyles(theme => ({
     position: 'relative',
     maxWidth: '100%',
     margin: '0 auto',
+    outline: 0,
     [theme.breakpoints.up('sm')]: {
       paddingRight: theme.spacing(1),
       maxWidth: 'calc(100% - 175px)',
@@ -40,18 +41,22 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function AppContent(props) {
-  const { children, disableAd, disableToc } = props;
+  const { children, className, disableAd, disableToc } = props;
   const classes = useStyles();
 
   return (
     <Container
       component="main"
       id="main-content"
       tabIndex={-1}
-      className={clsx(classes.root, {
-        [classes.ad]: !disableAd,
-        [classes.disableToc]: disableToc,
-      })}
+      className={clsx(
+        classes.root,
+        {
+          [classes.ad]: !disableAd,
+          [classes.disableToc]: disableToc,
+        },
+        className,
+      )}
     >
       {children}
     </Container>
@@ -60,6 +65,7 @@ export default function AppContent(props) {
 
 AppContent.propTypes = {
   children: PropTypes.node.isRequired,
+  className: PropTypes.string,
   disableAd: PropTypes.bool.isRequired,
   disableToc: PropTypes.bool.isRequired,
 };
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -30,10 +30,10 @@ import Link from 'docs/src/modules/components/Link';
 import AppDrawer from 'docs/src/modules/components/AppDrawer';
 import Notifications from 'docs/src/modules/components/Notifications';
 import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks';
-import usePageTitle from 'docs/src/modules/components/usePageTitle';
 import { LANGUAGES_LABEL } from 'docs/src/modules/constants';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
+import PageContext from 'docs/src/modules/components/PageContext';
 
 const LOCALES = { zh: 'zh-CN', pt: 'pt-BR', es: 'es-ES' };
 const CROWDIN_ROOT_URL = 'https://translate.material-ui.com/project/material-ui-docs/';
@@ -137,11 +137,6 @@ const styles = theme => ({
       display: 'none',
     },
   },
-  '@global': {
-    '#main-content': {
-      outline: 0,
-    },
-  },
 });
 
 function AppFrame(props) {
@@ -183,13 +178,13 @@ function AppFrame(props) {
 
   const router = useRouter();
   const { canonical } = pathnameToLanguage(Router2._rewriteUrlForNextExport(router.asPath));
-  const title = usePageTitle({ t });
+  const { activePage } = React.useContext(PageContext);
 
   let disablePermanent = false;
   let navIconClassName = '';
   let appBarClassName = classes.appBar;
 
-  if (title === null) {
+  if (activePage.title === false) {
     // home route, don't shift app bar or dock drawer
     disablePermanent = true;
     appBarClassName += ` ${classes.appBarHome}`;
@@ -337,7 +332,7 @@ function AppFrame(props) {
         </Toolbar>
       </AppBar>
       <AppDrawer
-        className={classes.drawer}
+        className={disablePermanent ? '' : classes.drawer}
         disablePermanent={disablePermanent}
         onClose={handleDrawerClose}
         onOpen={handleDrawerOpen}

diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js
@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import Button from '@material-ui/core/Button';
-
-const SOURCE_CODE_ROOT_URL = 'https://github.com/mui-org/material-ui/edit/master';
+import { SOURCE_CODE_ROOT_URL } from 'docs/src/modules/constants';
 
 export default function EditPage(props) {
   const { markdownLocation } = props;

diff --git a/docs/src/modules/components/Head.js b/docs/src/modules/components/Head.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import NextHead from 'next/head';
-import { Router as Router2, useRouter } from 'next/router';
+import { Router, useRouter } from 'next/router';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 
 export default function Head(props) {
-  const router = useRouter();
   const t = useSelector(state => state.options.t);
-  const userLanguage = useSelector(state => state.options.userLanguage);
   const { description = t('strapline'), title = t('headTitle'), children } = props;
+  const userLanguage = useSelector(state => state.options.userLanguage);
+  const router = useRouter();
 
   return (
     <NextHead>
@@ -30,7 +30,7 @@ export default function Head(props) {
       <meta property="og:title" content={title} />
       <meta
         property="og:url"
-        content={`https://material-ui.com${Router2._rewriteUrlForNextExport(router.asPath)}`}
+        content={`https://material-ui.com${Router._rewriteUrlForNextExport(router.asPath)}`}
       />
       <meta property="og:description" content={description} />
       <meta property="og:image" content="https://material-ui.com/static/brand.png" />

diff --git a/docs/src/modules/components/HomeFooter.js b/docs/src/modules/components/HomeFooter.js
@@ -1,3 +1,4 @@
+/* eslint-disable material-ui/no-hardcoded-labels */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
@@ -22,7 +23,7 @@ const styles = theme => ({
     marginBottom: theme.spacing(4),
     '& img': {
       width: 28,
-      height: 28,
+      height: 22,
       marginRight: theme.spacing(1.5),
     },
   },
@@ -56,13 +57,15 @@ function HomeFooter(props) {
       <Container maxWidth="md">
         <footer className={classes.footer}>
           <Grid container>
-            <Grid item xs={12} sm={4}>
+            <Grid item xs={12} sm={3}>
               <div className={classes.logo}>
                 <img src="/static/images/material-ui-logo.svg" alt="" />
-                <Typography color="primary">Material-UI</Typography>
+                <Link variant="body1" color="inherit" href="/">
+                  Material-UI
+                </Link>
               </div>
             </Grid>
-            <Grid item xs={6} sm={4} className={classes.list}>
+            <Grid item xs={6} sm={3} className={classes.list}>
               <Typography component="h2" gutterBottom>
                 {t('footerCommunity')}
               </Typography>
@@ -97,7 +100,7 @@ function HomeFooter(props) {
                 </li>
               </ul>
             </Grid>
-            <Grid item xs={6} sm={4} className={classes.list}>
+            <Grid item xs={6} sm={3} className={classes.list}>
               <Typography component="h2" gutterBottom>
                 {t('footerResources')}
               </Typography>
@@ -119,6 +122,23 @@ function HomeFooter(props) {
                 </li>
               </ul>
             </Grid>
+            <Grid item xs={6} sm={3} className={classes.list}>
+              <Typography component="h2" gutterBottom>
+                {t('footerCompany')}
+              </Typography>
+              <ul>
+                <li>
+                  <Link color="inherit" variant="body2" href="/company/about/">
+                    About
+                  </Link>
+                </li>
+                <li>
+                  <Link color="inherit" variant="body2" href="/company/contact/">
+                    Contact Us
+                  </Link>
+                </li>
+              </ul>
+            </Grid>
           </Grid>
           <Typography className={classes.version} color="textSecondary" variant="body2">
             <Interpolate