PNSPS-frontend-MaterialUI/src/layout/MainLayout/Header/index.js

import PropTypes from 'prop-types';
import React
, { useState }
  from 'react';
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";

// material-ui
// import { useTheme } from '@mui/material/styles';
import {
  AppBar,
  // Container,
  Typography,
  Box,
  Stack,
  // IconButton,
  // Menu,
  // MenuItem,
  // Button,
  // Tooltip,
  // Avatar,
  // Stack,
  Toolbar,
  Divider,
  // List,
  // ListItem,
  // ListItemButton,
  // ListItemText,
  IconButton,
  Drawer,
  //  useMediaQuery
} from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';

// project import
// import AppBarStyled from './AppBarStyled';
// import HeaderContent from './HeaderContent';
import Logo from 'components/Logo';
import AdminLogo from 'components/AdminLogo';
import MobileLogo from 'components/MobileLogo';
import Profile from './HeaderContent/Profile';
import "assets/style/navbarStyles.css";
import { isUserLoggedIn, isGLDLoggedIn, isPrimaryLoggedIn } from "utils/Utils";
import { handleLogoutFunction } from 'auth/index';

// assets
// import { MenuFoldOutlined,MenuOutlined } from '@ant-design/icons';
// import { AppBar } from '../../../../node_modules/@mui/material/index';
import { Link } from "react-router-dom";

const drawerWidth = 240;

// const navItems = ['Home', 'About', 'Contact'];
// ==============================|| MAIN LAYOUT - HEADER ||============================== //

function Header(props) {
  const { window } = props;
  const [mobileOpen, setMobileOpen] = useState(false);
  const dispatch = useDispatch()
  const navigate = useNavigate()

  const handleDrawerToggle = () => {
    setMobileOpen((prevState) => !prevState);
  };

  const handleLogout = async () => {
    dispatch(handleLogoutFunction());
    //await handleLogoutFunction();
    navigate('/login');
  };

  const loginContent = (
    isGLDLoggedIn() ?
      <div id="adminContent">
        <li>
          <Link className="dashboard" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ ml: 1 }} >Dashboard</Typography></Link>
        </li>
        <li>
          <Link className="application" to='/application/search'><Typography variant={"headerTitle1"} sx={{ ml: 1 }}>Application</Typography></Link>
        </li>
        <li>
          <Link className="proof" to='/proof/search'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Proof</Typography></Link>
        </li>
        <li>
          <Link className="payment" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Payment</Typography></Link>
        </li>
        <li>
          <Link className="client" ><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Client</Typography><KeyboardArrowDownIcon /></Link>
          <ul className='dropdown'>
            <li>
              <Link className="userSearchview" to='/userSearchview'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Users (GLD)</Typography></Link>
            </li>
            <li>
              <Link className="indUser" to='/indUser'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Users (Individual)</Typography></Link>
            </li>
            <li>
              <Link className="orgUser" to='/orgUser'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Users (Organisation)</Typography></Link>
            </li>
            <li>
              <Link className="org" to='/org'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Organisation</Typography></Link>
            </li>
            <li>
              <Link className="usergroupSearchview" to='/usergroupSearchview'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>User Group</Typography></Link>
            </li>

          </ul>
        </li>
        <li>
          <Link className="emailTemplate" to='/emailTemplate'><Typography variant={"headerTitle1"} sx={{ ml: 0 }}>Email Template</Typography></Link>
        </li>
        {/* <li>
          <Link className="logout" onClick={handleLogout}><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Logout</Typography></Link>
        </li> */}
      </div>
      :
      <div id="individualUserContent">
        <li>
          <Link className="dashboard" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>主頁</Typography></Link>
        </li>
        <li>
          <Link className="myDocumet" to='/publicNotice'><Typography variant={"headerTitle1"} sx={{ ml: 0.5 }}>我的公共啟事</Typography></Link>
        </li>
        <li>
          <Link className="documentRecord" to='/proof/search'><Typography variant={"headerTitle1"} sx={{ ml: 1.5 }}>校對記錄</Typography></Link>
        </li>
        <li>
          <Link className="paymentRecord" to='/paymentPage/search'><Typography variant={"headerTitle1"} sx={{ ml: 1.5 }}>付款記錄</Typography></Link>
        </li>
        <li>
          <Link className="userSetting" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>設定</Typography><KeyboardArrowDownIcon /></Link>
          {isPrimaryLoggedIn() ?
            <ul className='dropdown'>

              <li>
                <Link className="manageOrgUser" to='setting/manageUser'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>公司/機構用戶記錄</Typography></Link>
              </li>
            </ul>
            :
            <></>
          }
        </li>
        {/* <li>
          <Link className="logout" onClick={handleLogout}><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>登出</Typography></Link>
        </li> */}
      </div>
  );

  const logoutContent = (
    <div>
      <li>
        <Link className="login" to='/login'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>登入</Typography></Link>
      </li>
      <li>
        <Link className="register" to='/register'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>申請</Typography></Link>
      </li>
    </div>
  );

  const drawer = (
    isUserLoggedIn() ?
      <Stack id="sidebar" direction="column" justifyContent="center" alignItems="center" onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
        <Typography variant="h6" sx={{ my: 2 }}>
          PNSPS
        </Typography>
        <Divider />
        <ul id="sidebartop">
          {loginContent}
        </ul>
        <Divider />
        <ul id="sidebarbottom">
          <li>
            <Link className="logout" onClick={handleLogout}>登出</Link>
          </li>
        </ul>
      </Stack>
      :
      <Stack id="sidebar" direction="column" justifyContent="center" alignItems="center" onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
        <Typography variant="h6" sx={{ my: 2 }}>
          PNSPS
        </Typography>
        <Divider />
        <ul id="sidebartop">
          {logoutContent}
        </ul>
        <Divider />
      </Stack>
  );

  const container = window !== undefined ? () => window().document.body : undefined;
  return (
    isUserLoggedIn() ?
      // User Login success
      <Box>
        <AppBar component="nav">
          <Toolbar id="nav" width="100%">
            {isGLDLoggedIn()
              ? <Stack
                direction="row"
                justifyContent="flex-start"
                alignItems="center"
                spacing={0}
              >
                <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
                  <AdminLogo />
                </Box>
                <IconButton
                  color="inherit"
                  aria-label="open drawer"
                  edge="start"
                  onClick={handleDrawerToggle}
                  sx={{ mr: 2, display: { sm: 'none' } }}
                >
                  <MenuIcon style={{ color: '#0C489E' }} />
                </IconButton>
                <Box sx={{ mr: 2, display: { sm: 'none' } }}>
                  <MobileLogo />
                  <span id="mobileTitle" >PNSPS</span>
                </Box>
              </Stack> :
              <Stack
                direction="row"
                justifyContent="flex-start"
                alignItems="center"
                spacing={0}
              >
                <Box sx={{ width: '260px', flexGrow: 1, display: { xs: 'none', sm: 'block' } }}>
                  <Stack direction="row" justifyContent="flex-start" alignItems="center">
                    <Logo />
                    <Stack justifyContent="flex-start" alignItems="center">
                      <span id="systemTitle">公共啟事提交</span>
                      <span id="systemTitle">及繳費系統</span>
                    </Stack>
                  </Stack>
                </Box>
                <IconButton
                  color="inherit"
                  aria-label="open drawer"
                  edge="start"
                  onClick={handleDrawerToggle}
                  sx={{ mr: 2, display: { sm: 'none' } }}
                >
                  <MenuIcon style={{ color: '#0C489E' }} />
                </IconButton>
                <Box sx={{ mr: 2, display: { sm: 'none' } }}>
                  <Stack direction="row" justifyContent="flex-start" alignItems="center">
                    <MobileLogo />
                    <span id="mobileTitle" >公共啟事提交及繳費系統</span>
                  </Stack>
                </Box>
              </Stack>
            }

            <Box sx={{ display: { xs: 'none', sm: 'block' }, width: "100%" }}>
              <Stack
                direction="row"
                justifyContent="space-between"
                alignItems="center"
                spacing={1}
              >
                <ul id="navbar" width="100%" >
                  {loginContent}
                </ul>
                <Profile />
              </Stack>
            </Box>
          </Toolbar>
        </AppBar>
        <Box component="nav">
          <Drawer
            container={container}
            variant="temporary"
            open={mobileOpen}
            onClose={handleDrawerToggle}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
            sx={{
              display: { xs: 'block', sm: 'none' },
              '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
            }}
          >
            {drawer}
          </Drawer>
        </Box>
      </Box> :
      <Box>
        <AppBar component="nav">
          <Toolbar id="nav" width="100%">
            <Stack
              direction="row"
              justifyContent="flex-start"
              alignItems="center"
              spacing={0}
            >
              <Box sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}>
                <Stack direction="row" justifyContent="flex-start" alignItems="center">
                  <Logo />
                  <Stack justifyContent="flex-start" alignItems="center">
                    <span id="systemTitle">公共啟事提交及繳費系統</span>
                  </Stack>
                </Stack>
              </Box>
              <IconButton
                color="inherit"
                aria-label="open drawer"
                edge="start"
                onClick={handleDrawerToggle}
                sx={{ mr: 2, display: { sm: 'none' } }}
              >
                <MenuIcon style={{ color: '#0C489E' }} />
              </IconButton>
              <Box sx={{ mr: 2, display: { sm: 'none' } }}>
                <MobileLogo />
                <span id="mobileTitle" >公共啟事提交及繳費系統</span>
              </Box>
            </Stack>
            <Box sx={{ display: { xs: 'none', sm: 'block' }, width: "75%" }}>
              <Stack
                direction="row"
                justifyContent="space-between"
                alignItems="center"
                spacing={1}
              >
                <ul id="navbar" width="100%" >
                  {logoutContent}
                </ul>
                {/* <Profile /> */}
              </Stack>
            </Box>
          </Toolbar>
        </AppBar>
        <Box component="nav">
          <Drawer
            container={container}
            variant="temporary"
            open={mobileOpen}
            onClose={handleDrawerToggle}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
            sx={{
              display: { xs: 'block', sm: 'none' },
              '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
            }}
          >
            {drawer}
          </Drawer>
        </Box>
      </Box>
  );
}
Header.propTypes = {
  /**
   * Injected by the documentation to work in an iframe.
   * You won't need it on your project.
   */
  window: PropTypes.func,
};
export default Header;