jobia/frontend/src/components/Sidebar.tsx

// job/frontend/src/components/Sidebar.tsx
import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import {
  Drawer,        // Composant MUI pour la barre latérale
  Toolbar,       // Pour aligner le contenu après la Navbar
  List,          // Conteneur de liste
  ListItem,      // Élément de liste
  ListItemButton, // Bouton cliquable pour l'élément de liste
  ListItemIcon,  // Pour les icônes à gauche du texte
  ListItemText,  // Pour le texte de l'élément
  Typography,    // Pour les titres ou textes
  Divider,       // Séparateur visuel
  Box            // Conteneur générique
} from '@mui/material';

// Importation des icônes
import SearchIcon from '@mui/icons-material/Search';
// FUTURES ICÔNES POUR LES FAVORIS, COMPTE, ETC.
// import StarIcon from '@mui/icons-material/Star';
// import AccountCircleIcon from '@mui/icons-material/AccountCircle';

// Propriétés attendues par le composant Sidebar
interface SidebarProps {
  drawerWidth: number;
}

const Sidebar: React.FC<SidebarProps> = ({ drawerWidth }) => {
  return (
    <Drawer
      sx={{
        width: drawerWidth,
        flexShrink: 0,
        '& .MuiDrawer-paper': { // Style du "papier" (fond) de la sidebar
          width: drawerWidth,
          boxSizing: 'border-box',
          backgroundColor: 'background.paper', // Fond blanc du thème
          boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.05)', // Ombre douce
          borderRight: 'none',
          overflowX: 'hidden', // Empêche le débordement horizontal
          borderRadius: '0 12px 12px 0', // Bords arrondis seulement à droite
        },
      }}
      variant="permanent" // La sidebar est toujours visible
      anchor="left"       // Positionnée à gauche
    >
      {/* Section du haut de la Sidebar (similaire à Notion) */}
      <Box sx={{ p: 2, display: 'flex', alignItems: 'center', mb: 1 }}>
        <Typography variant="h6" sx={{ fontWeight: 600, color: 'text.primary' }}>
          JobIA
        </Typography>
      </Box>
      <Divider sx={{ mb: 1 }} />

      <Box sx={{ overflow: 'auto' }}> {/* Permet le défilement si le contenu dépasse */}
        <List sx={{ px: 1 }}>
          {/* Lien vers la page de recherche */}
          <ListItem disablePadding>
            <ListItemButton 
              component={RouterLink} 
              to="/"
              sx={{
                borderRadius: '6px',
                mb: 0.5,
                '&:hover': {
                  backgroundColor: 'rgba(0, 0, 0, 0.04)',
                },
              }}
            >
              <ListItemIcon>
                <SearchIcon sx={{ color: 'text.secondary' }} /> {/* Icône de recherche */}
              </ListItemIcon>
              <ListItemText 
                primary="Rechercher" 
                sx={{ 
                  color: 'text.primary',
                  '& .MuiTypography-root': {
                    fontWeight: 500,
                  },
                }} 
              />
            </ListItemButton>
          </ListItem>

          {/* FUTURS LIENS DE LA PHASE 3 */}
          {/* <ListItem disablePadding>
            <ListItemButton 
              component={RouterLink} 
              to="/favorites"
              sx={{
                borderRadius: '6px',
                mb: 0.5,
                '&:hover': {
                  backgroundColor: 'rgba(0, 0, 0, 0.04)',
                },
              }}
            >
              <ListItemIcon>
                <StarIcon sx={{ color: 'text.secondary' }} />
              </ListItemIcon>
              <ListItemText 
                primary="Mes Favoris" 
                sx={{ 
                  color: 'text.primary',
                  '& .MuiTypography-root': {
                    fontWeight: 500,
                  },
                }} 
              />
            </ListItemButton>
          </ListItem>
          <ListItem disablePadding>
            <ListItemButton 
              component={RouterLink} 
              to="/account"
              sx={{
                borderRadius: '6px',
                mb: 0.5,
                '&:hover': {
                  backgroundColor: 'rgba(0, 0, 0, 0.04)',
                },
              }}
            >
              <ListItemIcon>
                <AccountCircleIcon sx={{ color: 'text.secondary' }} />
              </ListItemIcon>
              <ListItemText 
                primary="Mon Compte" 
                sx={{ 
                  color: 'text.primary',
                  '& .MuiTypography-root': {
                    fontWeight: 500,
                  },
                }} 
              />
            </ListItemButton>
          </ListItem> */}
        </List>
        <Divider sx={{ mt: 1 }} />
        {/* Vous pouvez ajouter d'autres sections de liens ici */}
      </Box>
    </Drawer>
  );
};

export default Sidebar;