import React, { useState } from 'react';
import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
import { useTheme } from "@material-ui/core/styles";
import MenuIcon from '@material-ui/icons/Menu';
import TimelineIcon from '@material-ui/icons/Timeline';
import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
import TrendingUpIcon from '@material-ui/icons/TrendingUp';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import { Link, useHistory, useLocation } from 'react-router-dom';
import t from '../common/localization';
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
height: '100%',
},
drawerContainer: {
width: theme.dimensions.drawerWidth,
},
drawer: {
width: theme.dimensions.drawerWidth,
[theme.breakpoints.down("md")]: {
width: theme.dimensions.tabletDrawerWidth,
}
},
content: {
flex: 1,
padding: theme.spacing(5, 3, 3, 3),
},
drawerHeader: {
...theme.mixins.toolbar,
display: 'flex',
alignItems: 'center',
padding: theme.spacing(0, 1),
},
backArrowIconContainer: {
'&:hover': {
backgroundColor:"transparent"
}
},
toolbar: {
[theme.breakpoints.down("md")]: {
...theme.mixins.toolbar,
}
},
}));
const routes = [
{ name: t('reportRoute'), href: '/reports/route', icon:
{routes.map((route, index) => (
);
const drawerHeader = (
<>