React Material Ui responsive drawer

0
votes

I created a responsive navigation bar using the React material UI Appbar component.

If the screen size is large, it shows tabs in the navigation bar. If the screen size is medium or smaller, it uses material UI responsive drawer to show the navigation bar (home, about, etc) on the left side right below the navigation bar. How can I move the responsive material UI drawer to the right?

https://material-ui.com/components/drawers/#responsive-drawer

1
reactjsmaterial-ui

1 Answers

0
votes

You can use the available anchor prop (read more here).

anchor='right'

         <Drawer
            container={container}
            variant="temporary"
            anchor='right'
            open={mobileOpen}
            onClose={handleDrawerToggle}
            classes={{
              paper: classes.drawerPaper,
          }}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
          >
         {drawer}
        </Drawer>

You can view the codesandbox here