@material-ui/core#Toolbar JavaScript Examples

The following examples show how to use @material-ui/core#Toolbar. 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 vote down vote up
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 vote down vote up
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: Lightbox.jsx    From archeage-tools with The Unlicense 6 votes vote down vote up
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 #4
Source File: Layout.js    From Hacktoberfest-2020 with MIT License 6 votes vote down vote up
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 #5
Source File: Topbar.js    From telar-cli with MIT License 6 votes vote down vote up
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 #6
Source File: Header.js    From Dog-Book with MIT License 6 votes vote down vote up
Header = () => {
  return (
    <AppBar position="static" style={{ backgroundColor: "darkred" }}>
      <Toolbar>
        <Icon>
          <Pets />
        </Icon>
        <Typography variant="h6" style={{ marginLeft: "1rem" }}>
          Dog Book
        </Typography>
      </Toolbar>
    </AppBar>
  );
}
Example #7
Source File: index.jsx    From Quizzer with MIT License 6 votes vote down vote up
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 #8
Source File: CommentList.js    From ra-data-django-rest-framework with MIT License 6 votes vote down vote up
CommentPagination = ({ loading, ids, page, perPage, total, setPage }) => {
    const translate = useTranslate();
    const nbPages = Math.ceil(total / perPage) || 1;
    if (!loading && (total === 0 || (ids && !ids.length))) {
        return <PaginationLimit total={total} page={page} ids={ids} />;
    }

    return (
        nbPages > 1 && (
            <Toolbar>
                {page > 1 && (
                    <Button
                        color="primary"
                        key="prev"
                        onClick={() => setPage(page - 1)}
                    >
                        <ChevronLeft />
                        &nbsp;
                        {translate('ra.navigation.prev')}
                    </Button>
                )}
                {page !== nbPages && (
                    <Button
                        color="primary"
                        key="next"
                        onClick={() => setPage(page + 1)}
                    >
                        {translate('ra.navigation.next')}&nbsp;
                        <ChevronRight />
                    </Button>
                )}
            </Toolbar>
        )
    );
}
Example #9
Source File: Page.jsx    From Edlib with GNU General Public License v3.0 6 votes vote down vote up
Page = ({ children }) => {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <NewHeader className={classes.appBar} />
            <Drawer
                className={classes.drawer}
                variant="permanent"
                classes={{
                    paper: classes.drawerPaper,
                }}
            >
                <Toolbar />
                <div className={classes.drawerContainer}>
                    <Sidebar />
                </div>
            </Drawer>
            <main className={classes.content}>
                <Toolbar />
                {children}
            </main>
        </div>
    );
}
Example #10
Source File: HeaderWithMenu.jsx    From test-deploy-gatsby-apps with BSD Zero Clause License 6 votes vote down vote up
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: Navbar.js    From eSim-Cloud with GNU General Public License v3.0 6 votes vote down vote up
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 #12
Source File: TopBar.js    From paper-and-ink with MIT License 6 votes vote down vote up
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 #13
Source File: Topbar.js    From git-insights with MIT License 6 votes vote down vote up
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 #14
Source File: AdminApp.jsx    From frontend with MIT License 6 votes vote down vote up
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 #15
Source File: Header.js    From hacktoberfest-participants with MIT License 6 votes vote down vote up
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 #16
Source File: Header.jsx    From react-03.03 with MIT License 6 votes vote down vote up
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 #17
Source File: index.js    From Portfolio with MIT License 6 votes vote down vote up
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 #18
Source File: QrCodeShow.js    From pwa with MIT License 6 votes vote down vote up
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 #19
Source File: Page.jsx    From mfe-webpack-demo with MIT License 6 votes vote down vote up
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 #20
Source File: Page.jsx    From module-federation-examples with MIT License 6 votes vote down vote up
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: Header.js    From FireShort with MIT License 6 votes vote down vote up
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 #22
Source File: Footer.js    From generator-webapp-rocket with MIT License 6 votes vote down vote up
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 #23
Source File: Layout.js    From hacktoberfest-mumbai with MIT License 6 votes vote down vote up
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 #24
Source File: ConnectionsList.js    From spl-token-wallet with Apache License 2.0 6 votes vote down vote up
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 #25
Source File: MiddleNav.js    From youtube-clone with MIT License 6 votes vote down vote up
MiddleNav = () => {
  const classes = useStyles();

  return (
    <Hidden xsDown>
      <Toolbar className={classes.root} disableGutters>
        <NavSearch />
      </Toolbar>{" "}
    </Hidden>
  );
}
Example #26
Source File: Navigation.js    From deno-seed with MIT License 6 votes vote down vote up
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 #27
Source File: CitiesSearch.stories.js    From project-s0-t2-env with MIT License 6 votes vote down vote up
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>
  );
}
Example #28
Source File: AppBar.js    From covid-19 with MIT License 6 votes vote down vote up
AppBar = (props) => {
  const classes = useStyles();
  const theme = useTheme();

  return (
    <MaterialAppBar position="relative">
      <Toolbar className={classes.appBar}>
        <div className={classes.nameAndSearch}>
          <Typography noWrap className={classes.appName} variant="h6">
            COVID-19.direct
          </Typography>
          <NavigatingSearchInput className={`${classes.search} ${classes.expander}`} />
        </div>

        <div className={classes.expander} />

        <div className={classes.actions}>
          <SocialMediaButtons
            backgroundColor="#fff"
            buttonClassName={classes.socialButton}
            className={classes.socialButtons}
            iconColor={theme.palette.primary.main}
          />

          <DonateLink className={classes.donations} message="Buy us a coffee!" />
        </div>
      </Toolbar>
    </MaterialAppBar>
  );
}
Example #29
Source File: MainView.js    From akashlytics-deploy with GNU General Public License v3.0 5 votes vote down vote up
export function MainView() {
  const classes = useStyles();
  const [isShowingWelcome, setIsShowingWelcome] = useState(false);
  const [isWelcomeShown, setIsWelcomeShown] = useState(false);
  const [isNavOpen, setIsNavOpen] = useState(true);
  const { balance, isRefreshingBalance } = useWallet();

  useEffect(() => {
    if (!isRefreshingBalance && typeof balance === "number" && balance === 0 && !isShowingWelcome && !isWelcomeShown) {
      setIsShowingWelcome(true);
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isRefreshingBalance, balance, isWelcomeShown, isShowingWelcome]);

  const onOpenMenuClick = () => {
    setIsNavOpen((prev) => !prev);
  };

  const onWelcomeClose = () => {
    setIsWelcomeShown(true);
    setIsShowingWelcome(false);
  };

  return (
    <Layout marginTop={`${accountBarHeight}px`} height={`calc(100% - ${accountBarHeight}px) !important`}>
      {isShowingWelcome && <WelcomeModal open={isShowingWelcome} onClose={onWelcomeClose} />}

      <Box height="100%">
        <AppBar position="fixed" color="default" elevation={0} component="header" className={classes.accountAppBar}>
          <Toolbar variant="dense" className={classes.accountBar}>
            <ErrorBoundary FallbackComponent={ErrorFallback}>
              <WalletDisplay />

              <CertificateDisplay />
            </ErrorBoundary>
          </Toolbar>
        </AppBar>

        <div className={classes.viewContainer}>
          <LeftNav onOpenMenuClick={onOpenMenuClick} isNavOpen={isNavOpen} />

          <Box className={classes.viewContentContainer} style={{ marginLeft: isNavOpen ? `${drawerWidth}px` : `${closedDrawerWidth}px` }}>
            <ErrorBoundary FallbackComponent={ErrorFallback}>
              <RightContent />
            </ErrorBoundary>
          </Box>
        </div>
      </Box>
    </Layout>
  );
}