front/src/components/Drawer/MainDrawer.tsx

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;