Material-ui: AppBar offset component when it's fixed

[rhuanbarreto]

On material design react components repo they have a component that helps when the top bar is fixed:

Use the <TopAppBarFixedAdjust /> component to give your content top-padding, so it isn't hidden on page render.

I've made one based on material UI that helps, so you could integrate it.

import React from "react";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles(theme => ({
  offset: {
    ...theme.mixins.toolbar,
    flexGrow: 1
  }
}))

export default function AppBarOffset() {
  const classes = useStyles();
  return <div className={classes.offset} />;
}

Use as:

<AppBar position="fixed" />
<AppBarOffset />

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

[oliviertassinari]

@rhuanbarreto Do you have an example where the app bar fails to live up its expectations?

[rhuanbarreto]

When the appbar is fixed, you always need this offset, so the content initially doesn't get under the bar. In material UI website main page this is made by a div with a class called jss3 where it adds a paddingTop of 64px. But this value is variable and depends on the viewport. So it's not straightforward to do this. So this offset must be set programatically.

Link for codesanbox showing the problem: https://codesandbox.io/s/material-demo-ejxmq. There is a text hidden under the bar.
Link for codesandbox with the solution using the code I used: https://codesandbox.io/s/material-demo-dn4mr

[oliviertassinari]

What's wrong with the Toolbar component?

import React from "react";
import {
  Box,
  CssBaseline,
  AppBar,
  Toolbar,
  Typography,
  Button,
  IconButton,
} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";

export default function ButtonAppBar() {
  return (
    <div>
      <CssBaseline />
      <AppBar position="fixed">
        <Toolbar>
          <Box mr={2}>
            <IconButton edge="start" color="inherit" aria-label="menu">
              <MenuIcon />
            </IconButton>
          </Box>
          <Typography variant="h6">News</Typography>
          <Box flexGrow={1} />
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
      <Toolbar />
      Text to be shown.
    </div>
  );
}

https://codesandbox.io/s/material-demo-bnlpz

[rhuanbarreto]

Great! Using the <Toolbar /> does the trick. So it's a documentation problem. This should be better documented, so people could know better how to implement fixed toolbars.

[oliviertassinari]

I agree about the documentation aspect. It's the same pattern we use in these demos: https://material-ui.com/components/app-bar/#scrolling. What do you think of a ## Placement section on this page? The usage of Toolbar is one valid approach, it's not the only one. theme.mixins.toolbar can be useful too for people who don't want to create a new DOM node.

[rhuanbarreto]

I think this could be good! This will probably help lot's of people once a fixed appbar is very common usage. And explaining all the ways to do this is the best that can be done.

[adeelibr]

Can I document this feature for usage of & theme.mixins.toolbar for Appbar position fixed demo? 😅

[oliviertassinari]

@adeelibr Yes, I think that it would be great to document the placement issue. For instance, I have seen @jlengstorf hit by this problem in a recent video.