@material-ui/core#AppBar JavaScript Examples

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>
  );
}

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>
  );
}

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>
        );
    }

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>
      </>
    );
  }

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)`
  }
}))

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>
    )
}

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>
  );
}

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

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>
    )
}

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>
  )
}

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>
  );
}

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>
  )
}

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>
  );
}

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>
  );
}

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>
  );
}

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>
  )
}

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>
  )
}

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>
  );
}

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>
    </>
  );
}

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>
  );
}

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>
  );
}

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>
    );
}

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>
  );
}

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>
    )
}

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>
  );
}

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

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

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>
  );
}

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>
    )
  }

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>
  );
}