@material-ui/core#SwipeableDrawer TypeScript Examples

The following examples show how to use @material-ui/core#SwipeableDrawer. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: NavDrawer.tsx From akashlytics with GNU General Public License v3.0

5 votes

export function NavDrawer({ isDrawerOpen, toggleDrawer }) {
  const classes = useStyles();
  const anchor = "left";

  return (
    <React.Fragment>
      <SwipeableDrawer anchor={anchor} open={isDrawerOpen} onClose={toggleDrawer(false)} onOpen={toggleDrawer(true)}>
        <div className={clsx(classes.list)} role="presentation" onClick={toggleDrawer(false)} onKeyDown={toggleDrawer(false)}>
          <List
            subheader={
              <ListSubheader component={Link} to="/" id="nested-list-subheader" className={classes.listSubHeader}>
                <img src="/images/akashlytics_logo_compact_small.png" alt="Akashlytics logo" className={clsx(classes.listSubHeaderLogo, "App-logo")} />
              </ListSubheader>
            }
          >
            <ListItem button component={Link} to="/">
              <ListItemIcon>
                <DashboardIcon />
              </ListItemIcon>
              <ListItemText primary="Dashboard" />
            </ListItem>
            <ListItem button component={Link} to="/price-compare">
              <ListItemIcon>
                <AttachMoneyIcon />
              </ListItemIcon>
              <ListItemText primary="Compare price" />
            </ListItem>
            <ListItem button component={Link} to="/faq">
              <ListItemIcon>
                <HelpIcon />
              </ListItemIcon>
              <ListItemText primary="FAQ" />
            </ListItem>
            <ListItem button component={Link} to="/deploy">
              <ListItemIcon>
                <CloudUploadIcon />
              </ListItemIcon>
              <ListItemText primary="Deploy" />
            </ListItem>
          </List>
        </div>
      </SwipeableDrawer>
    </React.Fragment>
  );
}

Example #2

Source File: layout.tsx From mtcute with GNU Lesser General Public License v3.0

5 votes

function MobileNavigation({ path }: { path: string }) {
    const [drawer, setDrawer] = useState(false)

    const classes = useStyles()

    return (
        <>
            <IconButton
                color="inherit"
                aria-label="open drawer"
                onClick={() => setDrawer(true)}
                edge="start"
            >
                <MenuIcon />
            </IconButton>
            <SwipeableDrawer
                onClose={() => setDrawer(false)}
                onOpen={() => setDrawer(true)}
                open={drawer}
                className={classes.drawer}
                classes={{
                    paper: classes.drawerPaper,
                }}
            >
                <List>
                    {pages.map((page) => (
                        <ListItem
                            button
                            component={Link}
                            to={page.path}
                            selected={
                                page.regex
                                    ? !!path.match(page.regex)
                                    : path === page.path
                            }
                            className={classes.drawerItem}
                            key={page.name}
                        >
                            <ListItemText primary={page.name} />
                        </ListItem>
                    ))}
                </List>
            </SwipeableDrawer>
        </>
    )
}

Example #3

Source File: ResponsiveDrawer.tsx From UsTaxes with GNU Affero General Public License v3.0

4 votes

function ResponsiveDrawer(props: DrawerItemsProps): ReactElement {
  const classes = useStyles({ isMobile })
  const theme = useTheme()

  const { sections, isOpen, setOpen } = props

  const drawer = (
    <>
      {/* {isMobile && <Toolbar />} */}
      {sections.map(({ title, items }) => (
        <Fragment key={`section ${title}`}>
          <List
            subheader={<ListSubheader disableSticky>{title}</ListSubheader>}
            className={classes.list}
          >
            {items.map((item) => (
              <ListItem
                button
                classes={{}}
                key={item.title}
                component={NavLink}
                selected={location.pathname === item.url}
                to={item.url}
              >
                <ListItemText primary={`${item.title}`} />
              </ListItem>
            ))}
          </List>
          <Divider />
        </Fragment>
      ))}
      <List className={classes.listSocial}>
        <ListItem className={classes.listItemSocial}>
          <Link to={Urls.help}>
            <IconButton color="secondary" aria-label="help, support, feedback">
              <HelpOutlineRounded />
            </IconButton>
          </Link>
          <IconButton
            color="secondary"
            aria-label="github, opens in new tab"
            component="a"
            href={`https://github.com/ustaxes/UsTaxes`}
            target="_blank"
            rel="noreferrer noopener"
          >
            <GitHubIcon />
          </IconButton>
        </ListItem>
        <ListItem className={classes.listItemSocial}>
          <IconButton
            color="secondary"
            aria-label="twitter, opens in new tab"
            component="a"
            href={`https://www.twitter.com/ustaxesorg`}
            target="_blank"
            rel="noreferrer noopener"
          >
            <TwitterIcon />
          </IconButton>
        </ListItem>
        <ListItem className={classes.listItemSocial}>
          <Link to={Urls.settings}>
            <IconButton color="secondary" aria-label="site user settings">
              <Settings />
            </IconButton>
          </Link>
        </ListItem>
      </List>
    </>
  )

  return (
    <nav className={classes.drawer} aria-label="primary">
      <SwipeableDrawer
        variant={!isMobile ? 'persistent' : undefined}
        anchor={theme.direction === 'rtl' ? 'right' : 'left'}
        open={isOpen}
        onOpen={() => setOpen(true)}
        onClose={() => setOpen(false)}
        classes={{
          root: classes.drawerContainer,
          paper: classes.drawerPaper
        }}
        ModalProps={{
          BackdropProps: {
            classes: { root: classes.drawerBackdrop }
          }
          // Disabling for the time being due to scroll position persisting
          // keepMounted: isMobile ? true : false // Better open performance on mobile.
        }}
      >
        {drawer}
      </SwipeableDrawer>
    </nav>
  )
}