import { Box} from '@mui/material'
import React from 'react'
import { useNavigate } from 'react-router-dom';

import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';

const Sidebar = () => {
    const navigate = useNavigate();

    const showArticles = (e) => {
        console.log('Show articles');
        navigate('/Articles', {});
    };

    const showPurchases = (e) => {
        navigate('/', {});
    };

    const showAnalyses = (e) => {
        console.log('Show analyses');
        navigate('/Analyses', {});
    };

    return (
        <Box bgcolor="skyblue"
             flex={1}
             p={2}
             sx={{ display: {xs: "none", sm: "block"} }}
        > 
            <Stack spacing={2}> 
                <Button variant="text"
                        onClick={showPurchases}
                >
                    Einkäufe
                </Button>
                <Button variant="text"
                        onClick={showArticles}
                >
                    Artikel
                </Button>
                <Button variant="text"
                        onClick={showAnalyses}
                >
                    Analysen
                </Button>
            </Stack>
        </Box>
    )
    
}

export default Sidebar
