Connect React Material UI: Mini Variant + Responsive drawer - reactjs

Question

I am new to React and Material UI and I've been trying really hard to connect Mini Variant Drawer that I have now with Responsive drawer, so when you use it on phone it changes to Responsive drawer. If anyone could help me it would mean a lot to me, I tried but I always failed.
It would also help me get the knowledge for further connections with drawers.
Here is my code that I use for Mini Variant Drawer:
import React, {useState} from 'react';
import clsx from 'clsx';
import { makeStyles } from '#material-ui/core/styles';
import CssBaseline from '#material-ui/core/CssBaseline';
import Drawer from '#material-ui/core/Drawer';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import List from '#material-ui/core/List';
import Typography from '#material-ui/core/Typography';
import Divider from '#material-ui/core/Divider';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
import MenuOpenIcon from '#material-ui/icons/MenuOpen';
import { MainListItems } from './listItems';
import AccountMenu from '../../components/AccountMenu'
import ChangePasswordDialog from './ChangePasswordDialog';
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
},
toolbar: {
paddingRight: 60,
},
toolbarIcon: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar,
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginRight: 36,
},
menuButtonHidden: {
display: 'none',
},
mainTitle: {
flexGrow: 1,
marginLeft: 12
},
title: {
flexGrow: 1,
},
drawerPaper: {
position: 'relative',
whiteSpace: 'nowrap',
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerPaperClose: {
overflowX: 'hidden',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: theme.spacing.unit * 7,
[theme.breakpoints.up('sm')]: {
width: theme.spacing.unit * 9,
},
},
appBarSpacer: theme.mixins.toolbar,
content: {
flexGrow: 1,
height: '100vh',
overflow: 'auto',
},
container: {
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4),
},
paper: {
padding: theme.spacing(2),
display: 'flex',
overflow: 'auto',
flexDirection: 'column',
},
fixedHeight: {
height: 240,
},
}));
export default function SideMenuLayout({
drawerOpen,
setDrawerOpen,
children,
title
}) {
const classes = useStyles();
const handleDrawerOpen = () => {
setDrawerOpen(true);
};
const handleDrawerClose = () => {
setDrawerOpen(false);
};
const [changePasswordDialogOpen, setChangePasswordDialogOpen] = useState(false)
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="absolute" className={clsx(classes.appBar, drawerOpen && classes.appBarShift)}>
<Toolbar className={classes.toolbar}>
<IconButton
edge="start"
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
className={clsx(classes.menuButton, drawerOpen && classes.menuButtonHidden)}
>
<MenuIcon />
</IconButton>
<Typography component="h1" variant="h6" color="inherit" noWrap className={classes.title}>
{drawerOpen ? title : `MyTitle - ${title}`}
</Typography>
<AccountMenu onChangePassword={() => setChangePasswordDialogOpen(true)} />
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
classes={{
paper: clsx(classes.drawerPaper, !drawerOpen && classes.drawerPaperClose),
}}
open={drawerOpen}
>
<div className={classes.toolbarIcon}>
<Typography component="h1" variant="h6" color="inherit" noWrap className={classes.mainTitle}>
MyTitle
</Typography>
<IconButton onClick={handleDrawerClose}>
<MenuOpenIcon />
</IconButton>
</div>
<Divider />
<List><MainListItems /></List>
</Drawer>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
{children}
</main>
<ChangePasswordDialog
isOpen={changePasswordDialogOpen}
setOpen={setChangePasswordDialogOpen}
/>
</div>
);
}

Answer 1

I too have stumbled upon some issue trying to mix together the two drawer variants, but after a couple of hours I've found a configuration that seems to work properly.
NOTE: I'm absolutely no expert in JS/CSS/HTML, I'm way more a backend guy, so this solution can certainly be optimized and modified to fit your needs.
In my case the drawer is used to select the "page" to display. So I'll start from there.
The "page" component simply contains a Router. Its contents are put inside a Box with display: flex:
const HomePage = () => {
return (
<Router>
<Box sx={{display: 'flex'}}>
<HomePageInner />
<Switch>
<Route path="/">
<p>Example</p>
</Route>
</Switch>
</Box>
</Router>
);
}
The HomePageInner is the component that renders the "menu" and appbar.
It keeps tracks of the open/closed status:
const drawerWidth = 240;
const HomePageInner = () => {
const [open, setOpen] = useState(true);
const toggleDrawer = () => setOpen(!open);
const drawer = <DrawerContents onClick={toggleDrawer} />;
return (
<>
<MainAppBar open={open} onClick={toggleDrawer}/>
<Box
component="nav"
aria-label="menu items"
>
<MobileDrawer open={open} onClose={toggleDrawer} drawer={drawer}/>
<DesktopDrawer open={open} drawer={drawer}/>
</Box>
</>
);
}
Here you can see that for clarity I have defined two distinct components for "mobile" and for "desktop". The contents of the drawer are shared and are defined in a separate DrawerContents component that is passed as a child.
There is an outer Box that wraps both Drawers. In the examples on this Box there is an sx property that specifies width: {sm: drawerWidth}, flexShrink: {sm :0}, the flexShrink should be removed, but trying to add/remove the width setting does not seem to do anything, but if something is broken for you try to set that property.
The DrawerContents is pretty simple. It places the "chevron" icon button on the top that can be used to toggle the state and shows the links:
const DrawerContents: FunctionComponent<{ onClick: () => void }> = (props) => {
return <>
<Toolbar
sx={{
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
px: [1],
}}
>
<IconButton onClick={props.onClick}>
<ChevronLeftIcon/>
</IconButton>
</Toolbar>
<Divider/>
<List>
<ListItemLink primary="First" to="/first" icon={<DashboardIcon/>}/>
</List>
<List>
<ListItemLink primary="Second" to="/second" icon={<TodayIcon/>}/>
</List>
<Divider/>
<List>
<ListItemLink primary="Third" to="/third" icon={<SettingsIcon/>}/>
</List>
</>;
}
Now for the interesting part! The Drawers and the AppBar. So, the MobileDrawer is pretty much exactly the same as the temporary drawer in the "Responsive Drawer" example:
const MobileDrawer: FunctionComponent<{ container?: (() => any), open: boolean, onClose: () => void }> = (props) => {
return <Drawer
variant="temporary"
container={props.container}
open={props.open}
onClose={props.onClose}
ModalProps={{
keepMounted: true,
}}
sx={{
display: {xs: "block", sm: "none"},
"& .MuiDrawer-paper": {boxSizing: "border-box", width: drawerWidth},
}}
>
{props.children}
</Drawer>;
}
For the DesktopDrawer is mostly the same of the permanent drawer in th Responsive Drawer example however you have to modify the styling in the sx property so that it changes width when the status changes:
const DesktopDrawer: FunctionComponent<{ open: boolean }> = (props) => {
return <Drawer
variant="permanent"
sx={{
display: {xs: "none", sm: "block"},
"& .MuiDrawer-paper": {
position: "relative",
whiteSpace: "nowrap",
width: drawerWidth,
transition: theme => theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
boxSizing: "border-box",
...(!props.open && {
overflowX: "hidden",
transition: theme => theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: theme => ({xs: theme.spacing(7), sm: theme.spacing(9)}),
})
},
}}
open={props.open}
>
{props.children}
</Drawer>;
}
Note that here I made ample use of the function form of the sx properties that gives you access to the theme. I derived the correct values by "mergin" the values I saw in the Mini-Variant example and the Responsive example.
And now the MainAppBar. This too is quite similar to the Responsive Drawer example, however again we have to modify the sx property:
const MainAppBar: FunctionComponent<{ open: boolean, onClick: () => void }> = (props) => {
const location = useLocation();
const headers: { [key: string]: string } = {
'/first': "First",
'/second': "Second",
'/third': "Third",
};
return <AppBar
position="fixed"
sx={{
zIndex: theme => theme.zIndex.drawer + 1,
transition: theme => theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(props.open && {
ml: {sm: `${drawerWidth}px`},
width: {sm: `calc(100% - ${drawerWidth}px)`},
transition: theme => theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
})
}}
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={props.onClick}
sx={{mr: 2}}
>
<MenuIcon/>
</IconButton>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
sx={{flexGrow: 1}}
>
{headers[location.pathname] || "Error"}
</Typography>
</Toolbar>
</AppBar>;
}
Note that here you want to:
remove the display: { sm: 'none' } in the sx of the IconButton to toggle the state
The width and ml settings must be included only in the open state
With all this configuration I get a drawer that for larger screen can be opened/closed like the mini variant:
But is also responsive:
PS: I didn't have the time to write a short answer, so I wrote a long one by copy&pasting my code and cutting away some stuff. If I find some time I might modify the sample code to be shorter and/or be self-contained.