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

// App shell sidebar — SHOC design system port (ADR 0003, mirrors app-sidebar.tsx).
// Expanded 244px / collapsed 76px; brand header row; grouped nav with SHOC
// active treatment (white card bg + shadow + 3px left accent bar).
import { useLocation, useNavigate } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { Drawer, Box, Tooltip, useMediaQuery, useTheme } from '@mui/material';
import {
  LayoutDashboard,
  FileText,
  CirclePlus,
  ClipboardList,
  FolderOpen,
  Building2,
  BookOpen,
  Users,
  type LucideIcon,
} from 'lucide-react';
import { selectSidebarOpen, setSidebarOpen } from '../app/slices/uiSlice';
import { selectUser } from '../app/slices/authSlice';
import type { RootState } from '../app/store';
import { DRAWER_WIDTH } from '../constants';
import BrandLockup, { BrandMark } from './brand/BrandLockup';

const COLLAPSED_WIDTH = 76; // --spacing-sidebar-collapsed

type NavEntry = { label: string; path: string; icon: LucideIcon };

const dispatcherNav: NavEntry[] = [
  { label: 'Dashboard', path: '/', icon: LayoutDashboard },
  { label: 'My Proposals', path: '/proposals', icon: FileText },
  { label: 'New Proposal', path: '/proposals/new', icon: CirclePlus },
];

const adminNav: NavEntry[] = [
  { label: 'Admin Queue', path: '/admin', icon: ClipboardList },
  { label: 'All Proposals', path: '/admin/proposals', icon: FolderOpen },
  { label: 'Customers', path: '/admin/customers', icon: Building2 },
  { label: 'Pricing Library', path: '/admin/pricing-library', icon: BookOpen },
];

const sysadminNav: NavEntry[] = [
  { label: 'Users', path: '/admin/users', icon: Users },
];

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 + '/');
}

function NavItem({
  item,
  active,
  collapsed,
  onClick,
}: {
  item: NavEntry;
  active: boolean;
  collapsed: boolean;
  onClick: () => void;
}) {
  const Icon = item.icon;
  const row = (
    <Box
      component="button"
      onClick={onClick}
      sx={{
        position: 'relative',
        display: 'flex',
        alignItems: 'center',
        justifyContent: collapsed ? 'center' : 'flex-start',
        gap: '12px',
        width: '100%',
        height: 40,
        mb: '4px',
        px: collapsed ? 0 : '12px',
        border: 'none',
        cursor: 'pointer',
        borderRadius: 'var(--radius-md)',
        fontFamily: 'var(--font-sans)',
        fontSize: 'var(--text-base)',
        fontWeight: active ? 600 : 500,
        textAlign: 'left',
        color: active ? 'var(--primary)' : 'var(--foreground)',
        backgroundColor: active ? 'var(--color-sidebar-item-active-bg)' : 'transparent',
        boxShadow: active ? 'var(--color-sidebar-item-active-shadow)' : 'none',
        transition: 'all var(--duration-fast) var(--ease-default)',
        '&:hover': active
          ? {}
          : {
              color: 'var(--primary-hover)',
              backgroundColor: 'var(--sidebar-accent)',
            },
        '& svg': {
          color: active ? 'var(--primary)' : 'var(--muted-foreground)',
          flexShrink: 0,
        },
        '&:hover svg': active ? {} : { color: 'var(--primary-hover)' },
      }}
    >
      {active && (
        <Box
          sx={{
            position: 'absolute',
            left: 0,
            top: '8px',
            bottom: '8px',
            width: '3px',
            borderRadius: '0 3px 3px 0',
            backgroundColor: 'var(--primary)',
          }}
        />
      )}
      <Icon size={19} />
      {!collapsed && (
        <Box component="span" sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {item.label}
        </Box>
      )}
    </Box>
  );

  if (collapsed) {
    return (
      <Tooltip key={item.path} title={item.label} placement="right" arrow>
        {row}
      </Tooltip>
    );
  }
  return row;
}

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

  const isMobile = useMediaQuery(theme.breakpoints.down('md')); // <900px

  const isAdmin = user?.role === 'Admin' || user?.role === 'SysAdmin';
  const isSysAdmin = user?.role === 'SysAdmin';

  // Desktop: hamburger toggles expanded (244) ↔ collapsed (76).
  // Mobile: temporary drawer, hamburger opens/closes it.
  const collapsed = !isMobile && !open;
  const width = collapsed ? COLLAPSED_WIDTH : DRAWER_WIDTH;

  const handleNavClick = (path: string) => {
    navigate(path);
    if (isMobile) {
      dispatch(setSidebarOpen(false));
    }
  };

  const groupLabel = (label: string) => (
    <Box className="text-nav-group" sx={{ px: '12px', pt: '10px', pb: '6px' }}>
      {label}
    </Box>
  );

  const groupDivider = (
    <Box sx={{ height: '1px', mx: '14px', my: '10px', backgroundColor: 'var(--color-sidebar-border)' }} />
  );

  const renderGroup = (label: string, items: NavEntry[], first: boolean) => (
    <>
      {collapsed ? (first ? null : groupDivider) : groupLabel(label)}
      {items.map((item) => (
        <NavItem
          key={item.path}
          item={item}
          active={isNavActive(location.pathname, item.path)}
          collapsed={collapsed}
          onClick={() => handleNavClick(item.path)}
        />
      ))}
    </>
  );

  return (
    <Drawer
      variant={isMobile ? 'temporary' : 'permanent'}
      open={isMobile ? open : true}
      onClose={() => dispatch(setSidebarOpen(false))}
      sx={{
        width: isMobile ? 0 : width,
        flexShrink: 0,
        '& .MuiDrawer-paper': {
          width: isMobile ? DRAWER_WIDTH : width,
          boxSizing: 'border-box',
          backgroundColor: 'var(--color-sidebar-bg)',
          borderRight: '1px solid var(--color-sidebar-border)',
          borderRadius: 0,
          overflowX: 'hidden',
          transition: 'width 200ms var(--ease-default, ease)',
        },
      }}
    >
      {/* Brand header row — 64px, white, aligns with the topbar */}
      <Box
        sx={{
          height: 'var(--spacing-topbar)',
          minHeight: 'var(--spacing-topbar)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: 'var(--card)',
          borderBottom: '1px solid var(--color-sidebar-border)',
          flexShrink: 0,
        }}
      >
        {collapsed ? <BrandMark /> : <BrandLockup />}
      </Box>

      <Box sx={{ overflowY: 'auto', overflowX: 'hidden', flexGrow: 1, py: 1, px: '8px' }}>
        {isAdmin && renderGroup('Admin', [...adminNav, ...(isSysAdmin ? sysadminNav : [])], true)}
        {renderGroup('Proposals', dispatcherNav, !isAdmin)}
      </Box>
    </Drawer>
  );
}