Mui:Drawer

import React from 'react';
import Box from '@mui/material/Box';
import TopBar from './components/TopBar';
import AppBar from '@mui/material/AppBar';
import CssBaseline from '@mui/material/CssBaseline';
import {useNavigate, Outlet} from 'react-router-dom';
import {paths} from './routes/router';
import {useSelector} from 'react-redux';
import {selectWork} from './stores/apis/work';
import './App.css';

import Avatar from '@mui/material/Avatar';
import Drawer from '@mui/material/Drawer';
import Toolbar from '@mui/material/Toolbar';
import List from '@mui/material/List';
import Divider from '@mui/material/Divider';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import ListItemText from '@mui/material/ListItemText';
import ShowChartIcon from '@mui/icons-material/ShowChart';
import ImageIcon from '@mui/icons-material/Image';
import LocalShippingIcon from '@mui/icons-material/LocalShipping';

const ToolbarSpace = () => {
  return <Toolbar variant="dense" />;
};

function App() {
  const navigate = useNavigate();
  const work = useSelector(selectWork);
  const workId = work.index;

  const onInformation = () => {
    // EMPTY.
  };

  const onDashboard = () => {
    navigate(paths.charging);
  };

  const onPreview = () => {
    // EMPTY.
  };

  const onStatistic = () => {
    // EMPTY.
  };

  const onCharging = () => {
    navigate(paths.charging);
  };

  const onAdmin = () => {
    // EMPTY.
  };

  const drawerWidth = 240;
  const drawer = (
    <Drawer
      variant="permanent"
      sx={{
        width: drawerWidth,
        flexShrink: 0,
        [`& .MuiDrawer-paper`]: {width: drawerWidth, boxSizing: 'border-box'},
      }}
    >
      <ToolbarSpace />
      <Box sx={{overflow: 'auto'}}>
        <List>
          <ListItem disablePadding onClick={onInformation}>
            <ListItemButton>
              <ListItemAvatar>
                <Avatar variant="square">
                  <LocalShippingIcon />
                </Avatar>
              </ListItemAvatar>
              <ListItemText
                primary="경기18바9151"
                primaryTypographyProps={{fontWeight: 'bold'}}
                secondary="C22033220115"
              />
            </ListItemButton>
          </ListItem>

          <Divider />

          <ListItem disablePadding onClick={onPreview}>
            <ListItemButton>
              <ListItemIcon>
                <ImageIcon />
              </ListItemIcon>
              <ListItemText primary="이벤트 영상" />
            </ListItemButton>
          </ListItem>

          <ListItem disablePadding onClick={onStatistic}>
            <ListItemButton>
              <ListItemIcon>
                <ShowChartIcon />
              </ListItemIcon>
              <ListItemText primary="통계 분석" />
            </ListItemButton>
          </ListItem>
        </List>
      </Box>
    </Drawer>
  );

  return (
    <Box sx={{display: 'flex'}}>
      <CssBaseline />
      <AppBar position="fixed" sx={{zIndex: theme => theme.zIndex.drawer + 1}}>
        <TopBar
          onClickDashboard={onDashboard}
          onClickCharging={onCharging}
          onClickAdmin={onAdmin}
        />
      </AppBar>

      {workId !== 0 && drawer}

      <Box component="main" sx={{flexGrow: 1}}>
        <ToolbarSpace />

        <CssBaseline />
        <Outlet />
      </Box>
    </Box>
  );
}

export default App;