text: import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from 'material-ui/styles';
  import classNames from 'classnames';
  import Drawer from 'material-ui/Drawer';
  import AppBar from 'material-ui/AppBar';
  import Toolbar from 'material-ui/Toolbar';
  import List from 'material-ui/List';
  import Typography from 'material-ui/Typography';
  import Divider from 'material-ui/Divider';
  import IconButton from 'material-ui/IconButton';
  import MenuIcon from 'material-ui-icons/Menu';
  import ChevronLeftIcon from 'material-ui-icons/ChevronLeft';
  import ChevronRightIcon from 'material-ui-icons/ChevronRight';
  import { mailFolderListItems, otherMailFolderListItems } from './tileData';
  import {Link, Route } from 'react-router-dom';
  //import Test1 from "../components/test1";
  import Test1 from "../components/pie";
  
  import Test2 from "../components/test2";
  import Test3 from "../components/test3";
  import profil from "../components/profil"
  import AccountCircle from 'material-ui-icons/AccountCircle';
  //import Switch from 'material-ui/Switch';
  //import { FormControlLabel, FormGroup } from 'material-ui/Form';
  import Menu, { MenuItem } from 'material-ui/Menu';
  
  
  
  
  
  
  const drawerWidth = 240;
  
  const styles = theme => ({
    root: {
      flexGrow: 1,
      height: "100%",
      width: "100%",
  
      zIndex: 1,
      overflow: 'hidden',
      position: 'static',
      display: 'flex',
    },
    flex: {
      flex: 100,
    },
    appBar: {
      zIndex: theme.zIndex.drawer + 1,
      position: 'absolute',
  
      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: {
      marginLeft: 12,
      marginRight: 36,
    },
    hide: {
      display: 'none',
    },
    drawerPaper: {
      position: 'relative',
      width: drawerWidth,
      transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
      }),
    },
    drawerPaperClose: {
      overflowX: 'hidden',
      transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
      }),
      width: theme.spacing.unit * 7,
      [theme.breakpoints.up('sm')]: {
        width: theme.spacing.unit * 9,
      },
    },
    toolbar: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-end',
      padding: '0 8px',
      ...theme.mixins.toolbar,
    },
    content: {
      flexGrow: 1,
      backgroundColor: theme.palette.background.default,
      padding: theme.spacing.unit * 3,
    },
  });
  
  class MiniDrawer extends React.Component {
    state = {
      open: false,
  
      auth: true,
      anchorEl: null
    };
  
    handleDrawerOpen = () => {
      this.setState({ open: true });
    };
  
    handleDrawerClose = () => {
      this.setState({ open: false });
    };
  
  
  
  
  
    handleMenu = event => {
      this.setState({ anchorEl: event.currentTarget });
    };
  
    handleClose = () => {
      this.setState({ anchorEl: null });
    };
  
  
  
  
    render() {
      const { classes, theme } = this.props;
  
  
      const { anchorEl } = this.state;
      const open = Boolean(anchorEl);
  
  
      return (
        <div className={classes.root}>
  
  
  
  
  
  
          <AppBar
            position="absolute"
            className={classNames(classes.appBar, this.state.open && classes.appBarShift)}
          >
            <Toolbar disableGutters={!this.state.open}>
              <IconButton
                color="inherit"
                aria-label="open drawer"
                onClick={this.handleDrawerOpen}
                className={classNames(classes.menuButton, this.state.open && classes.hide)}
              >
                <MenuIcon />
              </IconButton>
              <Typography variant="title" color="inherit" noWrap className={classes.flex}>
                Mini variant drawer
              </Typography>
  
  
              <div>
                <IconButton
                  aria-owns={open ? 'menu-appbar' : null}
                  aria-haspopup="true"
                  onClick={this.handleMenu}
                  color="inherit"
                >
                  <AccountCircle />
                </IconButton>
                <Menu
                  id="menu-appbar"
                  anchorEl={anchorEl}
                  anchorOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                  }}
                  transformOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                  }}
                  open={open}
                  onClose={this.handleClose}
                >
                  <Link to="/profil">
                    <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                  </Link>
                  <MenuItem onClick={this.handleClose}>My account</MenuItem>
                </Menu>
              </div>
  
  
  
  
  
  
  
            </Toolbar>
          </AppBar>
          <Drawer
            variant="permanent"
            classes={{
              paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
            }}
            open={this.state.open}
          >
            <div className={classes.toolbar}>
              <IconButton onClick={this.handleDrawerClose}>
                {theme.direction === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
              </IconButton>
            </div>
            <Divider />
            <List>{mailFolderListItems}</List>
            <Divider />
            <List>{otherMailFolderListItems}</List>
          </Drawer>
  
          <main className={classes.content}>
  <br></br><br></br>
  
  
            <Route path="/test1" exact component={Test1} />
            <Route path="/test2" exact component={Test2} />
            <Route path="/test3" exact component={Test3} />
            <Route path="/profil" exact component={profil} />
  
  
  
  
  
  
  
            <div className={classes.toolbar} />
            <Typography noWrap>{'You think water moves fast? You should see ice.'}</Typography>
          </main>
        </div>
  
      );
    }
  }
  
  MiniDrawer.propTypes = {
    classes: PropTypes.object.isRequired,
    theme: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles, { withTheme: true })(MiniDrawer);
  
  