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,isAdminLoggedIn} 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 = (
    isAdminLoggedIn() ?
    <div id="adminContent">
      <li>
        <Link className="dashboard" to='/dashboard'>Dashboard</Link>
      </li>
      <li>
        <Link className="application" to='/dashboard'>Application</Link>
      </li>
      <li>
        <Link className="proof" to='/dashboard'>Proof</Link>
      </li>
      <li>
        <Link className="payment" to='/dashboard'>Payment</Link>
      </li>
      <li>
        <Link className="client" >Client<KeyboardArrowDownIcon/></Link>
        <ul className='dropdown'>
          <li>
            <Link className="userSearchview" to='/userSearchview'>Users (GLD)</Link>
          </li>
          <li>
            <Link className="indUser" to='/indUser'>Users (Individual)</Link>
          </li>
          <li>
            <Link className="orgUser" to='/orgUser'>Users (Organization)</Link>
          </li>
          <li>
            <Link className="org" to='/org'>Organization</Link>
          </li>
          <li>
            <Link className="usergroupSearchview" to='/usergroupSearchview'>User Group</Link>
          </li>
        </ul>
      </li>
      <li>
        <Link className="logout" onClick={handleLogout}>Logout</Link>
      </li>
    </div>
    :
    <div id="individualUserContent">
      <li>
        <Link className="dashboard" to='/dashboard'>主頁</Link>
      </li>
      <li>
        <Link className="myDocumet" to='/dashboard'>我的公共啟示</Link>
      </li>
      <li>
        <Link className="documentRecord" to='/dashboard'>校對記錄</Link>
      </li>
      <li>
        <Link className="paymentRecord" to='/dashboard'>付款記錄</Link>
      </li>
      <li>
        <Link className="userSetting" to='/dashboard'>設定</Link>
      </li>
      <li>
        <Link className="logout" onClick={handleLogout}>登出</Link>
      </li>
    </div>
  );

  const logoutContent = (
    <div>
      <li>
        <Link className="login" to='/login'>登入</Link>
      </li>
      <li>
        <Link className="register" to='/register'>申請</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%">
          {isAdminLoggedIn()
            ?<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;