proposal-system/web/src/components/Sidebar.tsx

import { useLocation, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import {
  Drawer,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Toolbar,
  Box,
} from '@mui/material';
import DashboardIcon from '@mui/icons-material/Dashboard';
import DescriptionIcon from '@mui/icons-material/Description';
import AddCircleIcon from '@mui/icons-material/AddCircle';
import { selectSidebarOpen } from '../app/slices/uiSlice';
import { selectUser } from '../app/slices/authSlice';
import type { RootState } from '../app/store';

const DRAWER_WIDTH = 240;

const dispatcherNav = [
  { label: 'Dashboard', path: '/', icon: <DashboardIcon /> },
  { label: 'My Proposals', path: '/proposals', icon: <DescriptionIcon /> },
  { label: 'New Proposal', path: '/proposals/new', icon: <AddCircleIcon /> },
];

export default function Sidebar() {
  const navigate = useNavigate();
  const location = useLocation();
  const open = useSelector((state: RootState) => selectSidebarOpen(state));
  const user = useSelector((state: RootState) => selectUser(state));

  const navItems = dispatcherNav;

  return (
    <Drawer
      variant="persistent"
      open={open}
      sx={{
        width: open ? DRAWER_WIDTH : 0,
        flexShrink: 0,
        '& .MuiDrawer-paper': {
          width: DRAWER_WIDTH,
          boxSizing: 'border-box',
        },
      }}
    >
      <Toolbar />
      <Box sx={{ overflow: 'auto' }}>
        <List>
          {navItems.map((item) => (
            <ListItemButton
              key={item.path}
              selected={location.pathname === item.path}
              onClick={() => navigate(item.path)}
            >
              <ListItemIcon>{item.icon}</ListItemIcon>
              <ListItemText primary={item.label} />
            </ListItemButton>
          ))}
        </List>
      </Box>
      {user && (
        <Box sx={{ p: 2, mt: 'auto', borderTop: 1, borderColor: 'divider' }}>
          <Box sx={{ fontSize: '0.85rem', fontWeight: 500 }}>{user.displayName}</Box>
          <Box sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>{user.role}</Box>
        </Box>
      )}
    </Drawer>
  );
}