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

import { useDispatch } from 'react-redux';
import { AppBar, Toolbar, IconButton, Typography, Box, Avatar } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import LogoutIcon from '@mui/icons-material/Logout';
import { toggleSidebar } from '../app/slices/uiSlice';
import { useAuth } from '../hooks/useAuth';

export default function Topbar() {
  const dispatch = useDispatch();
  const { user, logout } = useAuth();

  const initials = user?.displayName
    ? user.displayName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
    : '';

  const isDevMode = !import.meta.env.VITE_COGNITO_DOMAIN;

  return (
    <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1, height: 64 }}>
      <Toolbar sx={{ height: 64, minHeight: 64 }}>
        <IconButton
          color="inherit"
          edge="start"
          onClick={() => dispatch(toggleSidebar())}
          sx={{ mr: 2 }}
          aria-label="Toggle sidebar menu"
        >
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" noWrap sx={{ flexGrow: 1, fontWeight: 600 }}>
          Proposal System
          {isDevMode && (
            <Box
              component="span"
              sx={{
                background: '#FEF3C7',
                color: '#92400E',
                border: '1px solid #FCD34D',
                height: 22,
                borderRadius: '999px',
                fontSize: '11px',
                fontWeight: 700,
                pl: '8px',
                pr: '8px',
                display: 'inline-flex',
                alignItems: 'center',
                ml: '12px',
                verticalAlign: 'middle',
              }}
            >
              DEV
            </Box>
          )}
        </Typography>
        {user && (
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
              <Avatar sx={{ width: 32, height: 32, bgcolor: '#0E7490', fontSize: 12, fontWeight: 600 }}>
                {initials}
              </Avatar>
              <Box sx={{ display: 'flex', flexDirection: 'column', lineHeight: 1.2 }}>
                <Typography sx={{ fontSize: '13px', fontWeight: 600, color: '#fff' }}>
                  {user.displayName}
                </Typography>
                <Typography sx={{ fontSize: '11px', color: 'rgba(255,255,255,0.55)' }}>
                  {user.role}
                </Typography>
              </Box>
            </Box>
            <Box sx={{ width: '1px', height: 24, bgcolor: 'rgba(255,255,255,0.12)', mx: 0.5 }} />
            <IconButton
              onClick={logout}
              size="small"
              aria-label="Log out"
              sx={{ color: 'rgba(255,255,255,0.55)', '&:hover': { color: '#ff6b6b', bgcolor: 'rgba(255,100,100,0.1)' } }}
            >
              <LogoutIcon fontSize="small" />
            </IconButton>
          </Box>
        )}
      </Toolbar>
    </AppBar>
  );
}