CODEWITHSUNDEEP
cssreactjsmaterial-uisidebardrawer
Lohmann
Lohmann

Reputation: 99

Drawer rendering inside AppBar element

I created a container to limit my app to 600px(sm) width, but when I did it the drawer breaks. Instead of rendering in the container page side, it is inside the appBar.

When the width is more than 600px (the page limit), the drawer is rendering inside the appBar (picture incorrect). When the page is smaller than 600px it renders correct (picture correct).

I am using material-ui components, the app bar is position as absolute, because I am implementing on scroll events. To centralize the app bar I use:

    maxWidth: 600,
    [theme.breakpoints.up("sm")]: {
      left: "50%",
      transform: "translate(-50%, 0)"
    }

Here is codesandbox example code: https://codesandbox.io/s/material-drawer-e6vrc?file=/header.js

Upvotes: 1

Views: 51

Answers (1)

hgb123
hgb123

Reputation: 14891

You should make drawer sibling with AppBar instead of it's children

return (
  <div className={classes.grow}>
    <AppBar className={classes.app_bar}>
      ...
    </AppBar>
    {renderDrawer}
  </div>
);

Upvotes: 1

Related Questions