import sidebar

frontend/src/components/Sidebar.tsx

@@ -0,0 +1,97 @@
+// 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
+          borderRadius: '0 8px 8px 0', // Bords arrondis seulement à droite
+          overflowX: 'hidden', // Empêche le débordement horizontal
+        },
+      }}
+      variant="permanent" // La sidebar est toujours visible
+      anchor="left"       // Positionnée à gauche
+    >
+      {/* Un Toolbar pour s'aligner avec la Navbar en haut */}
+      {/* Peut être utilisé pour un logo ou un titre dans la sidebar si vous enlevez le titre de la Navbar */}
+      <Toolbar sx={{
+        backgroundColor: 'primary.main', // Assurez-vous que cette couleur correspond à la Navbar ou est transparente
+        minHeight: { xs: '56px', sm: '64px' }, // Hauteur de la Navbar
+      }}>
+        {/* Laissez vide ou ajoutez un logo/titre de l'application ici pour une disposition Notion-like */}
+        <Typography variant="h6" noWrap component="div" sx={{ color: 'primary.contrastText', display: 'flex', alignItems: 'center' }}>
+          <img src="/logo-jobfinder.png" alt="JobFinder Logo" style={{ height: '30px', marginRight: '10px' }} /> {/* Si vous avez un logo */}
+          JobFinder
+        </Typography>
+      </Toolbar>
+      <Divider /> {/* Ligne de séparation */}
+
+      <Box sx={{ overflow: 'auto' }}> {/* Permet le défilement si le contenu dépasse */}
+        <List>
+          {/* Lien vers la page de recherche */}
+          <ListItem disablePadding>
+            <ListItemButton component={RouterLink} to="/">
+              <ListItemIcon>
+                <SearchIcon sx={{ color: 'text.secondary' }} /> {/* Icône de recherche */}
+              </ListItemIcon>
+              <ListItemText primary="Rechercher" sx={{ color: 'text.primary' }} />
+            </ListItemButton>
+          </ListItem>
+
+          {/* FUTURS LIENS DE LA PHASE 3 */}
+          {/* <ListItem disablePadding>
+            <ListItemButton component={RouterLink} to="/favorites">
+              <ListItemIcon>
+                <StarIcon sx={{ color: 'text.secondary' }} />
+              </ListItemIcon>
+              <ListItemText primary="Mes Favoris" sx={{ color: 'text.primary' }} />
+            </ListItemButton>
+          </ListItem>
+          <ListItem disablePadding>
+            <ListItemButton component={RouterLink} to="/account">
+              <ListItemIcon>
+                <AccountCircleIcon sx={{ color: 'text.secondary' }} />
+              </ListItemIcon>
+              <ListItemText primary="Mon Compte" sx={{ color: 'text.primary' }} />
+            </ListItemButton>
+          </ListItem> */}
+        </List>
+        <Divider />
+        {/* Vous pouvez ajouter d'autres sections de liens ici */}
+      </Box>
+    </Drawer>
+  );
+};
+
+export default Sidebar;