Spaces:
Sleeping
Sleeping
File size: 3,640 Bytes
22d5503 d909077 15975c4 d909077 15975c4 d909077 15975c4 d909077 15975c4 d909077 15975c4 d909077 15975c4 d909077 15975c4 d909077 15975c4 d909077 15975c4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
import { Box, DrawerProps, Fab, Typography } from "@mui/material";
import { FC, useEffect, useState } from 'react';
import { Link, useLocation } from "react-router-dom";
import { AddOutlined } from "@mui/icons-material";
import Add from "@mui/icons-material/Add";
const MainDrawer: FC<DrawerProps> = (props) => {
const { onClose, ...others } = props;
// const categories = [
// {
// id: 'Build',
// children: [
// {
// id: 'Authentication',
// icon: <PeopleIcon />,
// },
// { id: 'Database', icon: <PeopleIcon /> },
// { id: 'Storage', icon: <PermMediaOutlinedIcon /> },
// { id: 'Hosting', icon: <PublicIcon /> },
// { id: 'Functions', icon: <SettingsEthernetIcon /> },
// {
// id: 'Machine learning',
// icon: <SettingsInputComponentIcon />,
// },
// ],
// },
// ];
const location = useLocation();
const [selectedIndex, setSelectedIndex] = useState(location.pathname.replace('/', ''));
useEffect(() => {
setSelectedIndex(location.pathname.replace('/', ''));
}, [location.pathname])
const handleListItemClick = (index: string) => {
setSelectedIndex(index);
onClose?.({}, 'backdropClick');
};
return (
<>
<Box sx={{py:1}}/>
<Fab color='tertiary' sx={{mx: 2, px: 1, py:1, height: "50px"}} variant='extended' component={Link} to='/Inference' onClick={() => handleListItemClick('Inference')}>
{selectedIndex == 'Inference' ? <Add sx={{ mr: 1 }} /> : <AddOutlined sx={{ mr: 1 }} />}
<Typography color="inherit" sx={{ mr: 1, fontSize: 16, fontWeight: 500, mt:0.3}}>New inference</Typography>
</Fab>
<Box sx={{py:1}}/>
{/* <List>
<Box>
<ListItem >
<ListItemButton component={Link} to='/Home' selected={selectedIndex == 'Home'} onClick={() => handleListItemClick('Home')}>
<ListItemIcon>
{selectedIndex == 'Home' ? <HomeIcon /> : <HomeIconOutlined />}
</ListItemIcon>
<ListItemText>Home</ListItemText>
</ListItemButton>
</ListItem>
<ListItem >
<ListItemButton component={Link} to='/Inference' selected={selectedIndex == 'Inference'} onClick={() => handleListItemClick('Inference')}>
<ListItemIcon>
{selectedIndex == 'Inference' ? <PaletteTwoToneIcon /> : <PaletteOutlinedIcon />}
</ListItemIcon>
<ListItemText>Inference</ListItemText>
</ListItemButton>
</ListItem>
<ListItem >
<ListItemButton component={Link} to='/About' selected={selectedIndex == 'About'} onClick={() => handleListItemClick('About')}>
<ListItemIcon>
{selectedIndex == 'About' ? <InfoIcon /> : <InfoIconOutlined />}
</ListItemIcon>
<ListItemText>About</ListItemText>
</ListItemButton>
</ListItem>
</Box>
</List> */}
</>
);
};
export default MainDrawer; |