@material-ui/icons#Home JavaScript Examples

The following examples show how to use @material-ui/icons#Home. 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: blog-post.jsx    From markdown-dungeon with MIT License 6 votes vote down vote up 
// highlight-start
export default function BlogPost({ data }) {
  const post = data.markdownRemark;
  let html = post.html.replace(/.md/gi, '');
  if (post.fields?.slug.includes('README')) {
    html = html.replace(
      './LICENSE',
      `${process.env.GATSBY_GITHUB_REPO_URL}/blob/master/LICENSE`
    );
  }
  // highlight-end
  return (
    <Layout>
      <Link href="#" onClick={() => window.location.href = '/'} color="primary"><Home /></Link>
      <div style={{ padding: `1.5rem 1.5rem` }}>
        <div dangerouslySetInnerHTML={{ __html: html }} />
      </div>
    </Layout >
  );
}
Example #2
Source File: Navigation.js    From pwa with MIT License 6 votes vote down vote up 
routes = [
  {
    to: '/home',
    label: 'خانه',
    icon: <Home />,
  },
  {
    to: '/map',
    label: 'نقشه',
    icon: <Map />,
  },
  {
    to: '/my-activities',
    label: 'من',
    icon: <Person />,
  },
  {
    to: '/family-activities',
    label: 'خانواده',
    icon: <People />,
  },
  {
    to: '/informing',
    label: 'آگاهی‌بخشی',
    icon: <Assignment />,
  },
]
Example #3
Source File: Navigators.js    From clone-instagram-ui with MIT License 5 votes vote down vote up 
Navigators = ({ className, username, onNavigationClick }) => {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = (type) => {
    setAnchorEl(null);
    if (type === 'log-out') {
      removeUserInformation();
      window.location.reload();
    }
  };
  return (
    <Toolbar className={className}>
      {username && (
        <React.Fragment>
          <Link to={`/home`} className="navigation-link">
            <IconButton edge="start" color="inherit" aria-label="menu">
              <Home />
            </IconButton>
          </Link>
          <IconButton color="inherit" aria-label="menu">
            <FavoriteBorderOutlined />
          </IconButton>
          <IconButton
            onClick={onNavigationClick.bind(null, 'add-media')}
            color="inherit"
            aria-label="menu"
          >
            <Add />
          </IconButton>
          {/* <Link to={`/profile/${username}`} className="navigation-link"></Link> */}
          <IconButton
            color="inherit"
            aria-label="menu"
            aria-controls="simple-menu"
            aria-haspopup="true"
            onClick={handleClick}
          >
            <Profile username={username} />
          </IconButton>
          <Menu
            id="simple-menu"
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
          >
            <Link to={`/profile/${username}`} className="navigation-link">
              <MenuItem onClick={handleClose.bind(null, 'profile')}>
                Profile
              </MenuItem>
            </Link>
            <MenuItem onClick={handleClose.bind(null, 'log-out')}>
              Logout
            </MenuItem>
          </Menu>
        </React.Fragment>
      )}
      {!username && (
        <Link to="/start">
          <span>Login / Signup</span>
        </Link>
      )}
    </Toolbar>
  );
}
Example #4
Source File: MainAppBar.js    From landlord with MIT License 4 votes vote down vote up 
export default function MainAppBar(props) {
  const classes = useStyles();
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleDrawerToggle = (variant) => {
    setMobileOpen(variant === "temporary" && !mobileOpen);
  };

  const drawer = (variant) => (
      <div>
        <div className={classes.toolbar}/>
        <Divider/>
        <List component="nav">
          <ListItem button component={Link} to="/" onClick={() => handleDrawerToggle(variant)} key={"/"}>
            <ListItemIcon><Home/></ListItemIcon>
            <ListItemText primary="Home"/>
          </ListItem>

          <ListItem button component={Link} to="/out-of-omaha" onClick={() => handleDrawerToggle(variant)} key={"/out-of-omaha"}>
            <ListItemIcon><LocationCity/></ListItemIcon>
            <ListItemText primary="Out of Omaha"/>
          </ListItem>
          <List component="div" disablePadding dense>
            <ListItem className={classes.nested} button component={Link} to="/out-of-omaha/map" onClick={() => handleDrawerToggle(variant)} key={"/out-of-omaha/map"}>
              <ListItemIcon><Place/></ListItemIcon>
              <ListItemText primary="Out of Omaha Map"/>
            </ListItem>
          </List>

          <ListItem button component={Link} to="/out-of-state" onClick={() => handleDrawerToggle(variant)} key={"/out-of-state"}>
            <ListItemIcon><Map/></ListItemIcon>
            <ListItemText primary="Out of State"/>
          </ListItem>
          <List component="div" disablePadding dense>
            <ListItem className={classes.nested} button component={Link} to="/out-of-state/map" onClick={() => handleDrawerToggle(variant)} key={"/out-of-state/map"}>
              <ListItemIcon><Place/></ListItemIcon>
              <ListItemText primary="Out of State Map"/>
            </ListItem>
          </List>

          <ListItem button component={Link} to="/low-condition" onClick={() => handleDrawerToggle(variant)} key={"/low-condition"}>
            <ListItemIcon><TrendingDown/></ListItemIcon>
            <ListItemText primary="Low Condition"/>
          </ListItem>
          <List component="div" disablePadding dense>
            <ListItem className={classes.nested} button component={Link} to="/low-condition/map" onClick={() => handleDrawerToggle(variant)} key={"/low-condition/map"}>
              <ListItemIcon><Place/></ListItemIcon>
              <ListItemText primary="Low Condition Map"/>
            </ListItem>
          </List>

          <ListItem button component={Link} to="/about" onClick={() => handleDrawerToggle(variant)} key={"/about"}>
            <ListItemIcon><Info/></ListItemIcon>
            <ListItemText primary="About"/>
          </ListItem>
        </List>
      </div>
  );

  return (
      <div className={classes.root}>
        <CssBaseline/>
        <AppBar position="fixed" className={classes.appBar}>
          <Toolbar>
            <IconButton
                color="inherit"
                aria-label="open drawer"
                edge="start"
                onClick={() => handleDrawerToggle("temporary")}
                className={classes.menuButton}
            >
              <MenuIcon/>
            </IconButton>
            <img src="/landlord/favicon.png" alt="logo" className={classes.logo} width={30} height={30}/>
            <Typography variant="h6" noWrap>
              Landlords of Omaha
            </Typography>
          </Toolbar>
        </AppBar>
        <nav className={classes.drawer}>
          <Hidden mdUp implementation="css">
            <Drawer
                variant="temporary"
                anchor="left"
                open={mobileOpen}
                onClose={() => handleDrawerToggle("temporary")}
                classes={{
                  paper: classes.drawerPaper,
                }}
                ModalProps={{
                  keepMounted: true, // Better open performance on mobile.
                }}
            >
              {drawer("temporary")}
            </Drawer>
          </Hidden>
          <Hidden smDown implementation="css">
            <Drawer
                classes={{
                  paper: classes.drawerPaper,
                }}
                variant="permanent"
                open
            >
              {drawer("permanent")}
            </Drawer>
          </Hidden>
        </nav>
        <div className={classes.contentWrapper}>
          <div className={classes.toolbar}/>
          <main className={classes.main}>
            {props.children}
          </main>

          <footer className={classes.footer}>
            <div className={classes.footerBody}>
              <Typography variant="body2" component="p">Learn more about this project:</Typography>
              <Box display="flex" justifyContent="center">
                <Box m={1} p={1}>
                  <a className={classes.footerLink} rel="noreferrer" target="_blank" href="https://codefornebraska.slack.com/messages/housing"><Icon icon={slackIcon} width="36" height="36"/></a>
                </Box>
                <Box m={1} p={1}>
                  <a className={classes.footerLink} rel="noreferrer" target="_blank" href="https://github.com/codefornebraska/landlord"><Icon icon={githubIcon} width="36" height="36"/></a>
                </Box>
              </Box>
            </div>
            <div className={classes.footerCopyright}>
              <Typography variant="body2">
                {`Copyright © `}
                <a className={classes.footerLink}  rel="noreferrer" target="_blank" href="https://www.codefornebraska.org/">Code for Nebraska</a>
                {` ${new Date().getFullYear()}`}
              </Typography>
            </div>
          </footer>
        </div>
      </div>
  );
}