Ümit Tunç
108 lines
3.5 KiB
TypeScript
108 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import { Box, Tooltip, IconButton, Stack } from '@mui/material';
|
|
import {
|
|
Storage,
|
|
Terminal,
|
|
FileUpload,
|
|
Settings,
|
|
History
|
|
} from '@mui/icons-material';
|
|
|
|
interface NavigationRailProps {
|
|
activeTab: string;
|
|
onTabChange: (tab: string) => void;
|
|
}
|
|
|
|
const NavigationRail: React.FC<NavigationRailProps> = ({ activeTab, onTabChange }) => {
|
|
const tabs = [
|
|
{ id: 'explorer', icon: <Storage />, label: 'Explorer' },
|
|
{ id: 'sql', icon: <Terminal />, label: 'SQL Editor' },
|
|
{ id: 'transfer', icon: <FileUpload />, label: 'Import/Export' },
|
|
{ id: 'history', icon: <History />, label: 'Query History' },
|
|
];
|
|
|
|
return (
|
|
<Box sx={{
|
|
width: 72,
|
|
height: '100vh',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
py: 4,
|
|
bgcolor: (theme) => theme.palette.mode === 'dark' ? '#0a0f1d' : '#ffffff',
|
|
borderRight: 1,
|
|
borderColor: 'divider',
|
|
zIndex: 1200,
|
|
boxShadow: (theme) => theme.palette.mode === 'dark' ? 'none' : '4px 0 10px rgba(0,0,0,0.02)'
|
|
}}>
|
|
<Stack spacing={2.5} sx={{ width: '100%' }}>
|
|
{tabs.map((tab) => {
|
|
const isActive = activeTab === tab.id;
|
|
return (
|
|
<Box key={tab.id} sx={{ position: 'relative', width: '100%', display: 'flex', justifyContent: 'center' }}>
|
|
{/* Active Indicator - Elegant Pill Style */}
|
|
{isActive && (
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
left: 4,
|
|
top: '20%',
|
|
height: '60%',
|
|
width: 4,
|
|
bgcolor: 'primary.main',
|
|
borderRadius: 4,
|
|
boxShadow: '0 0 12px rgba(0, 97, 255, 0.4)'
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
<Tooltip title={tab.label} placement="right" arrow>
|
|
<IconButton
|
|
onClick={() => onTabChange(tab.id)}
|
|
sx={{
|
|
width: 48,
|
|
height: 48,
|
|
color: isActive ? 'primary.main' : 'text.secondary',
|
|
bgcolor: isActive ? 'rgba(0, 97, 255, 0.05)' : 'transparent',
|
|
borderRadius: '8px',
|
|
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'&:hover': {
|
|
bgcolor: isActive ? 'rgba(0, 97, 255, 0.1)' : 'rgba(0, 0, 0, 0.03)',
|
|
color: isActive ? 'primary.main' : 'primary.main',
|
|
'& .MuiSvgIcon-root': {
|
|
transform: 'scale(1.1)',
|
|
}
|
|
},
|
|
'& .MuiSvgIcon-root': {
|
|
fontSize: 26,
|
|
transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
}
|
|
}}
|
|
>
|
|
{tab.icon}
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Stack>
|
|
|
|
<Box sx={{ mt: 'auto' }}>
|
|
<Tooltip title="Settings" placement="right" arrow>
|
|
<IconButton sx={{
|
|
width: 48,
|
|
height: 48,
|
|
color: 'text.secondary',
|
|
transition: 'all 0.2s',
|
|
'&:hover': { color: 'primary.main', bgcolor: 'rgba(0, 0, 0, 0.03)' }
|
|
}}>
|
|
<Settings />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default NavigationRail;
|