import React, { useState, useEffect } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import { Typography, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import SideNav from '../../components/SideNav'; import NavBar from '../../components/NavBar'; import t from '../../common/localization'; import useRoutes from './useRoutes'; const useStyles = makeStyles(theme => ({ root: { display: 'flex', height: '100%' }, drawerContainer: { width: theme.dimensions.drawerWidthDesktop }, drawer: { width: theme.dimensions.drawerWidthDesktop, [theme.breakpoints.down('md')]: { width: theme.dimensions.drawerWidthTablet } }, content: { flex: 1, padding: theme.spacing(5, 3, 3, 3) }, drawerHeader: { ...theme.mixins.toolbar, display: 'flex', alignItems: 'center', padding: theme.spacing(0, 1) }, toolbar: { [theme.breakpoints.down('md')]: { ...theme.mixins.toolbar } } })); const OptionsLayout = ({ children }) => { const classes = useStyles(); const history = useHistory(); const location = useLocation(); const [openDrawer, setOpenDrawer] = useState(false); const [optionTitle, setOptionTitle] = useState(); const routes = useRoutes(); useEffect(() => { const activeRoute = routes.find(route => route.href === location.pathname); setOptionTitle(activeRoute.name); }, [location]); const title = `Options / ${optionTitle}`; return (
setOpenDrawer(!openDrawer)} classes={{ paper: classes.drawer }} >
history.push('/')}> {t('settingsTitle')}
{children}
); }; export default OptionsLayout;