[Drawer] Add a comment for clarity on the styling of height of the to…

…olbar (#19934)
mui · Mar 3, 2020 · fac9562 · fac9562
1 parent 0ac8d41
commit fac9562
Show file tree

Hide file tree

Showing 14 changed files with 14 additions and 0 deletions.
diff --git a/docs/src/pages/components/drawers/ClippedDrawer.js b/docs/src/pages/components/drawers/ClippedDrawer.js
@@ -33,6 +33,7 @@ const useStyles = makeStyles(theme => ({
     flexGrow: 1,
     padding: theme.spacing(3),
   },
+  // necessary for content to be below app bar
   toolbar: theme.mixins.toolbar,
 }));
 

diff --git a/docs/src/pages/components/drawers/ClippedDrawer.tsx b/docs/src/pages/components/drawers/ClippedDrawer.tsx
@@ -34,6 +34,7 @@ const useStyles = makeStyles((theme: Theme) =>
       flexGrow: 1,
       padding: theme.spacing(3),
     },
+    // necessary for content to be below app bar
     toolbar: theme.mixins.toolbar,
   }),
 );

diff --git a/docs/src/pages/components/drawers/MiniDrawer.js b/docs/src/pages/components/drawers/MiniDrawer.js
@@ -73,6 +73,7 @@ const useStyles = makeStyles(theme => ({
     alignItems: 'center',
     justifyContent: 'flex-end',
     padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
     ...theme.mixins.toolbar,
   },
   content: {

diff --git a/docs/src/pages/components/drawers/MiniDrawer.tsx b/docs/src/pages/components/drawers/MiniDrawer.tsx
@@ -74,6 +74,7 @@ const useStyles = makeStyles((theme: Theme) =>
       alignItems: 'center',
       justifyContent: 'flex-end',
       padding: theme.spacing(0, 1),
+      // necessary for content to be below app bar
       ...theme.mixins.toolbar,
     },
     content: {

diff --git a/docs/src/pages/components/drawers/PermanentDrawerLeft.js b/docs/src/pages/components/drawers/PermanentDrawerLeft.js
@@ -30,6 +30,7 @@ const useStyles = makeStyles(theme => ({
   drawerPaper: {
     width: drawerWidth,
   },
+  // necessary for content to be below app bar
   toolbar: theme.mixins.toolbar,
   content: {
     flexGrow: 1,

diff --git a/docs/src/pages/components/drawers/PermanentDrawerLeft.tsx b/docs/src/pages/components/drawers/PermanentDrawerLeft.tsx
@@ -31,6 +31,7 @@ const useStyles = makeStyles((theme: Theme) =>
     drawerPaper: {
       width: drawerWidth,
     },
+    // necessary for content to be below app bar
     toolbar: theme.mixins.toolbar,
     content: {
       flexGrow: 1,

diff --git a/docs/src/pages/components/drawers/PermanentDrawerRight.js b/docs/src/pages/components/drawers/PermanentDrawerRight.js
@@ -30,6 +30,7 @@ const useStyles = makeStyles(theme => ({
   drawerPaper: {
     width: drawerWidth,
   },
+  // necessary for content to be below app bar
   toolbar: theme.mixins.toolbar,
   content: {
     flexGrow: 1,

diff --git a/docs/src/pages/components/drawers/PermanentDrawerRight.tsx b/docs/src/pages/components/drawers/PermanentDrawerRight.tsx
@@ -31,6 +31,7 @@ const useStyles = makeStyles((theme: Theme) =>
     drawerPaper: {
       width: drawerWidth,
     },
+    // necessary for content to be below app bar
     toolbar: theme.mixins.toolbar,
     content: {
       flexGrow: 1,

diff --git a/docs/src/pages/components/drawers/PersistentDrawerLeft.js b/docs/src/pages/components/drawers/PersistentDrawerLeft.js
@@ -55,6 +55,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
     ...theme.mixins.toolbar,
     justifyContent: 'flex-end',
   },

diff --git a/docs/src/pages/components/drawers/PersistentDrawerLeft.tsx b/docs/src/pages/components/drawers/PersistentDrawerLeft.tsx
@@ -56,6 +56,7 @@ const useStyles = makeStyles((theme: Theme) =>
       display: 'flex',
       alignItems: 'center',
       padding: theme.spacing(0, 1),
+      // necessary for content to be below app bar
       ...theme.mixins.toolbar,
       justifyContent: 'flex-end',
     },

diff --git a/docs/src/pages/components/drawers/PersistentDrawerRight.js b/docs/src/pages/components/drawers/PersistentDrawerRight.js
@@ -55,6 +55,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
     ...theme.mixins.toolbar,
     justifyContent: 'flex-start',
   },

diff --git a/docs/src/pages/components/drawers/PersistentDrawerRight.tsx b/docs/src/pages/components/drawers/PersistentDrawerRight.tsx
@@ -56,6 +56,7 @@ const useStyles = makeStyles((theme: Theme) =>
       display: 'flex',
       alignItems: 'center',
       padding: theme.spacing(0, 1),
+      // necessary for content to be below app bar
       ...theme.mixins.toolbar,
       justifyContent: 'flex-start',
     },

diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.js b/docs/src/pages/components/drawers/ResponsiveDrawer.js
@@ -41,6 +41,7 @@ const useStyles = makeStyles(theme => ({
       display: 'none',
     },
   },
+  // necessary for content to be below app bar
   toolbar: theme.mixins.toolbar,
   drawerPaper: {
     width: drawerWidth,

diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
@@ -41,6 +41,7 @@ const useStyles = makeStyles((theme: Theme) =>
         display: 'none',
       },
     },
+    // necessary for content to be below app bar
     toolbar: theme.mixins.toolbar,
     drawerPaper: {
       width: drawerWidth,