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,
  Typography,
} 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 AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
import AssignmentIcon from '@mui/icons-material/Assignment';
import PeopleIcon from '@mui/icons-material/People';
import { selectSidebarOpen } from '../app/slices/uiSlice';
import { selectUser } from '../app/slices/authSlice';
import type { RootState } from '../app/store';
import { DRAWER_WIDTH } from '../constants';

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

const adminNav = [
  { label: 'Admin Queue', path: '/admin', icon: <AdminPanelSettingsIcon fontSize="small" /> },
  { label: 'All Proposals', path: '/admin/proposals', icon: <AssignmentIcon fontSize="small" /> },
];

const sysadminNav = [
  { label: 'Users', path: '/admin/users', icon: <PeopleIcon fontSize="small" /> },
];

const ALL_NAV_PATHS = new Set(
  [...dispatcherNav, ...adminNav, ...sysadminNav].map(n => n.path)
);

function isNavActive(pathname: string, itemPath: string): boolean {
  if (pathname === itemPath) return true;
  if (ALL_NAV_PATHS.has(pathname)) return false;
  if (itemPath === '/' || itemPath === '/admin') return false;
  return pathname.startsWith(itemPath + '/');
}

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 isAdmin = user?.role === 'Admin' || user?.role === 'SysAdmin';
  const isSysAdmin = user?.role === 'SysAdmin';
  const navItems = dispatcherNav;

  return (
    <Drawer
      variant="persistent"
      open={open}
      sx={{
        width: open ? DRAWER_WIDTH : 0,
        flexShrink: 0,
        transition: 'width 250ms ease',
        '& .MuiDrawer-paper': {
          width: DRAWER_WIDTH,
          boxSizing: 'border-box',
        },
      }}
    >
      <Toolbar sx={{ minHeight: 64 }} />
      <Box sx={{ overflow: 'auto', flexGrow: 1, pt: 1 }}>
        <Typography
          sx={{
            fontSize: '11px',
            fontWeight: 600,
            letterSpacing: '1.2px',
            textTransform: 'uppercase',
            color: '#9aa0a6',
            px: 2.5,
            mb: 0.5,
          }}
        >
          Proposals
        </Typography>
        <List disablePadding>
          {navItems.map((item) => (
            <ListItemButton
              key={item.path}
              selected={isNavActive(location.pathname, item.path)}
              onClick={() => navigate(item.path)}
              sx={{ py: 1 }}
            >
              <ListItemIcon>{item.icon}</ListItemIcon>
              <ListItemText primary={item.label} primaryTypographyProps={{ fontSize: '13px' }} />
            </ListItemButton>
          ))}
        </List>

        {isAdmin && (
          <>
            <Typography
              sx={{
                fontSize: '11px',
                fontWeight: 600,
                letterSpacing: '1.2px',
                textTransform: 'uppercase',
                color: '#9aa0a6',
                px: 2.5,
                mt: 2,
                mb: 0.5,
              }}
            >
              Admin
            </Typography>
            <List disablePadding>
              {adminNav.map((item) => (
                <ListItemButton
                  key={item.path}
                  selected={isNavActive(location.pathname, item.path)}
                  onClick={() => navigate(item.path)}
                  sx={{ py: 1 }}
                >
                  <ListItemIcon>{item.icon}</ListItemIcon>
                  <ListItemText primary={item.label} primaryTypographyProps={{ fontSize: '13px' }} />
                </ListItemButton>
              ))}
              {isSysAdmin && sysadminNav.map((item) => (
                <ListItemButton
                  key={item.path}
                  selected={isNavActive(location.pathname, item.path)}
                  onClick={() => navigate(item.path)}
                  sx={{ py: 1 }}
                >
                  <ListItemIcon>{item.icon}</ListItemIcon>
                  <ListItemText primary={item.label} primaryTypographyProps={{ fontSize: '13px' }} />
                </ListItemButton>
              ))}
            </List>
          </>
        )}
      </Box>
      {user && (
        <Box sx={{ p: 2, mt: 'auto', borderTop: '1px solid #d9dde0' }}>
          <Box sx={{ fontSize: '13px', fontWeight: 500 }}>{user.displayName}</Box>
          <Box sx={{ fontSize: '11px', color: '#9aa0a6' }}>{user.role}</Box>
        </Box>
      )}
    </Drawer>
  );
}