text: import React, { useEffect } from 'react';
  import {BrowserRouter} from "react-router-dom";
  import clsx from 'clsx';
  import { makeStyles } 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 Divider from '@material-ui/core/Divider';
  import IconButton from '@material-ui/core/IconButton';
  import Typography from '@material-ui/core/Typography';
  import MenuCloseIcon from '@material-ui/icons/Menu';
  import MenuOpenIcon from '@material-ui/icons/MenuOpen';
  import AccountCircle from '@material-ui/icons/AccountCircle';
  import { authenticationService } from './AuthService';
  import Routing from './Routing';
  import AccountMenu from './AccountMenu';
  import SideMenu from './SideMenu';
  
  
  import { AppInsightsContextProvider } from '../AppInsights/AppInsightsContext'
  
  const drawerWidth = 240;
  const margin = 36;
  const barHeight = 64;
  
  const useStyles = makeStyles((theme) => ({
      grow: {
          flexGrow: 1,
        },
        menuButton: {
          marginRight: margin,
        },
        title: {
          display: 'none',
          [theme.breakpoints.up('sm')]: {
            display: 'block',
          },
        },
      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,
        }),
      },
      content: {
        zIndex: theme.zIndex.drawer + 1,
        marginLeft: barHeight + margin,
        marginTop: barHeight + margin,
        transition: theme.transitions.create(['width', 'margin'], {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.leavingScreen,
        }),
      },
      contentShift: {
        marginLeft: drawerWidth,
        width: `calc(100% - ${drawerWidth}px)`,
        transition: theme.transitions.create(['width', 'margin'], {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.enteringScreen,
        }),
      },
      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,
        }),
      },
      drawerClose: {
        width: theme.spacing(7) + 1,
        transition: theme.transitions.create('width', {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.leavingScreen,
        }),
      overflowX: 'hidden',
        [theme.breakpoints.up('sm')]: {
          width: theme.spacing(7) + 1,
        },
      },
      toolbar: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        padding: theme.spacing(0, 1),
        // necessary for content to be below app bar
        ...theme.mixins.toolbar,
      },
    }));
  
  export default function MainLayout() {
    const classes = useStyles();
    const [open, setOpen] = React.useState(false);
    const [anchorEl, setAnchorEl] = React.useState(null);
    const [currentUser, setCurrentUser] = React.useState(null);
  
    const menuId = 'primary-account-menu';
    const isMenuOpen = Boolean(anchorEl);
   
    const handleProfileMenuOpen = (event) => {
      setAnchorEl(event.currentTarget);
    };
  
    const handleMenuClose = () => {
      setAnchorEl(null);
    };
  
    const handleDrawerOpen = () => {
      setOpen(true);
    };
  
    const handleDrawerClose = () => {
      setOpen(false);
    };
  
    useEffect(() => {
      let mounted = true;
      document.title = "Liminal - About";
      authenticationService.currentUser.subscribe(x => {
          if (mounted){
            setCurrentUser(x)
          }
      });
  
      return function cleanup() {
        mounted = false;
      }
    }, []);
  
    return (
      <div className={classes.grow}>
           <AppBar
            data-testid="menu-appbar"
            position="fixed"
            className={clsx(classes.appBar, {
              [classes.appBarShift]: open,
            })} >
          <Toolbar data-testid="menu-toolbar"> 
             <IconButton
                data-testid="menu-iconclose"
                color="inherit"
                aria-label="open drawer"
                onClick={handleDrawerOpen}
                edge="start"
                className={clsx(classes.menuButton, {
                  [classes.hide]: open,
                })}>
                <MenuCloseIcon />
              </IconButton> 
               <Typography variant="h6" noWrap data-testid="menu-heading">
                Liminal
              </Typography> 
             <div className={classes.grow} /> 
            <div className={classes.sectionDesktop}>
              <IconButton
                edge="end"
                aria-label="account of current user"
                aria-controls={menuId}
                aria-haspopup="true"
                onClick={handleProfileMenuOpen}
                color="inherit">
                <AccountCircle />
              </IconButton>
            </div> 
         </Toolbar>
        </AppBar> 
        <BrowserRouter>
          <AppInsightsContextProvider>
              <AccountMenu user={currentUser} menuId={menuId} anchor={anchorEl} open={isMenuOpen} closeHandler={handleMenuClose}></AccountMenu>
            <Drawer
              data-testid="menu-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.toolbar}>
                <IconButton onClick={handleDrawerClose} data-testid="menu-iconopen">
                  <MenuOpenIcon />
                </IconButton>
              </div> 
              <Divider data-testid="menu-divider"/>
              { currentUser &&
                <SideMenu open={open}></SideMenu>
              }
            </Drawer>
            <main className={clsx(classes.content, {
              [classes.contentShift]: open,
            })}>
              <Routing/>
            </main>
            </AppInsightsContextProvider>
          </BrowserRouter>
      </div>
    );
  }
  