78 lines (70 with data), 1.8 kB

import React from 'react';
import {
  Drawer,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Divider,
  styled,
} from '@mui/material';
import {
  Science,
  Timeline,
  Biotech,
  Dashboard,
  CloudQueue,
  Settings,
} from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';

const drawerWidth = 240;

const StyledDrawer = styled(Drawer)({
  width: drawerWidth,
  flexShrink: 0,
  '& .MuiDrawer-paper': {
    width: drawerWidth,
    boxSizing: 'border-box',
  },
});

interface SidebarProps {
  open: boolean;
  onClose: () => void;
}

const menuItems = [
  { text: 'Dashboard', icon: <Dashboard />, path: '/' },
  { text: 'Experiments', icon: <Science />, path: '/experiments' },
  { text: 'Gene Analysis', icon: <Biotech />, path: '/gene-analysis' },
  { text: 'Simulations', icon: <Timeline />, path: '/simulations' },
  { text: 'IoT Monitoring', icon: <CloudQueue />, path: '/monitoring' },
  { text: 'Settings', icon: <Settings />, path: '/settings' },
];

export const Sidebar: React.FC<SidebarProps> = ({ open, onClose }) => {
  const navigate = useNavigate();

  const handleNavigation = (path: string) => {
    navigate(path);
    onClose();
  };

  return (
    <StyledDrawer
      variant="temporary"
      anchor="left"
      open={open}
      onClose={onClose}
      ModalProps={{
        keepMounted: true, // Better mobile performance
      }}
    >
      <List>
        {menuItems.map((item) => (
          <React.Fragment key={item.text}>
            <ListItem onClick={() => handleNavigation(item.path)} sx={{ cursor: 'pointer' }}>
              <ListItemIcon>{item.icon}</ListItemIcon>
              <ListItemText primary={item.text} />
            </ListItem>
            {item.text === 'Dashboard' && <Divider />}
          </React.Fragment>
        ))}
      </List>
    </StyledDrawer>
  );
};