diff options
| author | Anton Tananaev <anton@traccar.org> | 2022-10-24 07:14:31 -0700 |
|---|---|---|
| committer | Anton Tananaev <anton@traccar.org> | 2022-10-24 07:14:31 -0700 |
| commit | 49b17ad4e4cef0dbc947bca4faee84829aa7a311 (patch) | |
| tree | 1820c7f200eca4e27ebc6a52ee3b3f7b980faa4d /modern/src/common | |
| parent | f27b9ed82484c89bcc6610c1cf1053b127cada2a (diff) | |
| download | trackermap-web-49b17ad4e4cef0dbc947bca4faee84829aa7a311.tar.gz trackermap-web-49b17ad4e4cef0dbc947bca4faee84829aa7a311.tar.bz2 trackermap-web-49b17ad4e4cef0dbc947bca4faee84829aa7a311.zip | |
Remove Hidden usages
Diffstat (limited to 'modern/src/common')
| -rw-r--r-- | modern/src/common/components/PageLayout.js | 88 |
1 files changed, 42 insertions, 46 deletions
diff --git a/modern/src/common/components/PageLayout.js b/modern/src/common/components/PageLayout.js index 67ad4c01..11459557 100644 --- a/modern/src/common/components/PageLayout.js +++ b/modern/src/common/components/PageLayout.js @@ -4,7 +4,6 @@ import { Breadcrumbs, Divider, Drawer, - Hidden, IconButton, Toolbar, Typography, @@ -69,56 +68,53 @@ const PageTitle = ({ breadcrumbs }) => { const PageLayout = ({ menu, breadcrumbs, children }) => { const classes = useStyles(); + const theme = useTheme(); const navigate = useNavigate(); - const [openDrawer, setOpenDrawer] = useState(false); + const desktop = useMediaQuery(theme.breakpoints.up('md')); - return ( - <> - <Hidden mdDown> - <div className={classes.desktopRoot}> - <Drawer - variant="permanent" - className={classes.desktopDrawer} - classes={{ paper: classes.desktopDrawer }} - > - <div className={classes.toolbar}> - <Toolbar> - <IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => navigate('/')}> - <ArrowBackIcon /> - </IconButton> - <PageTitle breadcrumbs={breadcrumbs} /> - </Toolbar> - </div> - <Divider /> - {menu} - </Drawer> - <div className={classes.content}>{children}</div> - </div> - </Hidden> + const [openDrawer, setOpenDrawer] = useState(false); - <Hidden mdUp> - <div className={classes.mobileRoot}> - <Drawer - variant="temporary" - open={openDrawer} - onClose={() => setOpenDrawer(false)} - classes={{ paper: classes.mobileDrawer }} - > - {menu} - </Drawer> - <AppBar className={classes.mobileToolbar} position="static" color="inherit"> - <Toolbar> - <IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => setOpenDrawer(true)}> - <MenuIcon /> - </IconButton> - <PageTitle breadcrumbs={breadcrumbs} /> - </Toolbar> - </AppBar> - <div className={classes.content}>{children}</div> + return desktop ? ( + <div className={classes.desktopRoot}> + <Drawer + variant="permanent" + className={classes.desktopDrawer} + classes={{ paper: classes.desktopDrawer }} + > + <div className={classes.toolbar}> + <Toolbar> + <IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => navigate('/')}> + <ArrowBackIcon /> + </IconButton> + <PageTitle breadcrumbs={breadcrumbs} /> + </Toolbar> </div> - </Hidden> - </> + <Divider /> + {menu} + </Drawer> + <div className={classes.content}>{children}</div> + </div> + ) : ( + <div className={classes.mobileRoot}> + <Drawer + variant="temporary" + open={openDrawer} + onClose={() => setOpenDrawer(false)} + classes={{ paper: classes.mobileDrawer }} + > + {menu} + </Drawer> + <AppBar className={classes.mobileToolbar} position="static" color="inherit"> + <Toolbar> + <IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => setOpenDrawer(true)}> + <MenuIcon /> + </IconButton> + <PageTitle breadcrumbs={breadcrumbs} /> + </Toolbar> + </AppBar> + <div className={classes.content}>{children}</div> + </div> ); }; |