how to hide appbar (material-ui) in desktop view and visible in mobile view in react-hooks?

i am trying to make template with material-ui where the side drawer will be visible in desktop view and appBar will be invisible. in mobile view side drawer will be invisible but appbar will be visible at top.

i am trying to simulate it over here

but the problem is that i am not able to hide appBar in desktop view and couldn't make it visible in mobile view. the source codes can be found in codeSandBox.

for drawer the styles code is like this:

  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    overflowX: 'hidden',
    [theme.breakpoints.down('sm')]: {
      width: theme.spacing(0) + 1,
    }, 
  },
  drawerPaper: {
   width: drawerWidth,
 [theme.breakpoints.down('sm')]: {
      width: theme.spacing(0) + 1,
    },  
  },

for appbar the same style is not working:

   appBar: {
    zIndex: theme.zIndex.drawer + 1,
    [theme.breakpoints.down('sm')]: {
      width: theme.spacing(0) + 1,
    },  
  },
  appBarClose:{
    zIndex: theme.zIndex.drawer + 1,
    flexShrink: 0,
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    overflowX: 'hidden',
    [theme.breakpoints.down('sm')]: {
      width: theme.spacing(0) + 1,
    },
  },

the template should be responsive and that's why this kind of change is required.

can anyone help me on this?



Read more here: https://stackoverflow.com/questions/68473591/how-to-hide-appbar-material-ui-in-desktop-view-and-visible-in-mobile-view-in-r

Content Attribution

This content was originally published by rony01 at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: