import { Box } from '@mui/material';
import React from 'react';

const Sidebar = () => {
    return (
        <Box id="app-sidebar" sx={{
            width: '250px',
            height: '100%',
            overflow: 'hidden',
            borderRadius: (theme) => theme.shape.borderRadius,
            bgcolor: 'background.paper',
        }}>
            <Box sx={{
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
                gap: 1.5,
                p: 1.5,
            }}>
                <Box sx={{
                    height: 50,
                    width: '100%',
                    bgcolor: 'primary.main',
                    borderRadius: (theme) => `${theme.shape.borderRadius} ${theme.shape.borderRadius} 0 0`,
                }} />
                <Box sx={{
                    height: 50,
                    width: '100%',
                    bgcolor: 'primary.main',
                }} />
                <Box sx={{
                    height: 50,
                    width: '100%',
                    bgcolor: 'primary.main',
                }} />
                <Box sx={{
                    height: 50,
                    width: '100%',
                    bgcolor: 'primary.main',
                }} />
                <Box sx={{
                    height: 50,
                    width: '100%',
                    bgcolor: 'primary.main',
                }} />
            </Box>
        </Box>
    )
}

export default Sidebar