@material-ui/core#AppBar JavaScript Examples

The following examples show how to use @material-ui/core#AppBar. 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: navbar.js From connect-4-online-multiplayer with MIT License

6 votes

export default function NavBar() {
  const classes = useStyles();

  // const preventDefault = (event) => event.preventDefault();
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" className={classes.title}>
            Connect 4
          </Typography>

          <div>
            <Link
              href="https://github.com/BhavyaCodes/connect-4-online-multiplayer"
              target="_blank"
              rel="noopener noreferrer"
              color="inherit"
            >
              <IconButton
                aria-label="Github repository link"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                color="inherit"
              >
                <GitHubIcon />
              </IconButton>
            </Link>
          </div>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Example #2

Source File: TopNav.js From social-media-strategy-fe with MIT License

6 votes

TopNav = ({ toggleMenu }) => {
  const classes = useStyles();
  const history = useHistory();

  return (
    <div className={classes.root}>
      <AppBar position="static" className={classes.navbar}>
        <Toolbar>
          <IconButton
            onClick={() => toggleMenu()}
            edge="start"
            aria-label="menu"
          >
            <MenuIcon />
          </IconButton>
          <Button onClick={() => history.push("/home")}>
            <img className={classes.logo} src={logo} alt="SoMe logo" />
          </Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Example #3

Source File: stock-details.js From ark-funds-monitor with GNU Affero General Public License v3.0

6 votes

render() {
        return (
            <div className="stock-details-inner-wrapper">
                <AppBar position="static" color="default">
                    <Tabs
                        variant="scrollable"
                        value={this.state.tabIndex}
                        onChange={this.handleTabChange}
                        TabIndicatorProps={{ style: { background: '#6200EE' } }}
                    >
                        <Tab label="Chart"  icon={<TimelineIcon />} {...a11yProps(0)} />
                        <Tab label="Basic Info" disabled={!!!this.state.ticker} icon={<InfoOutlinedIcon />}{...a11yProps(1)} />
                        <Tab label="News" disabled={!!!this.state.ticker} icon={<CommentOutlinedIcon />}{...a11yProps(2)} />
                    </Tabs>
                </AppBar>

                <TabPanel value={this.state.tabIndex} index={0}>
                    <StockFigure />
                </TabPanel>
                <TabPanel value={this.state.tabIndex} index={1}>
                    <BasicInfo />
                </TabPanel>
                <TabPanel value={this.state.tabIndex} index={2}>
                    <CompanyNews />
                </TabPanel>
            </div>
        );
    }

Example #4

Source File: Lightbox.jsx From archeage-tools with The Unlicense

6 votes

render() {
    const { image, title, caption, elevation, float } = this.props;
    const { open } = this.state;

    return (
      <>
        <Paper
          className={cn('lightbox-thumb', { [float]: Boolean(float) })}
          elevation={elevation}
        >
          <img src={image || NoImage} alt={title} onClick={this.handleOpen} />
          <Typography variant="caption">{title}</Typography>
        </Paper>
        <Dialog
          open={open}
          onClose={this.handleClose}
          maxWidth="xl"
          TransitionComponent={Zoom}
        >
          <AppBar position="static">
            <Toolbar variant="dense">
              <Typography variant="subtitle1" className="title-text">{title}</Typography>
              <IconButton color="inherit" aria-label="Close" onClick={this.handleClose}>
                <CloseIcon />
              </IconButton>
            </Toolbar>
          </AppBar>
          <DialogContent>
            <img src={image} alt={title} />
            <Typography>{caption}</Typography>
          </DialogContent>
        </Dialog>
      </>
    );
  }

Example #5

Source File: DashboardNavbar.js From course-manager with MIT License

6 votes

RootStyle = styled(AppBar)(({ theme }) => ({
  boxShadow: 'none',
  backdropFilter: 'blur(6px)',
  WebkitBackdropFilter: 'blur(6px)', // Fix on Mobile
  backgroundColor: alpha(theme.palette.background.default, 0.72),
  [theme.breakpoints.up('lg')]: {
    width: `calc(100% - ${DRAWER_WIDTH + 1}px)`
  }
}))

Example #6

Source File: Layout.js From Hacktoberfest-2020 with MIT License

6 votes

export default function Layout({ children, noAppBar }) {
    return (
        <Container className={styles.layout}>
            {
                !noAppBar &&
                <AppBar position="static" className={styles.appbar}>
                    <Toolbar classes={{ root: styles.toolbarRoot }}>
                        <img src="/hacktoberfest.svg" className={styles.hacktoberfestLogo} />
                        <Typography className={styles.hacktoberfestText}>acktoberfest 2020</Typography>
                        <img src="/sponsors-light.svg" className={styles.appbarSponsors} />
                    </Toolbar>
                </AppBar>
            }
            {children}
            <footer className={styles.footer}>Proudly hosted on <a className={styles.footerLink} href="https://vercel.com" target="_blank">▲Vercel</a></footer>
        </Container>
    )
}

Example #7

Source File: Topbar.js From telar-cli with MIT License

6 votes

Topbar = props => {
  const { className, ...rest } = props;

  const classes = useStyles();

  return (
    <AppBar
      {...rest}
      className={clsx(classes.root, className)}
      color="primary"
      position="fixed"
    >
      <Toolbar>
        <RouterLink to="/">
          <img
            alt="Logo"
            src="/images/logos/logo.png"
          />
        </RouterLink>
      </Toolbar>
    </AppBar>
  );
}

Example #8

Source File: Header.js From Dog-Book with MIT License

6 votes

Header = () => {
  return (
    <AppBar position="static" style={{ backgroundColor: "darkred" }}>
      <Toolbar>
        <Icon>
          <Pets />
        </Icon>
        <Typography variant="h6" style={{ marginLeft: "1rem" }}>
          Dog Book
        </Typography>
      </Toolbar>
    </AppBar>
  );
}

Example #9

Source File: index.jsx From Quizzer with MIT License

6 votes

Navbar = props => {
    const classes = useStyle()

    return (
        <div className={classes.root}>
            <AppBar color={"transparent"} position={"static"} elevation={0}>
                <Toolbar>
                    <Typography className={classes.title}>
                        Quizzer
                    </Typography>

                    <Button>
                        Join
                    </Button>
                </Toolbar>
            </AppBar>
        </div>
    )
}

Example #10

Source File: HeaderWithMenu.jsx From test-deploy-gatsby-apps with BSD Zero Clause License

6 votes

HeaderWithMenu = ({ routes, cartSize }) => {
  const classes = useStyles()
  return (
    <div data-cy={"with-menu"} style={{ flexGrow: "1" }}>
      <AppBar
        position="fixed"
        style={{
          boxShadow: "0px 0px 0px 0px",
        }}
      >
        <Grid container>
          <MuktiLogo />
          <Toolbar className={classes.toolBar}>
            {routes.map((route, key) => {
              return (
                <Link to={route.path} key={key} className={classes.route}>
                  <Button className={classes.routeButton}>{route.name}</Button>
                </Link>
              )
            })}
            <Link to={"/cart"} className={classes.route}>
              <Button className={classes.routeButton}>
                <img src={cart} className={classes.cartImg} alt={"cart"} />
                <Typography data-cy={"cart-size"}>{cartSize || ""}</Typography>
              </Button>
            </Link>
          </Toolbar>
        </Grid>
      </AppBar>
    </div>
  )
}

Example #11

Source File: MainBar.js From budgie-stream with MIT License

6 votes

MainBar = (props) => {
  const classes = useStyles();

  return (
    <AppBar position="static">
      <Grid
        className={classes.barItems}
        container
        direction="row"
        alignItems="center"
      >
        <Grid
          container
          direction="row"
          justify="flex-start"
          alignItems="center"
          xs
        >
          <Devices />
        </Grid>
        <Grid container xs={6} alignItems="center" justify="center">
          <StartButton />
        </Grid>
        <Grid container alignItems="flex-end" justify="flex-end" xs>
          <VolumeSlider />
        </Grid>
      </Grid>
    </AppBar>
  );
}

Example #12

Source File: Navbar.js From eSim-Cloud with GNU General Public License v3.0

6 votes

export default function Navbar () {
  const classes = useStyles()

  return (
    <AppBar
      position="static"
      color="default"
      elevation={0}
      className={classes.appBar}
    >
      <Toolbar variant="dense" color="default" className={classes.toolbar}>

        <Header />
      </Toolbar>
    </AppBar>
  )
}

Example #13

Source File: TopBar.js From paper-and-ink with MIT License

6 votes

function Topbar(props) {
  const { className, children, openSidebar, onToggleSidebar } = props;
  const classes = useStyles(props);
  const [notifications] = useState([{ message: 'A Message', status: 'success' }]);
  return (
    <AppBar className={clsx(classes.root, className)}>
      <Toolbar className={classes.toolbar}>
        <div className={classes.brandWrapper}>
          <div className={classes.logo}>Paper & Ink</div>
          <IconButton className={classes.menuButton} aria-label="Menu" onClick={onToggleSidebar}>
            {openSidebar ? <CloseIcon /> : <MenuIcon />}
          </IconButton>
        </div>
        <ThemeToggler className={classes.themeToggler} />
        <IconButton className={classes.notificationsButton}>
          <Badge badgeContent={notifications.length} color="primary" variant="dot">
            <NotificationsIcon />
          </Badge>
        </IconButton>
        <IconButton className={classes.signOutButton}>
          <InputIcon />
        </IconButton>
      </Toolbar>
      {children}
    </AppBar>
  );
}

Example #14

Source File: Topbar.js From git-insights with MIT License

6 votes

Topbar = props => {
  const { className, ...rest } = props;

  const classes = useStyles();

  return (
    <AppBar
      {...rest}
      className={clsx(classes.root, className)}
      color="primary"
      position="fixed"
    >
      <Toolbar>
        <RouterLink to="/">
          <img
            alt="Logo"
            src="/images/logos/logo--white.svg"
          />
        </RouterLink>
      </Toolbar>
    </AppBar>
  );
}

Example #15

Source File: AdminApp.jsx From frontend with MIT License

6 votes

AdminApp = () => {
  const classes = useStyles();
  return (
    <Box display="flex" width={1} height="100%">
      <CssBaseline />
      <Drawer
        open
        variant="persistent"
        classes={{ paper: classes.drawer }}
        PaperProps={{ elevation: 4 }}
      >
        <Box className={classes.logo} display="flex" alignItems="center">
          <NavLink to="/">{logo}</NavLink>
        </Box>
        <AdminNavigation />
      </Drawer>
      <Box width={1} className={classes.main}>
        <AppBar position="relative" elevation={2}>
          <Toolbar />
        </AppBar>
        <Container className={classes.content}>
          <Box mt={2}>
            <Switch>
              <Route path="/admin/dashboard" component={DashboardPage} />
              <Route path="/admin/applications" component={ApplicationPage} />
            </Switch>
          </Box>
        </Container>
      </Box>
    </Box>
  );
}

Example #16

Source File: Header.js From hacktoberfest-participants with MIT License

6 votes

function Header({ onChange, theme }) {
  const classes = useStyles()
  return (
    <AppBar position='static'>
      <Toolbar
        style={{
          width: '100%',
          display: 'flex',
          justifyContent: 'space-between',
        }}
        className={classes.root}
      >
        <Logo />
        <Typography variant='h4' color='textPrimary'>
          <a href='/' style={{ textDecoration: 'none', color: 'inherit' }}>
            Hacktoberfest'20{' '}
            <span role='img' aria-label='pumpkin'>
              ?
            </span>
          </a>
        </Typography>
        <Toggle onChange={onChange} checked={theme === 'dark'} />
      </Toolbar>
    </AppBar>
  )
}

Example #17

Source File: Header.jsx From react-03.03 with MIT License

6 votes

Header = () => {
  return (
    <AppBar position="sticky">
      <Toolbar>
        <IconButton edge="start" color="inherit" aria-label="menu">
          <MenuIcon />
        </IconButton>
        <BrowserRouter>
          <Link to="/" className="header__main-link">
            <Typography variant="h6">
              ChatIk
            </Typography>
          </Link>
          <Link to="/profile" className="header__link">Account</Link>
        </BrowserRouter>
      </Toolbar>
    </AppBar>
  )
}

Example #18

Source File: index.js From Portfolio with MIT License

6 votes

export default function Index({ projects, setTheme }) {

  const classes = useStyles()

  const trigger = useScrollTrigger({ disableHysteresis: true })

  const theme = useTheme()

  const toggleTheme = useCallback(() => {
    setTheme(theme => theme.palette.type === 'dark' ? lightTheme : darkTheme)
  }, [setTheme])

  return (
    <div className={classes.root}>
      <AppBar color={!trigger ? "transparent" : "inherit"} className={classes.appBar} position="fixed">
        <Toolbar>
          <Typography variant="h6" className={classes.root}>
            { name }
          </Typography>
          <IconButton edge="end" color="inherit" onClick={toggleTheme}>
            {theme.palette.type === "dark" ? <Brightness7/> : <Brightness4/>}
          </IconButton>
        </Toolbar>
      </AppBar>
      <Toolbar className={classes.toolbar} />
      <Container>
        <Landing />
        <Skills />
        <Projects data={projects}/>
        <Experience/>
        <About/>
      </Container>
    </div>
  );
}

Example #19

Source File: QrCodeShow.js From pwa with MIT License

6 votes

export default function QrCodeShow() {
  let history = useHistory();
  const dispatch = useDispatch();
  const unique_id = useSelector((state) => state.MyActivities.user.unique_id);

  return (
    <>
      <AppBar position="static" className="activity-header">
        <Toolbar>
          <img alt="mask" src={logo} className="app-header-logo" />
          <IconButton
            color="inherit"
            onClick={() => {
              dispatch(showNav());
              history.push('/my-activities');
            }}
          >
            <KeyboardBackspace />
          </IconButton>
        </Toolbar>
      </AppBar>
      <Box className="qr-code-box">
        <QrCode value={'person:' + unique_id} />
      </Box>
      <Box className="warning-box">
        <Typography>
          در صورتی که با فردی ملاقت کرده‌اید، فرد مقابل بایستی با استفاده از
          آیکون دوربین در اپلیکیشن خود این صفحه را تصویربرداری کند.
        </Typography>
        <Typography component="span" variant="caption">
          این کد حاوی هیچ گونه اطلاعات شخصی یا درمانی شما نیست و تنها جهت
          شناسایی شما در نرم‌افزار استفاده می‌شود.
        </Typography>
      </Box>
    </>
  );
}

Example #20

Source File: Page.jsx From mfe-webpack-demo with MIT License

6 votes

function Page({ title, children }) {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="relative">
        <Toolbar>
          <Typography variant="h6" noWrap>
            {title}
          </Typography>
        </Toolbar>
      </AppBar>
      <div className={classes.content}>{children}</div>
    </div>
  );
}

Example #21

Source File: Page.jsx From module-federation-examples with MIT License

6 votes

function Page({ title, children }) {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="relative">
        <Toolbar>
          <Typography variant="h6" noWrap>
            {title}
          </Typography>
        </Toolbar>
      </AppBar>
      <div className={classes.content}>{children}</div>
    </div>
  );
}

Example #22

Source File: Header.js From FireShort with MIT License

6 votes

function Header({ classes }) {

    const dispatch = useDispatch();

    const handleLogout = useCallback(() => {
        dispatch(logoutUser());
    }, [dispatch]);

    return (
        <div className={classes.root}>
            <AppBar position='fixed' className={classes.appbar}>
                <Toolbar>
                    <Typography variant='h6' className={classes.title}>
                        FireShort
                    </Typography>
                    <Button color='inherit' onClick={handleLogout}>
                        Logout
                    </Button>
                </Toolbar>
            </AppBar>
        </div>
    );
}

Example #23

Source File: Footer.js From generator-webapp-rocket with MIT License

6 votes

function Footer() {
  const footerRef = useRef();
  const classes = useStyles();
  const [footer] = useFooter();

  return (
    <AppBar position="sticky" className={classes.appBar + " " + classes.theme}>
      <Toolbar className={classes.container}>
        <div className={classes.w100} ref={footerRef}></div>
        <div className={classes.content}>
          {footer}
        </div>
      </Toolbar>
    </AppBar>
  );
}

Example #24

Source File: Layout.js From hacktoberfest-mumbai with MIT License

6 votes

export default function Layout({ children, noAppBar }) {
    return (
        <Container className={styles.layout}>
            {
                !noAppBar &&
                <AppBar position="static" className={styles.appbar}>
                    <Toolbar classes={{ root: styles.toolbarRoot }}>
                        <img src="/hacktoberfest.svg" className={styles.hacktoberfestLogo} />
                        <Typography className={styles.hacktoberfestText}>acktoberfest, Mumbai</Typography>
                        <img src="/sponsors-light.svg" className={styles.appbarSponsors} />
                    </Toolbar>
                </AppBar>
            }
            {children}
        </Container>
    )
}

Example #25

Source File: ConnectionsList.js From spl-token-wallet with Apache License 2.0

6 votes

export default function ConnectionsList() {
  const isExtensionWidth = useIsExtensionWidth();
  const connectedWallets = useConnectedWallets();

  return (
    <Paper>
      <AppBar position="static" color="default" elevation={1}>
        <Toolbar>
          <Typography
            variant="h6"
            style={{ flexGrow: 1, fontSize: isExtensionWidth && '1rem' }}
            component="h2"
          >
            Connected Dapps
          </Typography>
        </Toolbar>
      </AppBar>
      <List disablePadding>
        {Object.entries(connectedWallets).map(([origin, connectedWallet]) => (
          <ConnectionsListItem
            origin={origin}
            connectedWallet={connectedWallet}
            key={origin}
          />
        ))}
      </List>
    </Paper>
  );
}

Example #26

Source File: index.js From yi-note with GNU General Public License v3.0

6 votes

StyledAppBar = styled(AppBar)`
  @media (min-width: 600px) {
    margin-left: ${drawerWidth}px;
    width: calc(100% - ${drawerWidth}px);
  }

  > div {
    height: ${headerHeight}px;
  }
`

Example #27

Source File: index.js From youtube-clone with MIT License

6 votes

TopNav = () => {
  const classes = useStyles();
  const isMobileSearchClick = useSelector(
    ({ layout }) => layout.isMobileSearchClick
  );

  return (
    <div>
      <CssBaseline />
      <AppBar elevation={0} position="fixed" className={classes.appBar}>
        {!isMobileSearchClick ? (
          <>
            <StartNav />
            <div className={classes.grow} />

            <MiddleNav />
            <div className={classes.grow} />
            <EndNav />
          </>
        ) : (
          <MobileSearch />
        )}
      </AppBar>
    </div>
  );
}

Example #28

Source File: Navigation.js From deno-seed with MIT License

6 votes

render() {
    const linkColor = this.props.theme === 'light' ? styles.black : styles.white
    const linkStyle = [styles.link, linkColor].join(' ')

    return (
      <div className={ styles.nav }>
        <AppBar position="static" color="default">
          <Toolbar>
            <div className={ styles.flexGrow }>
              <Link className={ linkStyle } to="/">Home</Link>
              {
                this.props.authenticated ? 
                <font>
                  <Link className={ linkStyle } to="/profile">Profile</Link>
                  <Link className={ linkStyle } to="/logout">Sign out</Link>
                </font> :
                <font>
                  <Link className={ linkStyle } to="/login">Login</Link>
                  <Link className={ linkStyle } to="/registration">Registration</Link>
                  <Link className={ linkStyle } to="/activation">Activation</Link>
                  <Link className={ linkStyle } to="/recovery">Recovery</Link>
                </font>
              }
            </div>
            <IconButton
              className={ styles.theme }
              onClick={ this.switchTheme }
            >
              <i className="material-icons">invert_colors</i>
            </IconButton>
          </Toolbar>
        </AppBar>
      </div>
    )
  }

Example #29

Source File: CitiesSearch.stories.js From project-s0-t2-env with MIT License

6 votes

SimpleCitiesSearch = () => {
  const names = array(
    "Names",
    [
      "Los Angeles",
      "Goleta",
      "Isla Vista",
      "San Jose",
      "Fremont",
      "Newport Beach",
      "Irvine",
      "Cupertino",
      "Santa Barbara",
      "San Diego",
      "Sunnyvale",
    ],
    ","
  );
  return (
    <AppBar>
      <Toolbar>
        <div>
          <CitiesSearch names={names} onChange={(event, newValue) => {}} />
        </div>
      </Toolbar>
    </AppBar>
  );
}