CodeSource
/
Readur
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(client): make a fancy navbar for the left side

This commit is contained in:
perf3ct 2025-07-15 16:16:36 +00:00
parent fd74c2e9d2
commit 603266bc5a
No known key found for this signature in database
GPG Key ID: 569C4EEC436F5232
1 changed files with 44 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/components/Layout/AppLayout.tsx
View File

@ -209,7 +209,50 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
</Box>
{/* Navigation */}
<List sx={{ flex: 1, px: 3, py: 2 }}>
<List sx={{
flex: 1,
px: 3,
py: 2,
overflowY: 'auto',
// Custom scrollbar styling
'&::-webkit-scrollbar': {
width: '8px',
borderRadius: '4px',
},
'&::-webkit-scrollbar-track': {
background: theme.palette.mode === 'light'
? 'rgba(226,232,240,0.3)'
: 'rgba(255,255,255,0.1)',
borderRadius: '4px',
margin: '8px 0',
},
'&::-webkit-scrollbar-thumb': {
background: theme.palette.mode === 'light'
? 'linear-gradient(135deg, rgba(99,102,241,0.6) 0%, rgba(139,92,246,0.6) 100%)'
: 'linear-gradient(135deg, rgba(99,102,241,0.8) 0%, rgba(139,92,246,0.8) 100%)',
borderRadius: '4px',
border: theme.palette.mode === 'light'
? '1px solid rgba(255,255,255,0.3)'
: '1px solid rgba(255,255,255,0.1)',
transition: 'all 0.2s ease-in-out',
'&:hover': {
background: theme.palette.mode === 'light'
? 'linear-gradient(135deg, rgba(99,102,241,0.8) 0%, rgba(139,92,246,0.8) 100%)'
: 'linear-gradient(135deg, rgba(99,102,241,1) 0%, rgba(139,92,246,1) 100%)',
transform: 'scale(1.1)',
},
},
'&::-webkit-scrollbar-thumb:active': {
background: theme.palette.mode === 'light'
? 'linear-gradient(135deg, rgba(99,102,241,0.9) 0%, rgba(139,92,246,0.9) 100%)'
: 'linear-gradient(135deg, rgba(99,102,241,1) 0%, rgba(139,92,246,1) 100%)',
},
// Firefox scrollbar styling
scrollbarWidth: 'thin',
scrollbarColor: theme.palette.mode === 'light'
? 'rgba(99,102,241,0.6) rgba(226,232,240,0.3)'
: 'rgba(99,102,241,0.8) rgba(255,255,255,0.1)',
}}>
{navigationItems.map((item) => {
const isActive = location.pathname === item.path;
const Icon = item.icon;