import * as React from 'react';
import Box from '@mui/material/Box';
import {NavigationMenu} from "./NavigationMenu";

export function SideNav() {
    return (
        <Box
            sx={{
                '--SideNav-background': 'var(--mui-palette-neutral-950)',
                '--SideNav-color': 'var(--mui-palette-common-white)',
                '--NavItem-color': 'var(--mui-palette-neutral-300)',
                '--NavItem-hover-background': 'rgba(255, 255, 255, 0.04)',
                '--NavItem-active-background': 'var(--mui-palette-primary-main)',
                '--NavItem-active-color': 'var(--mui-palette-primary-contrastText)',
                '--NavItem-disabled-color': 'var(--mui-palette-neutral-500)',
                '--NavItem-icon-color': 'var(--mui-palette-neutral-400)',
                '--NavItem-icon-active-color': 'var(--mui-palette-primary-contrastText)',
                '--NavItem-icon-disabled-color': 'var(--mui-palette-neutral-600)',
                bgcolor: 'var(--SideNav-background)',
                color: 'var(--SideNav-color)',
                display: {xs: 'none', xl: 'flex'},
                flexDirection: 'column',
                height: '100%',
                left: 0,
                maxWidth: '100%',
                position: 'fixed',
                scrollbarWidth: 'none',
                top: 0,
                width: 'var(--SideNav-width)',
                zIndex: 'var(--SideNav-zIndex)',
                '&::-webkit-scrollbar': {display: 'none'},
            }}
        >
            <NavigationMenu/>
        </Box>
    );
}