ab/jobia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

sidebar

Browse source
This commit is contained in:
quasar 2025-05-30 13:39:38 +02:00
parent e1409cb8ca
commit 3883f0cef6
5 changed files with 128 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

91
frontend/src/components/Sidebar.tsx
View file

@ -36,58 +36,107 @@ const Sidebar: React.FC<SidebarProps> = ({ 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
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
>
{/* 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
{/* 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>
</Toolbar>
<Divider /> {/* Ligne de séparation */}
</Box>
<Divider sx={{ mb: 1 }} />
<Box sx={{ overflow: 'auto' }}> {/* Permet le défilement si le contenu dépasse */}
<List>
<List sx={{ px: 1 }}>
{/* Lien vers la page de recherche */}
<ListItem disablePadding>
<ListItemButton component={RouterLink} to="/">
<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' }} />
<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">
<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' }} />
<ListItemText
primary="Mes Favoris"
sx={{
color: 'text.primary',
'& .MuiTypography-root': {
fontWeight: 500,
},
}}
/>
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton component={RouterLink} to="/account">
<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' }} />
<ListItemText
primary="Mon Compte"
sx={{
color: 'text.primary',
'& .MuiTypography-root': {
fontWeight: 500,
},
}}
/>
</ListItemButton>
</ListItem> */}
</List>
<Divider />
<Divider sx={{ mt: 1 }} />
{/* Vous pouvez ajouter d'autres sections de liens ici */}
</Box>
</Drawer>