How can I make my layout adapt to the Material-UI toolbar height?

user_10546688 0
Viewed 730

I'm currently building the layout component (Navbar, Footer and Content), it looks like this:

// containers/Layout/index.jsx
export default function Layout({ children }) {
  const classes = useStyles();

  return (
    <>
      <Navbar />
      <main className={classes.root}>{children}</main>
      <Footer />
    </>
  );
}

These are the styles:

// containers/Layout/styles.js
export default makeStyles((theme) => ({
  root: {
    minHeight: `calc(100vh - 64px - ${theme.mixins.toolbar.minHeight}px)`,
  },
}));

Now I ran into a problem, the Material-UI Toolbar is responsive. My footer is 64px high, but my appbar is of course dynamic.

// component/Appbar/index.jsx
export default function Navbar() {
  return (
    <AppBar position="static">
      <Toolbar />
    </AppBar>
  );
}

For reference, this is what the mixin looks like:

Mixin

I'm trying to get the current height of the AppBar so I can make my calc function responsive. I've tried using the mixin but that only returns the normal minimum height. Another options is to use media query's, but I'd rather not since the media query is already present on the toolbar mixin.

How would I get this minimum height to adapt properly to the screen size? My goal is to always fill 100% of the screen with the footer at the bottom, with the content to fill the remaining space.

material-ui reactjs
1 Answers

You can see the default mixins of toolbar here:

toolbar: {
  minHeight: 56,
  [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
    minHeight: 48,
  },
  [breakpoints.up('sm')]: {
    minHeight: 64,
},

It sets the minHeight to different values in different screen size/orientation. Similarly, in your main content below the header you should set the height to something like this:

content: {
  height: `calc(100vh - 56px)`,
  [`${theme.breakpoints.up("xs")} and (orientation: landscape)`]: {
    height: `calc(100vh - 48px)`
  },
  [theme.breakpoints.up("sm")]: {
    height: `calc(100vh - 64px)`
  }
}

Live Demo

Edit 67331031/how-can-i-make-my-layout-adapt-to-the-material-ui-toolbar-height

user_94494260
Related