From 032f7e917e98fb32cfa73aeba36bb0f20a886024 Mon Sep 17 00:00:00 2001
From: Adeel Imran <adeelimranr@gmail.com>
Date: Tue, 15 Oct 2019 01:30:48 -0700
Subject: [PATCH] [docs] document use of theme.mixins.toolbar & <Toolbar />
 when using Appbar variant fixed (#17878)

---
 docs/src/pages/components/app-bar/app-bar.md | 27 ++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/docs/src/pages/components/app-bar/app-bar.md b/docs/src/pages/components/app-bar/app-bar.md
index 91fff3cc79a5dd..787b76dec2939f 100644
--- a/docs/src/pages/components/app-bar/app-bar.md
+++ b/docs/src/pages/components/app-bar/app-bar.md
@@ -43,6 +43,33 @@ A side searchbar.
 
 You can use the `useScrollTrigger()` hook to respond to user scroll actions.
 
+## Placement
+
+When using Appbar `variant="fixed"` you need to have extra space for the content to show below
+& not under. There are 2 ways to do it. Either use `theme.mixins.toolbar` like;
+
+```jsx
+const useStyles = makeStyles(theme => ({
+  offset: {
+    ...theme.mixins.toolbar,
+    flexGrow: 1
+  }
+}))
+
+const App = () => {
+  const classes = useStyles();
+  return (
+    <div>
+      <Appbar position="fixed"></Appbar>
+      <div className={classes.offset}> {/* to accomdate for top white space */}
+    </div>
+  )
+};
+```
+
+Or you can append `<Toolbar />` component after `<Appbar />` like shown in the example
+below. To prevent content from hiding under Appbar.
+
 ### Hide App Bar
 
 The app bar hides on scroll down to leave more space for reading.