NavBar.js

import React,  {useEffect, useState} from 'react';
import { fade, makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import Badge from '@material-ui/core/Badge';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import AccountCircle from '@material-ui/icons/AccountCircle';
import MailIcon from '@material-ui/icons/Mail';
import NotificationsIcon from '@material-ui/icons/Notifications';
import MoreIcon from '@material-ui/icons/MoreVert';
import CloseIcon from '@material-ui/icons/Close';
import { Movies } from './Movies.js';

const useStyles = makeStyles((theme) => ({
  grow: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    display: 'none',
    [theme.breakpoints.up('sm')]: {
      display: 'block',
    },
  },
  search: {
    position: 'relative',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: fade(theme.palette.common.white, 0.15),
    '&:hover': {
      backgroundColor: fade(theme.palette.common.white, 0.25),
    },
    marginLeft: 0,
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      marginLeft: theme.spacing(3),
      width: 'auto',
      float:'right',
    },
  },
  searchIcon: {
    padding: theme.spacing(0, 1),
    height: '100%',
    position: 'absolute',
    pointerEvents: 'none',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inputRoot: {
    color: 'inherit',
  },
  inputInput: {
    padding: theme.spacing(1, 1, 1, 0),
    // vertical padding + font size from searchIcon
    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
    transition: theme.transitions.create('width'),
    width: '100%',
    [theme.breakpoints.up('md')]: {
      width: '20ch',
    },
  },
  sectionDesktop: {
    display: 'none',
    marginRight: 'auto',
    [theme.breakpoints.up('md')]: {
      display: 'flex',
    },
  },
  sectionMobile: {
    display: 'flex',
    [theme.breakpoints.up('md')]: {
      display: 'none',
    },
  },
    topSideBar: {
        backgroundColor: '#16161A',
        width: '300px',
        height: '60px',
    },
    sideDrawerdiv: {
        width: '300px',
        height: '320px',
        backgroundColor: '#0B0C0D',
        position: 'absolute',
        left: '0',
        zIndex: '1',
        top: '0'
    },
    category: {
        color: 'white',
        marginTop: '20px',
        fontSize: '15pt',
        textAlign: 'center',
        cursor:'pointer',
        '&:hover': {
            textDecoration: 'underline',
            transition:'backgroundColor color .25s ease-in-out',
        },
    },
    categories: {
       fontSize: '17pt',
       color: 'white',
       textAlign: 'center',
       paddingTop: '13px',
       marginLeft: '40px',
    },
    usernameStyle: {
       fontSize: '15pt',
       color: 'white',
       width: '85%',
       textAlign: 'center',
       paddingTop: '15px',
       position: 'absolute',
       top: '0px',
    },
    tintedBackground: {
        backgroundColor: 'black',
        opacity: '65%',
        width: '100%',
        height: '100%',
        position: 'absolute',
        zIndex: '1',
        top: '0'
    },
    menuIcon: {
        '&:hover': {
            transform: 'scale(1.4)',
            transition:'transform .25s ease-in-out',
        },
    },
    accountIcon: {
        '&:hover': {
            transform: 'scale(1.4)',
            transition:'transform .25s ease-in-out',
        },
    },
    sideAccountdiv: {
        width: '280px',
        height: '185px',
        backgroundColor: '#0B0C0D',
        position: 'absolute',
        right: '0',
        zIndex: '1',
        top: '0',
    },
    accountOptions: {
        color: 'white',
        marginTop: '20px',
        fontSize: '15pt',
        textAlign: 'center',
        cursor:'pointer',
        '&:hover': {
            textDecoration: 'underline',
            transition:'textDecoration .25s ease-in-out',
        },
    },
    closeIcon: {
        color: 'white',
        float: 'right',
        marginTop: '20px',
        marginRight: '20px',
        transform: 'scale(1.8)',
        cursor:'pointer',
        '&:hover': {
            transform: 'scale(2.4)',
            transition:'transform .15s ease-in-out',
        },
    },
    closeIconAccount: {
        color: 'white',
        float: 'left',
        marginLeft: '20px',
        marginTop: '5px',
        transform: 'scale(1.8)',
        cursor:'pointer',
        '&:hover': {
            transform: 'scale(2.4)',
            transition:'transform .15s ease-in-out',
        },
    },
    title: {
        '&:hover': {
            textDecoration: 'underline',
            transition:'backgroundColor color .25s ease-in-out',
        },
    }
}));

export default function NavBar() {
  const classes = useStyles();
  const [account, setAccount] = React.useState(false);
  const [sideDrawer, setSideDrawer] = React.useState(false);
  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);

  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
    

  const handleMobileMenuClose = () => {
    setMobileMoreAnchorEl(null);
  };
  
  const handleMenuClose = () => {
    handleMobileMenuClose();
  };

  const handleMobileMenuOpen = (event) => {
    setMobileMoreAnchorEl(event.currentTarget);
  };

  const menuId = 'primary-search-account-menu';
  const userID=localStorage.getItem('userid')
  const username=localStorage.getItem('username')
  const handleLogout = () => {
    localStorage.removeItem('userid')
    localStorage.removeItem('authorization')
    localStorage.removeItem('username')
    window.location.href='/'
    alert("Your have logged out successfully")
  };

  const mobileMenuId = 'primary-search-account-menu-mobile';
  const renderMobileMenu = (
    <Menu
      anchorEl={mobileMoreAnchorEl}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      id={mobileMenuId}
      keepMounted
      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      open={isMobileMenuOpen}
      onClose={handleMobileMenuClose}
    >
      <MenuItem>
        <IconButton aria-label="show 4 new mails" color="inherit">
          <Badge badgeContent={4} color="secondary">
            <MailIcon />
          </Badge>
        </IconButton>
        <p>Messages</p>
      </MenuItem>
      <MenuItem>
        <IconButton aria-label="show 11 new notifications" color="inherit">
          <Badge badgeContent={11} color="secondary">
            <NotificationsIcon />
          </Badge>
        </IconButton>
        <p>Notifications</p>
      </MenuItem>
      <MenuItem  onClick={() => {setAccount(account => !account)}}>
        <IconButton
          aria-label="account of current user"
          aria-controls="primary-search-account-menu"
          aria-haspopup="true"
          color="inherit"
        >
          <AccountCircle />
        </IconButton>
        <p>Profile</p>
      </MenuItem>
    </Menu>
  );

  return (
    <div className={classes.grow}>
      <AppBar position="static" style = {{backgroundColor: '#16161A', border: 0, height: '60px'}}>
        <Toolbar>
            <MenuIcon className={classes.menuIcon} style={{cursor:'pointer'}} onClick={() => {setSideDrawer(sideDrawer => !sideDrawer)}}
            />
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="open drawer"
            disableRipple= "true"
          >
          <Typography className={classes.title} onClick={() => {window.location.href='/allmovies'}} variant="h6" style = {{fontSize: 15,textAlign:'left', marginLeft:'30px', width:'49px', position:'relative', cursor:'pointer'}} noWrap>
            Movies
          </Typography></IconButton>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="open drawer"
            disableRipple= "true"
          >
          <Typography className={classes.title} onClick={() => {window.location.href='/recommended'}} variant="h6" style = {{fontSize: 15, textAlign:'left', marginLeft: '30px', marginRight: '30px', width:'103px', position:'relative', cursor:'pointer'}} noWrap>
            Recommended
          </Typography></IconButton>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="open drawer"
            disableRipple= "true"
          >
          <Typography className={classes.title} onClick={() => {window.location.href='/myreviews'}} variant="h6" style = {{fontSize: 15, textAlign:'left', width:'82px', position:'relative', cursor:'pointer'}} noWrap>
            My Reviews
          </Typography></IconButton>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="open drawer"
            disableRipple= "true"
          >
          <Typography className={classes.title} onClick={() => {window.location.href='/'}} variant="h6" style = {{fontFamily: 'Heiti TC', fontSize: 30, textAlign:'right', marginRight:'0', marginLeft:'160px',float: 'right',  width:'100%', position:'relative', cursor:'pointer'}} noWrap>
            - Movie Club -
          </Typography></IconButton>
            <div className={classes.grow} />
          <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchIcon />
            </div>
            <InputBase
              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ 'aria-label': 'search' }}
              onKeyDown={(event) => {
                   if (event.key === 'Enter'){
                        window.location=('/search/'+event.target.value)}}}
            />
          </div>
          <div className={classes.sectionDesktop}>
            <IconButton className={classes.accountIcon} onClick={() => {setAccount(account => !account)}}
              edge="end"
              aria-label="account of current user"
              aria-controls={menuId}
              aria-haspopup="true"
              color="inherit"
            >
              <AccountCircle 
                />
            </IconButton>
          </div>
          <div className={classes.sectionMobile}>
            <IconButton
              aria-label="show more"
              aria-controls={mobileMenuId}
              aria-haspopup="true"
              onClick={handleMobileMenuOpen}
              color="inherit"
            >
              <MoreIcon />
            </IconButton>
          </div>
        </Toolbar>
      </AppBar>
      {renderMobileMenu}
      {(() => {
        if(account){
            return(
                <React.Fragment>
                    <div className = {classes.tintedBackground}>
                    </div>
                    <div className = {classes.sideAccountdiv}>
                    <div className = {classes.topSideBar}>
                    </div>
            {(() => {
                    if(userID==null){
                        return(
                            <React.Fragment>
                            <p className={classes.usernameStyle}>Not logged in
                            <CloseIcon className={classes.closeIconAccount} onClick={() => {setAccount(account => !account)}}/>
                            </p>
                            <p className={classes.accountOptions} onClick={() => {window.location.href='/login'}}>Login</p>
                            <p className={classes.accountOptions} onClick={() => {window.location.href='/register'}}>Register</p>
                            </React.Fragment>
                            
                    )}else{
                        return(
                            <React.Fragment>
                                <p className={classes.usernameStyle}>{username}
                                <CloseIcon className={classes.closeIconAccount} onClick={() => {setAccount(account => !account)}}/>
                                </p>
                                <p className={classes.accountOptions} onClick={() => {window.location.href='/account/'+userID}}>Account</p>
                                <p className={classes.accountOptions} onClick={handleLogout}>Logout</p>
                            </React.Fragment>
                    )}
                    })()}
                    </div>
                            </React.Fragment>
                    )}
                })()}
                {(() => {
        if(sideDrawer){
            return(
                <React.Fragment>
                <div className = {classes.tintedBackground}>
                </div>
                <div className = {classes.sideDrawerdiv}>
                <div className = {classes.topSideBar}>
                    <CloseIcon className={classes.closeIcon} onClick={() => {setSideDrawer(sideDrawer => !sideDrawer)}}/>
                    <p className={classes.categories}>Categories</p>
                </div>
                    <p className={classes.category} onClick={() => {window.location.href='/categories/Action'}}>Action</p>
                    <p className={classes.category} onClick={() => {window.location.href='/categories/Drama'}} >Drama</p>
                    <p className={classes.category} onClick={() => {window.location.href='/categories/Fantasy'}} >Fantasy</p>
                    <p className={classes.category} onClick={() => {window.location.href='/categories/Horror'}} >Horror</p>
                    <p className={classes.category} onClick={() => {window.location.href='/categories/Thriller'}} >Thriller</p>
                </div>
                </React.Fragment>
                )
        }
    })()}
    </div>
  );
}