AVATAR & BOX Display SCREEN in REACT JS

 DISPLAY SCREEN in REACT JS

If Box is sm Screen then he Showing another not Showing:-

<Box sx={{ display: { xs: 'none', sm: 'block' } }}>

    {navItems.map((item, index) => (

        <Button key={item} href={navRoutes[index]} sx={{ color: '#fff' }}>

            {item}

        </Button>

    ))}

</Box>

If AVATAR is sm Screen then he Showing another not Showing:-

<Avatar sx={{ display: {sm: 'none'}, bgcolor: 'red' }}>N</Avatar>