Home.js

import React from 'react';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
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 CssBaseline from '@material-ui/core/CssBaseline';
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 ExpandMore from '@material-ui/icons/ExpandMore'
import ExpandLess from '@material-ui/icons/ExpandLess'
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import Collapse from '@material-ui/core/Collapse';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams,
  useRouteMatch
} from "react-router-dom";
import Images from '../assets/Images';
import { FadeMenu, Footer, UseWindowDimensions } from '../Utils/Index';
import Beranda from './Beranda';
import { Avatar } from '@material-ui/core';
import HomeRoutes from '../router/homeRoutes'
import ArraySide from '../library/Array'

const drawerWidth = 307;


const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
  },
  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,
  },
  hide: {
    display: 'none',
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: 'nowrap',
  },
  drawerOpen: {
    width: drawerWidth,
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
    backgroundColor: '#0d2846'
  },
  drawerClose: {
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    overflowX: 'hidden',
    width: theme.spacing(7) + 1,
    [theme.breakpoints.up('sm')]: {
      width: theme.spacing(9) + 1,
    },
    backgroundColor: '#0d2846'
  },
  toolbar: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
  },
  toolbarDrawer: {
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    // ...theme.mixins.toolbar
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
  orangeAvatar: {
    margin: 10,
    color: '#fff',
    backgroundColor: 'black',
  },
}));

export default function MiniDrawer() {
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);
  const [selectedIndex, setSelectedIndex] = React.useState([]);

  React.useEffect(() => {
    // alert(ArraySide)
  })
  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  let { path, url } = useRouteMatch();

  const { height, width } = UseWindowDimensions();

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar
        position="fixed"
        className={clsx(classes.appBar, {
          [classes.appBarShift]: open,
        })}
      >
        <Toolbar style={{ flex: 1, backgroundColor: '#51c6ea' }}>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={handleDrawerOpen}
            edge="start"
            className={clsx(classes.menuButton, {
              [classes.hide]: open,
            })}
          >
            <MenuIcon />
          </IconButton>
          <div style={{ backgroundColor: '#51c6ea', height: '70px', display: 'flex', flex: 1, placeContent: 'flex-end' }}>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20 }}>
              <div style={{ width: 44, height: 44, backgroundColor: '#354960', borderRadius: 30, marginRight: 10 }} />
              <Typography style={{ color: 'white' }}>Tommy</Typography>
              {/* <img src={require('./assets/dropdown-white.svg')} alt="React Logo" style={{ marginLeft: 15 }} /> */}
              <FadeMenu />
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
              <img src={Images.search} alt="React Logo" style={{ height: 18, width: 18 }} />
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
              <img src={Images.flagEnglish} alt="React Logo" style={{ height: 32, width: 32 }} />
              <Typography style={{ color: 'white' }}>EN</Typography>
            </div>
          </div>
        </Toolbar>
      </AppBar>
      <Drawer
        variant="permanent"
        className={clsx(classes.drawer, {
          [classes.drawerOpen]: open,
          [classes.drawerClose]: !open,
        })}
        classes={{
          paper: clsx({
            [classes.drawerOpen]: open,
            [classes.drawerClose]: !open,
          }),
        }}
      >
        <div className={classes.toolbarDrawer} style={{
          backgroundColor: '#51c6ea',
          height: open ? 152 : 68
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, padding: 10 }}>
            <img src={Images.triputra} alt="React Logo" style={{ height: 31, width: 151, alignSelf: 'center' }} />
            <IconButton onClick={handleDrawerClose}>
              <ChevronLeftIcon style={{ fill: 'white' }} />
            </IconButton>
          </div>
          {open &&
            <div style={{ width: '100%' }}>
              <Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', fontWeight: 'bold' }}>John Doe</Typography>
              <Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', marginTop: 10 }}>john@tia.com</Typography>
            </div>
          }
        </div>
        <Divider />
        {open &&
          <div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -15 }}>
            <div style={{ width: 86, height: 86, backgroundColor: '#0d2846', borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
              <div style={{ width: 72, height: 72, backgroundColor: 'white', borderRadius: 50, alignSelf: 'center' }}>
              </div>

            </div>
          </div>
        }
        {open &&
          <div style={{ marginLeft: 25, marginTop: 20, marginBottom: 20 }}>
            <Typography style={{ color: 'white', fontSize: 12 }}>APLIKASI</Typography>
          </div>
        }
        <List>
          {ArraySide.map((item, index) => (
            <div>
              {item.subItem != null ?
                <div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingRight: 10 }} onClick={() => selectedIndex == 0 ? setSelectedIndex(index) : setSelectedIndex(0)}>
                  <ListItem button key={item.label}>
                    <ListItemIcon><img src={item.img} /></ListItemIcon>
                    <Typography style={{ color: 'white', fontSize: 12 }}>{item.label}</Typography>
                  </ListItem>
                  {item.subItem != null ? (index === selectedIndex ? <ExpandLess style={{ color: "white", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "white", marginLeft: 50, alignSelf: 'center' }} />) : null}
                </div>
                :

                item.label === 'PENGATURAN' ?
                  open ?
                    <Link to={`${url}/${item.path}`}>
                      <ListItem button key={item.label} onClick={() => null}>
                        <Typography style={{ color: 'white', fontSize: 12 }}>{item.label}</Typography>
                      </ListItem>
                    </Link> : null :
                  <Link to={`${url}/${item.path}`}>
                    <ListItem button key={item.label} onClick={() => setSelectedIndex(index)}>
                      <ListItemIcon><img src={item.img} /></ListItemIcon>
                      <Typography style={{ color: 'white', fontSize: 12 }}>{item.label}</Typography>
                    </ListItem>
                  </Link>
              }
              {item.subItem != null &&
                <div>
                  <Collapse in={index === selectedIndex} timeout="auto" unmountOnExit>
                    <List component="div" disablePadding>
                      {item.subItem.map((sub, index) => {
                        return (
                          <Link to={`${url}/${sub.path}`}>
                            <ListItem style={{ paddingLeft: 72 }}>
                              <Typography style={{ color: 'white', fontSize: 12 }}>{sub.label}</Typography>
                            </ListItem>
                          </Link>
                        )
                      })}
                    </List>
                  </Collapse>
                </div>
              }
            </div>
          ))}
        </List>
      </Drawer>
      <div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
        <div>
          <div className={classes.toolbar} />
          <Switch>
            {HomeRoutes.map((route, index) => (
              // You can render a <Route> in as many places
              // as you want in your app. It will render along
              // with any other <Route>s that also match the URL.
              // So, a sidebar or breadcrumbs or anything else
              // that requires you to render multiple things
              // in multiple places at the same URL is nothing
              // more than multiple <Route>s.
              <Route
                key={index}
                path={route.path}
                // exact={route.exact}
                children={<route.main height={height} />}
              />
            ))}
          </Switch>
          <Footer>
            <Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
          </Footer>
        </div>

      </div>
    </div>
  );
}