@material-ui/icons#HelpOutlineRounded TypeScript Examples

The following examples show how to use @material-ui/icons#HelpOutlineRounded. 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: 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>
  )
}