[docs] Add constant for the banner height

docs/pages/index.js

@@ -5,6 +5,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import Container from '@material-ui/core/Container';
+import { BANNER_HEIGHT } from 'docs/src/modules/constants';
 import Steps from 'docs/src/pages/landing/Steps';
 import Themes from 'docs/src/pages/landing/Themes';
 import QuickWord from 'docs/src/pages/landing/QuickWord';
@@ -39,7 +40,7 @@ const useStyles = makeStyles(
       flex: '1 0 100%',
     },
     hero: {
-      paddingTop: theme.spacing(8) + 36,
+      paddingTop: theme.spacing(8) + BANNER_HEIGHT,
       color: theme.palette.primary.main,
     },
     content: {

docs/src/modules/components/AppTableOfContents.js

@@ -6,18 +6,19 @@ import clsx from 'clsx';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
+import { BANNER_HEIGHT } from 'docs/src/modules/constants';
 import Link from 'docs/src/modules/components/Link';
 import PageContext from 'docs/src/modules/components/PageContext';
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    top: 70 + 36,
+    top: 70 + BANNER_HEIGHT,
     // Fix IE 11 position sticky issue.
-    marginTop: 70 + 36,
+    marginTop: 70 + BANNER_HEIGHT,
     width: 175,
     flexShrink: 0,
     position: 'sticky',
-    height: 'calc(100vh - 70px - 36px)',
+    height: `calc(100vh - 70px - ${BANNER_HEIGHT}px)`,
     overflowY: 'auto',
     padding: theme.spacing(2, 2, 2, 0),
     display: 'none',

docs/src/modules/components/MarkdownDocs.js

@@ -15,7 +15,7 @@ import PageContext from 'docs/src/modules/components/PageContext';
 import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
 import Link from 'docs/src/modules/components/Link';
 import { exactProp } from '@material-ui/utils';
-import { SOURCE_CODE_ROOT_URL } from 'docs/src/modules/constants';
+import { SOURCE_CODE_ROOT_URL, BANNER_HEIGHT } from 'docs/src/modules/constants';
 import Demo from 'docs/src/modules/components/Demo';
 import AppTableOfContents from 'docs/src/modules/components/AppTableOfContents';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
@@ -48,7 +48,7 @@ function findIndex(array, comp) {
 const styles = (theme) => ({
   root: {
     width: '100%',
-    paddingTop: 36,
+    paddingTop: BANNER_HEIGHT,
   },
   container: {
     position: 'relative',

docs/src/modules/components/TopLayoutBlog.js

@@ -4,6 +4,7 @@ import { withStyles } from '@material-ui/core/styles';
 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 { BANNER_HEIGHT } from 'docs/src/modules/constants';
 import { useRouter } from 'next/router';
 import Link from '@material-ui/core/Link';
 import Avatar from '@material-ui/core/Avatar';
@@ -26,7 +27,7 @@ const styles = (theme) => ({
   root: {
     flexGrow: 1,
     // Adding top buffer because of the v5 banner
-    marginTop: 36,
+    marginTop: BANNER_HEIGHT,
   },
   back: {
     display: 'block',

docs/src/modules/components/TopLayoutCompany.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Head from 'docs/src/modules/components/Head';
 import AppFrame from 'docs/src/modules/components/AppFrame';
+import { BANNER_HEIGHT } from 'docs/src/modules/constants';
 import AppContainer from 'docs/src/modules/components/AppContainer';
 import AppFooter from 'docs/src/modules/components/AppFooter';
 import MarkdownElement from './MarkdownElement';
@@ -11,7 +12,7 @@ const styles = (theme) => ({
   root: {
     flex: '1 0 100%',
     // Adding top buffer because of the v5 banner
-    marginTop: 36,
+    marginTop: BANNER_HEIGHT,
   },
   container: {
     marginBottom: theme.spacing(20),

docs/src/modules/constants.js

@@ -57,6 +57,8 @@ const SOURCE_CODE_ROOT_URL =
   process.env.SOURCE_CODE_ROOT_URL || 'https://github.com/mui-org/material-ui/blob/master';
 const SOURCE_CODE_REPO = process.env.SOURCE_CODE_REPO || 'https://github.com/mui-org/material-ui';
 
+const BANNER_HEIGHT = 36;
+
 module.exports = {
   CODE_VARIANTS,
   ACTION_TYPES,
@@ -66,4 +68,5 @@ module.exports = {
   LANGUAGES_IN_PROGRESS,
   SOURCE_CODE_ROOT_URL,
   SOURCE_CODE_REPO,
+  BANNER_HEIGHT,
 };

docs/src/pages/components/material-icons/SearchIcons.js

@@ -9,6 +9,7 @@ import debounce from 'lodash/debounce';
 import Grid from '@material-ui/core/Grid';
 import Dialog from '@material-ui/core/Dialog';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { BANNER_HEIGHT } from 'docs/src/modules/constants';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
@@ -296,7 +297,7 @@ const useStyles = makeStyles((theme) => ({
   },
   paper: {
     position: 'sticky',
-    top: 80 + 36, // offset for the banner
+    top: 80 + BANNER_HEIGHT, // offset for the banner
     padding: '2px 4px',
     display: 'flex',
     alignItems: 'center',

docs/src/pages/landing/Pro.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
 import { makeStyles } from '@material-ui/core/styles';
+import { BANNER_HEIGHT } from 'docs/src/modules/constants';
 import Link from 'docs/src/modules/components/Link';
 import { useSelector } from 'react-redux';
 
 const useStyles = makeStyles(
   (theme) => ({
     root: {
-      marginTop: 36,
+      marginTop: BANNER_HEIGHT,
       padding: theme.spacing(1, 2, 1, 2),
       right: 0,
       left: 0,