---
# System prepended metadata

title: NavBar.js

---

# NavBar.js

import * as React from 'react';
import { styled, useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import CssBaseline from '@mui/material/CssBaseline';
import MuiAppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import List from '@mui/material/List';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import MailIcon from '@mui/icons-material/Mail';
import ListSubheader from '@mui/material/ListSubheader';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import StarBorder from '@mui/icons-material/StarBorder';
import Collapse from '@mui/material/Collapse';
//Icon
import HomeIcon from '@mui/icons-material/Home';
import SettingsIcon from '@mui/icons-material/Settings';
import BuildCircleIcon from '@mui/icons-material/BuildCircle';
import AddCircleIcon from '@mui/icons-material/AddCircle';
import CloudCircleIcon from '@mui/icons-material/CloudCircle';
import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
//
import AuthService from './authority/services/auth.service';
import App from './App';
import { Button, Label } from 'reactstrap';
import EventBus from "./authority/common/EventBus";
//
import {
    Nav,
    NavLink,

} from "reactstrap";
//
const drawerWidth = 240;
//

//
const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
    ({ theme, open }) => ({
        flexGrow: 1,
        padding: theme.spacing(3),
        transition: theme.transitions.create('margin', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
        marginLeft: `-${drawerWidth}px`,
        ...(open && {
            transition: theme.transitions.create('margin', {
                easing: theme.transitions.easing.easeOut,
                duration: theme.transitions.duration.enteringScreen,
            }),
            // marginLeft: "0px",
            // marginRight: "0px",
            margin: "auto",
        }),
    }),
);

const AppBar = styled(MuiAppBar, {
    shouldForwardProp: (prop) => prop !== 'open',
})(({ theme, open }) => ({
    transition: theme.transitions.create(['margin', 'width'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
    }),
    ...(open && {
        width: `calc(100% - ${drawerWidth}px)`,
        marginLeft: `${drawerWidth}px`,
        // marginRight: "0px",
        transition: theme.transitions.create(['margin', 'width'], {
            easing: theme.transitions.easing.easeOut,
            duration: theme.transitions.duration.enteringScreen,
        }),
    }),
}));

const DrawerHeader = styled('div')(({ theme }) => ({
    display: 'flex',
    alignItems: 'center',
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
    justifyContent: 'flex-end',
}));

export default function PersistentDrawerLeft() {
    const theme = useTheme();
    const [open, setOpen] = React.useState(false);
    const [nestListOpenSys, setNesyListOpenSys] = React.useState(false);
    const [nestListOpenCr, setNesyListOpenCr] = React.useState(false);
    const [nestListOpenSt, setNesyListOpenSt] = React.useState(false);
    const [nestListOpenDb, setNesyListOpenDb] = React.useState(false);
    //
    const [currentUser, setCurrentUser] = React.useState(undefined);
    const user = AuthService.getCurrentUser();
    const [showModeratorBoard, setShowModeratorBoard] = React.useState();
    const [showAdminBoard, setShowAdminBoard] = React.useState();

    const Check = () => {
        if (user) {
            setCurrentUser(user);
            setShowModeratorBoard(user.roles.includes("ROLE_MODERATOR"));
            setShowAdminBoard(user.roles.includes("ROLE_ADMIN"));
            // showModeratorBoard: user.roles.includes("ROLE_MODERATOR"),
            // showAdminBoard: user.roles.includes("ROLE_ADMIN"),
        }
    }


    //
    EventBus.remove("logout");
    //
    const logOut = () => {
        AuthService.logout();
        setShowModeratorBoard(false);
        setShowAdminBoard(false);
        setCurrentUser(undefined);
        // this.setState({
        //   showModeratorBoard: false,
        //   showAdminBoard: false,
        //   currentUser: undefined,
        // });
    }
    //
    const handleDrawerOpen = () => {
        setOpen(true);
    };

    const handleDrawerClose = () => {
        setOpen(false);
    };
    //模組選單
    const handleNestListSys = () => {
        setNesyListOpenSys(!nestListOpenSys);
    }
    const handleNestListCr = () => {
        setNesyListOpenCr(!nestListOpenCr);
    }
    const handleNestListSt = () => {
        setNesyListOpenSt(!nestListOpenSt);
    }
    const handleNestListDb = () => {
        setNesyListOpenDb(!nestListOpenDb);
    }

    return (
        <Box sx={{ display: 'flex' }}>
            <CssBaseline />
            <AppBar position="fixed" open={open}>
                <Toolbar>
                    <IconButton
                        color="inherit"
                        aria-label="open drawer"
                        onClick={handleDrawerOpen}
                        edge="start"
                        sx={{ mr: 2, ...(open && { display: 'none' }) }}
                    >
                        <MenuIcon />
                    </IconButton>
                    <Typography variant="h5" noWrap component="div">
                        {/* <Button> */}
                        MMIS
                        {/* </Button> */}
                    </Typography>
                    {/*  */}
                    {currentUser ? (
                        <Nav>
                            <div className="navbar-nav ml-auto">

                                <a href="/login" className="nav-link" onClick={logOut}>
                                    LogOut
                                </a>


                            </div>
                            <div className="navbar-nav ml-auto">

                                <label >{currentUser.roles}</label>
                            </div>

                            {/* <NavItem>{currentUser.roles}</NavItem> */}

                        </Nav>
                    ) : (

                        <Nav>
                            <NavLink href="/login">登入</NavLink>


                            <NavLink href="/register">註冊</NavLink>
                        </Nav>

                    )}
                    {/*  */}
                </Toolbar>
            </AppBar>
            <Drawer
                sx={{
                    width: drawerWidth,
                    flexShrink: 0,
                    '& .MuiDrawer-paper': {
                        width: drawerWidth,
                        boxSizing: 'border-box',
                    },
                }}
                variant="persistent"
                anchor="left"
                open={open}
                color={"red"}
            >
                <DrawerHeader>
                    <IconButton onClick={handleDrawerClose}>
                        {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
                    </IconButton>
                </DrawerHeader>
                <ListSubheader component="div" id="nested-list-subheader">
                    主頁
                </ListSubheader>
                <Divider />
                <List>
                    {/* {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
                        <ListItem key={text} disablePadding>
                            <ListItemButton>
                                <ListItemIcon>
                                    {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
                                </ListItemIcon>
                                <ListItemText primary={text} />
                            </ListItemButton>
                        </ListItem>
                    ))} */}
                    <ListItemButton onClick={() => {
                        window.location.href = "/";
                    }}>
                        <ListItem disablePadding>
                            <ListItemIcon>
                                <HomeIcon />
                            </ListItemIcon>
                            <ListItemText primary={"主頁"} />
                        </ListItem >
                    </ListItemButton>
                    <ListSubheader component="div" id="nested-list-subheader">
                        模組
                    </ListSubheader>
                    <Divider />
                    <ListItem disablePadding>
                        <ListItemButton onClick={handleNestListSys} >
                            <ListItemIcon>
                                <SettingsIcon />
                            </ListItemIcon>
                            <ListItemText primary={"系統模組"} />
                            {nestListOpenSys ? <ExpandLess /> : <ExpandMore />}
                        </ListItemButton>
                    </ListItem>
                    <Collapse in={nestListOpenSys}>
                        <List>
                            <ListItem>
                                <ListItemButton onClick={() => {
                                    window.location.href = "/majorRoute";
                                }}>
                                    <ListItem disablePadding>
                                        <ListItemIcon>
                                            <BuildCircleIcon />
                                        </ListItemIcon>
                                        <ListItemText primary={"大路線"} />
                                    </ListItem >
                                </ListItemButton>
                            </ListItem>
                            <ListItem>
                                <ListItemButton onClick={() => {
                                    window.location.href = "/middleRoute";
                                }}>
                                    <ListItem disablePadding>
                                        <ListItemIcon>
                                            <BuildCircleIcon />
                                        </ListItemIcon>
                                        <ListItemText primary={"中路線"} />
                                    </ListItem >
                                </ListItemButton>
                            </ListItem>
                            <ListItem>
                                <ListItemButton onClick={() => {
                                    window.location.href = "/smallRoute";
                                }}>
                                    <ListItem disablePadding>
                                        <ListItemIcon>
                                            <BuildCircleIcon />
                                        </ListItemIcon>
                                        <ListItemText primary={"小路線"} />
                                    </ListItem >
                                </ListItemButton>
                            </ListItem>
                        </List>
                    </Collapse>
                    <ListItem disablePadding>
                        <ListItemButton onClick={handleNestListCr} >
                            <ListItemIcon>
                                <AddCircleIcon />
                            </ListItemIcon>
                            <ListItemText primary={"進貨模組"} />
                            {nestListOpenCr ? <ExpandLess /> : <ExpandMore />}
                        </ListItemButton>
                    </ListItem>
                    <Collapse in={nestListOpenCr}>
                        <List>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/suppliers";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"供應商"} />
                                </ListItemButton>
                            </ListItem>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/supplierType";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"供應商類型"} />
                                </ListItemButton>
                            </ListItem>

                        </List>
                    </Collapse>
                    <ListItem disablePadding>
                        <ListItemButton onClick={handleNestListSt} >
                            <ListItemIcon>
                                <CloudCircleIcon />
                            </ListItemIcon>
                            <ListItemText primary={"存貨模組"} />
                            {nestListOpenSt ? <ExpandLess /> : <ExpandMore />}
                        </ListItemButton>
                    </ListItem>
                    <Collapse in={nestListOpenSt}>
                        <List>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/products";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"商品"} />
                                </ListItemButton>
                            </ListItem>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/uoms";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"計量單位"} />
                                </ListItemButton>
                            </ListItem>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/categories";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"大分類"} />
                                </ListItemButton>
                            </ListItem>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/types";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"中分類"} />
                                </ListItemButton>
                            </ListItem>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/subGroups";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"小分類"} />
                                </ListItemButton>
                            </ListItem>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/dcSites";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"物流中心"} />
                                </ListItemButton>
                            </ListItem>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/dcWhBuildings";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"物流中心建物"} />
                                </ListItemButton>
                            </ListItem>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/warehouses";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"物流中心倉庫"} />
                                </ListItemButton>
                            </ListItem>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/searchDc";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"物流中心庫區"} />
                                </ListItemButton>
                            </ListItem>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/characteristics";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"倉庫屬性"} />
                                </ListItemButton>
                            </ListItem>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/stocktakings";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"盤點週期"} />
                                </ListItemButton>
                            </ListItem>

                        </List>
                    </Collapse>
                    <ListItem disablePadding>
                        <ListItemButton onClick={handleNestListDb} >
                            <ListItemIcon>
                                <RemoveCircleIcon />
                            </ListItemIcon>
                            <ListItemText primary={"出貨模組"} />
                            {nestListOpenDb ? <ExpandLess /> : <ExpandMore />}
                        </ListItemButton>
                    </ListItem>
                    <Collapse in={nestListOpenDb}>
                        <List>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/owners";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"貨主"} />
                                </ListItemButton>
                            </ListItem>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/customers";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"配送客戶"} />
                                </ListItemButton>
                            </ListItem>
                            <ListItem >
                                <ListItemButton disablePadding onClick={() => {
                                    window.location.href = "/categories";
                                }}>
                                    <ListItemIcon>
                                        <BuildCircleIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={"大分類"} />
                                </ListItemButton>
                            </ListItem>

                        </List>
                    </Collapse>
                </List>
            </Drawer>
            <Main open={open}>
                <DrawerHeader />
                <App />
            </Main>
        </Box>
    );
}