Material-ui: Drawer alignment below the appBar

[ghost]

Hi,

how can we place drawer (either it is permanent or responsive drawer) below the appbar ?
All the examples provided in material-ui-next web page , are starts with Appbar.

My required is to keep Appbar fixed and drawer should be open and close below the appbar.

Thanks

[oliviertassinari]

This demo renders the drawer bellow the AppBar: https://material-ui-next.com/demos/drawers/#clipped-under-the-app-bar

[ghost]

Clipped drawer doesn't have facility to close and open drawer, it will just stick as side navigation.
I'm looking for persistent drawer or responsive drawer which can be close or open based on user action.

[oliviertassinari]

@code4arpit Then you won't find your answer here. Maybe you can try StackOverflow. We will add some layout demo in the future with #10986

[AikoRamalho]

Same problem here. Stack Overflow doesn't seems to have a response to.

[loupollivier]

Same here, is there some modifications since last time? I found no answer or exemple of it in the documentation https://material-ui-next.com/demos/drawers/

[yashrahurikar]

Hi,

how can we place drawer (either it is permanent or responsive drawer) below the appbar ?
All the examples provided in material-ui-next web page , are starts with Appbar.

My required is to keep Appbar fixed and drawer should be open and close below the appbar.

Thanks

You can use the z-index css property for layering AppBar above the Drawer
e.g. in withStyles
appBar: {
[theme.breakpoints.up("sm")]: {
width: "100%"
},
zIndex: theme.zIndex.drawer + 1
}

By default this class is applied on the AppBar component

keep the Drawer components variant to be "temporary" for responsiveness

[loupollivier]

Hi,
how can we place drawer (either it is permanent or responsive drawer) below the appbar ?
All the examples provided in material-ui-next web page , are starts with Appbar.
My required is to keep Appbar fixed and drawer should be open and close below the appbar.
Thanks

You can use the z-index css property for layering AppBar above the Drawer
e.g. in withStyles
appBar: {
[theme.breakpoints.up("sm")]: {
width: "100%"
},
zIndex: theme.zIndex.drawer + 1
}

By default this class is applied on the AppBar component

keep the Drawer components variant to be "temporary" for responsiveness

It worked for me thank you!

[nemethricsi]

adding { name: 'HookGlobalStyles', index: 2 } as a second parameter to makeStyles solved the issue for me:

My problem was that in production build the <Backdrop /> component didn't got the backdrop style

const useStyles = makeStyles((theme) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    color: '#fff',
  },
}), { name: 'HookGlobalStyles', index: 2 });

[yhay81]

I am also in the same case.
And I found using

Drawer with variant="persistent"
and
AppBar with style={{zIndex:1301}} (okay with theme.zIndex.drawer + 1)

Works for me.