text: import {
    Box,
    Divider,
    Drawer,
    Hidden,
    List,
    Typography,Button
  } from '@material-ui/core';
  import PropTypes from 'prop-types';
  import { useEffect } from 'react';
  import {
    BarChart as BarChartIcon, PlusCircle as PlusCircles, Users as UsersIcon,Settings as SettingsIcon,
  } from 'react-feather';
  import NavItem from './NavItem';
  
  import { useNavigate, useParams } from 'react-router-dom';
  
  // const user = {
  //   // avatar: '/static/images/avatars/avatar_6.png',
  //   email: 'kat@gmail.com',
  //   name: 'Katarina Smith'
  // };
  
  const items = [
    {
      href: '/app/dashboard',
      icon: BarChartIcon,
      title: 'Projects'
    },
    // {
    //   href: '/app/shillers',
    //   icon: UsersIcon,
    //   title: 'Shillers'
    // },
    // {
    //   href: '/app/project',
    //   icon: ShoppingBagIcon,
    //   title: 'Board'
    // },
    {
      href: '/app/addproject',
      icon: PlusCircles,
      title: 'Add Project'
    },
    // {
    //   href: '/app/admin',
    //   icon: Sliders,
    //   title: 'Admins'
    // },
    // {
    //   href: '/app/account',
    //   icon: UserIcon,
    //   title: 'Account'
    // },
    {
      href: '/app/shillerpasswordreset',
      icon: SettingsIcon,
      title: 'Settings'
    },
    // {
    //   href: '/login',
    //   icon: LockIcon,
    //   title: 'Login'
    // },
    // {
    //   href: '/register',
    //   icon: UserPlusIcon,
    //   title: 'Register'
    // },
    // {
    //   href: '/404',
    //   icon: AlertCircleIcon,
    //   title: 'Error'
    // }
  ];
  
  const DashboardSidebar = ({ onMobileClose, openMobile }) => {
    console.log('Based on localStorage : ' + localStorage.getItem('user'));
    const user = JSON.parse(localStorage.getItem('user'));
    const navigate = useNavigate();
    useEffect(() => {
      if (openMobile && onMobileClose) {
        onMobileClose();
      }
    }, [location.pathname]);
  
    const content = (
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          height: '100%'
        }}
      >
        <Box
          sx={{
            alignItems: 'center',
            display: 'flex',
            flexDirection: 'column',
            p: 2
          }}
        >
          
          <Typography color="textPrimary" variant="h5">
            {user.result.name}
          </Typography>
          <Typography color="textSecondary" variant="body2">
            {user.result.email}
          </Typography>
        
        </Box>
        <Divider />
        <Box sx={{ p: 2 }}>
          <List>
            {items.map((item) => (
              <NavItem
                href={item.href}
                key={item.title}
                title={item.title}
                icon={item.icon}
              />
            ))}
          </List>
      
        </Box>
        <Box sx={{ flexGrow: 1 }} />
        <Box
          sx={{
            backgroundColor: 'background.default',
            m: 2,
            p: 2
          }}
        >
          
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'center',
              pt: 2
            }}
          >
            <Button
              color="primary"
              component="a"
            
              variant="contained"
              onClick={()=>{localStorage.clear(),console.log('clicked'),navigate('/app/dashboard')}}
            >
         LOGOUT
            </Button>
          </Box>
        </Box>
      </Box>
    );
  
    return (
      <>
        <Hidden lgUp>
          <Drawer
            anchor="left"
            onClose={onMobileClose}
            open={openMobile}
            variant="temporary"
            PaperProps={{
              sx: {
                width: 256
              }
            }}
          >
            {content}
   
          </Drawer>
        </Hidden>
        <Hidden lgDown>
          <Drawer
            anchor="left"
            open
            variant="persistent"
            PaperProps={{
              sx: {
                width: 256,
                top: 64,
                height: 'calc(100% - 64px)'
              }
            }}
          >
       {content}
  
          </Drawer>
        </Hidden>
      </>
    );
  };
  
  DashboardSidebar.propTypes = {
    onMobileClose: PropTypes.func,
    openMobile: PropTypes.bool
  };
  
  DashboardSidebar.defaultProps = {
    onMobileClose: () => {},
    openMobile: false
  };
  
  export default DashboardSidebar;
  