[docs] Add demo for prominent app bar

docs/src/pages/components/app-bar/ProminentAppBar.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import MenuIcon from '@material-ui/icons/Menu';
+import SearchIcon from '@material-ui/icons/Search';
+import MoreIcon from '@material-ui/icons/MoreVert';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  toolbar: {
+    minHeight: 120,
+    alignItems: 'flex-start',
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(2),
+  },
+  title: {
+    flexGrow: 1,
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+    },
+    alignSelf: 'flex-end',
+  },
+}));
+
+export default function ProminentAppBar() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <AppBar position="static">
+        <Toolbar className={classes.toolbar}>
+          <IconButton
+            edge="start"
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="open drawer"
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography className={classes.title} variant="h5" noWrap>
+            Material-UI
+          </Typography>
+          <IconButton color="inherit">
+            <SearchIcon />
+          </IconButton>
+          <IconButton edge="end" color="inherit">
+            <MoreIcon />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}

docs/src/pages/components/app-bar/app-bar.md

@@ -31,6 +31,12 @@ A side searchbar.
 
 {{"demo": "pages/components/app-bar/SearchAppBar.js"}}
 
+## Prominent App Bar
+
+A prominent app bar.
+
+{{"demo": "pages/components/app-bar/ProminentAppBar.js"}}
+
 ## Dense (desktop only)
 
 {{"demo": "pages/components/app-bar/DenseAppBar.js"}}