@material-ui/core#Toolbar TypeScript Examples

Footer = ({ classes }: FooterProps) => {
  return (
    <AppBar className={classes.appBar} position="static">
      <Toolbar>
        <Grid container justify="center">
          <Grid item xs={10} container>
            <Link className={classes.navBarLink} href="/map">
              <Typography color="textPrimary" variant="h4">
                Aqua
              </Typography>
              <Typography style={{ color: "#8AC6DE" }} variant="h4">
                link
              </Typography>
            </Link>
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>
  );
}

function Header({ handleDrawerToggle, drawe }: IHeader) {
    const classes = useStyles();
    const isVerySmallScreen = useMediaQuery("(max-width: 400px)");

    return (
        <div className={`${classes.topBar} ${!drawe && classes.topBarShift}`}>
            <AppBar position="sticky" className={classes.appBar} elevation={0}>
                <Toolbar disableGutters className="dapp-topbar">
                    <div onClick={handleDrawerToggle} className="dapp-topbar-slider-btn">
                        <img src={MenuIcon} alt="" />
                    </div>
                    <div className="dapp-topbar-btns-wrap">
                        <AddressButton />
                        {!isVerySmallScreen && <TimeMenu />}
                        <ConnectButton />
                    </div>
                </Toolbar>
            </AppBar>
        </div>
    );
}

NewsAppBar = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            area-label="menu"
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            News
          </Typography>
          <NewsMenu />
        </Toolbar>
      </AppBar>
    </div>
  );
}

ModsToolbar: React.FunctionComponent = () => {
  const styles = useStyles();
  const inAlphaMode = useRecoilValue(settingsState).alphaMode;
  const [filter, setFilter] = useRecoilState(modFilterState);
  const { owmlPath, alphaPath } = useRecoilValue(settingsState);
  return (
    <Paper>
      <Toolbar className={styles.toolBar}>
        <FilterInput
          value={filter}
          onChange={setFilter}
          label={modsText.toolbar.findModsLabel}
        />
        <Button
          startIcon={<FolderIcon />}
          onClick={() =>
            openDirectory(
              inAlphaMode ? `${alphaPath}/BepInEx/plugins` : `${owmlPath}/Mods`
            )
          }
          variant="outlined"
        >
          {modsText.toolbar.modsDirectory}
        </Button>
      </Toolbar>
    </Paper>
  );
}

function Header({ handleDrawerToggle, drawe }: IHeader) {
  const classes = useStyles();
  const isVerySmallScreen = useMediaQuery("(max-width: 400px)");

  return (
    <div className={`${classes.topBar} ${!drawe && classes.topBarShift}`}>
      <AppBar position="sticky" className={classes.appBar} elevation={0}>
        <Toolbar disableGutters className="dapp-topbar">
          <div onClick={handleDrawerToggle} className="dapp-topbar-slider-btn">
            <img src={MenuIcon} alt="" />
          </div>
          <div className="dapp-topbar-btns-wrap">
            {!isVerySmallScreen && <RugMenu />}
            <ConnectButton />
          </div>
        </Toolbar>
      </AppBar>
    </div>
  );
}

DataGridCustomToolbar: React.FunctionComponent = () => {
  return (
    <>
      <Toolbar variant="dense">
        <GridToolbarFilterButton />
        <GridToolbarDensitySelector />
        <Box marginLeft="auto">
          <BulkOperation />
        </Box>
      </Toolbar>
    </>
  );
}

function Header({ handleDrawerToggle, drawe }: IHeader) {
    const classes = useStyles();
    const isVerySmallScreen = useMediaQuery("(max-width: 400px)");
    const isWrapShow = useMediaQuery("(max-width: 480px)");

    return (
        <div className={`${classes.topBar} ${!drawe && classes.topBarShift}`}>
            <AppBar position="sticky" className={classes.appBar} elevation={0}>
                <Toolbar disableGutters className="dapp-topbar">
                    <div onClick={handleDrawerToggle} className="dapp-topbar-slider-btn">
                        <img src={MenuIcon} alt="" />
                    </div>
                    <div className="dapp-topbar-btns-wrap">
                        {!isVerySmallScreen && <TimeMenu />}
                        {!isWrapShow && <WrapButton />}
                        <ConnectButton />
                    </div>
                </Toolbar>
            </AppBar>
        </div>
    );
}

export default function BlogPreview({ blog, open, onClose }: Props): ReactElement {
  const classes = useStyles();
  return (
    <Dialog
      fullScreen
      open={open}
      TransitionComponent={Transition}
      PaperProps={{ className: classes.paper }}
      PaperComponent={PaperComponent}
    >
      <AppBar position="fixed" color="secondary">
        <Toolbar>
          <IconButton edge="start" color="inherit" onClick={onClose} aria-label="close">
            <CloseIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            {blog.title}
          </Typography>
          <Button color="inherit" onClick={onClose}>
            Done
          </Button>
        </Toolbar>
      </AppBar>
      <Grid container justify="center">
        <Grid item xs={12} sm={12} md={8} className={classes.blogContent}>
          {blog?.draftText && <Markdown text={blog.draftText} />}
        </Grid>
      </Grid>
    </Dialog>
  );
}

ContentViewProvider = ({ children }: { children: any }) => {
	const [component, setComponent] = useState<React.ReactNode>()

	return (
		<ContentViewContext.Provider value={setComponent}>
			<Box position="relative" style={{
				width: "100%",
				maxWidth: "100%"
			}}>
				<AppBar variant="outlined" position="absolute" style={{
					backgroundColor: "rgba(255, 255, 255, 0.6)",
					backdropFilter: "blur(20px)",
					WebkitBackdropFilter: "blur(20px)",
					// borderTop: "none",
					borderLeft: "none",
					borderRight: "none",
					width: "inherit",
					maxWidth: "inherit"
				}}>
					<Toolbar variant="dense" disableGutters>
						{component}
					</Toolbar>
				</AppBar>
			</Box>
			{children}
		</ContentViewContext.Provider>
	)
}

export default function MyApp({ Component, pageProps }: AppProps) {
  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>Multi-Step Form</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
        <AppBar position="fixed">
          <Toolbar variant="dense">
            <Typography variant="h6">Multi-Step Form</Typography>
          </Toolbar>
        </AppBar>

        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Container>
          <Box marginTop={10}>
            <Component {...pageProps} />
          </Box>
        </Container>
      </ThemeProvider>
    </React.Fragment>
  );
}

Nav: React.FC = () => {
  return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6">Wern Fullstack Template</Typography>
      </Toolbar>
    </AppBar>
  )
}

withBasicUsage = (): StoryFnReactReturnType => {
    const expandedHeight = number('expandedHeight', 200);
    const collapsedHeight = number('collapsedHeight', 64);
    const scrollThreshold = number('scrollThreshold', 136);
    return (
        <AppBar expandedHeight={expandedHeight} collapsedHeight={collapsedHeight} scrollThreshold={scrollThreshold}>
            <Toolbar>
                <Typography variant="h6">Title</Typography>
            </Toolbar>
        </AppBar>
    );
}

AppHeaderBar = () => {
  const { setSideMenu } = useDrawerContext();

  return (
    <AppBar position="static">
      <Toolbar className={"toolbar"}>
        <Grid container justifyContent="space-between" alignItems="center">
          <img
            height="32"
            width="32"
            src="metro-fare-logo.jpg"
            alt="Metro Fare logo"
          />
          <Typography variant="h6" style={{ marginLeft: "8px", flexGrow: 1 }}>
            MetroFare
          </Typography>
          {canShowSideMenuDrawer() && (
            <IconButton edge="start" color="inherit" aria-label="menu">
              <MenuIcon onClick={() => setSideMenu(true)} />
            </IconButton>
          )}
        </Grid>
      </Toolbar>
    </AppBar>
  );
}

export default function HeaderBar(props: HeaderBarProps) {
  const { title } = props;
  const classes = useStyles(props);
  const router = useRouter();

  return (
    <AppBar position="static" className={classes.headerBar}>
      <Toolbar>
        <Grid container>
          <Grid item xs={11} className={classes.headerLink}>
            <Link classes={{ root: classes.headerLinkText }} underline="none" href={router.linkToHome()}>
              <Typography variant="h6" color="inherit">
                {title}
              </Typography>
            </Link>
          </Grid>
          <Grid item xs={1} className={classes.headerLangSelector}>
            <LanguageSwitch />
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>
  );
}

Header: React.FC = () => {
    const classes = useStyles();

    return (
        <AppBar position="static">
            <Toolbar>
                <Typography variant="h6" className={classes.title}>
                    Rusty Chat
                </Typography>
            </Toolbar>
        </AppBar>
    );
}

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

  const classes = useStyles();

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

Appbar = () => {
  const classes = useStyles();
  const history = useHistory();

  const onLogoClicked = () => {
    history.push("/");
  };

  const onBackClicked = () => {
    history.goBack();
  };

  const isHomePage = () => {
    return history.location.pathname === "/";
  };

  return (
    <AppBar position="sticky" className={classes.appbar}>
      <Toolbar className={classes.toolbar}>
        <Box className={classes.menuLeft}>
          <IconButton edge="start" disabled={isHomePage()} onClick={onBackClicked} className={classes.menuButton} color="inherit" aria-label="menu">
            <ArrowBackIcon />
          </IconButton>
          <img className={classes.menuLogo} src={LogoMenu} onClick={onLogoClicked} alt="DamnVulnerableCryptoApp Logo" />
        </Box>
        <Box display="flex">
          <Link to={"/docs/crypto"} className={classes.docsLink}>Docs</Link>
          <Progress />
        </Box>
      </Toolbar>
      <Loading />
    </AppBar>
  );
}

AppBar: React.FunctionComponent<IAppBarProps> = () => {
  const classes = useStyles();
  const theme = useTheme();
  const trigger = useScrollTrigger({ disableHysteresis: true, threshold: 0 });

  return (
    <MuiAppBar
      position="sticky"
      color="default"
      className={classes.appBar}
      elevation={trigger ? 4 : 0}
    >
      <Toolbar>
        <Grid item xs>
          <FiretableLogo />
        </Grid>

        <Grid item>
          <Button
            component={Link}
            to={routes.signOut}
            color="primary"
            variant="outlined"
          >
            Sign Out
          </Button>
        </Grid>
      </Toolbar>
    </MuiAppBar>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <div style={{ flexGrow: 1 }}>
        <AppBar position="static" style={{ flexDirection: 'row', backgroundColor: '#4138ff' }}>
          <Toolbar style={{ paddingLeft: '12px', backgroundColor: '#4138ff' }}>
            <Button color="inherit" component={RouterLink} to="/">
              <img style={{ width: 50, height: 50 }} src={joystream} className="App-logo" alt="Joystream logo" />
            </Button>
            <Button color="inherit" component={RouterLink} to="/">Validator Report</Button>
            <Button color="inherit" component={RouterLink} to="/live">WS Live Stats</Button>
          </Toolbar>
        </AppBar>
      </div>
      <div>
        <Switch>
          <Route path="/live">
            <LiveStatsWS />
          </Route>
          <Route path="/">
            <ValidatorReport />
          </Route>
        </Switch>
      </div>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

MainAppBar = observer((props: Props) => {
  const classes = useStyles();
  const { currentTab, connectedSites } = props.connectionContainer;
  const connected =
    currentTab &&
    connectedSites.some(
      site => site.url === currentTab.url && site.isConnected
    );
  if (props.accountManager.hasCreatedVault && props.accountManager.isUnLocked) {
    return (
      <>
        <AppBar
          position="static"
          className={classes.root}
          color={'transparent'}
        >
          <Toolbar>
            <IconButton edge="start" component={Link} to={'/'}>
              <HomeIcon style={{ color: '#C4C4C4' }} />
            </IconButton>
            <Tooltip
              title={
                props.connectionContainer.integratedSite
                  ? props.accountManager.userAccounts.length
                    ? 'Toggle Connection to Site'
                    : 'Add an Account to Connect'
                  : 'This site is not integrated with Signer'
              }
            >
              <span className={classes.toggleWrapper}>
                <Button
                  // Toggles connection status
                  className={classes.toggleButton}
                  disabled={
                    !props.connectionContainer.integratedSite ||
                    !props.accountManager.userAccounts.length
                  }
                  variant="outlined"
                  color={connected ? 'primary' : 'default'}
                  size="large"
                  onClick={() => {
                    if (connected) {
                      props.connectionContainer.disconnectFromSite();
                    } else {
                      confirmConnect().then(() => {
                        props.connectionContainer.connectToSite();
                      });
                    }
                  }}
                  style={{
                    color: 'var(--cspr-dark-blue)',
                    backgroundColor: '#fff'
                  }}
                >
                  {connected ? 'Connected' : 'Disconnected'}
                </Button>
              </span>
            </Tooltip>
            <MoreMenu accountManager={props.accountManager} />
          </Toolbar>
        </AppBar>
        <div className={classes.toolbarMargin}></div>
      </>
    );
  } else {
    return <div className={classes.toolbarMargin}></div>;
  }
})

TechDocsReaderPageSubheader = ({
  toolbarProps,
}: {
  toolbarProps?: ToolbarProps;
}) => {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

  const handleClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  }, []);

  const handleClose = useCallback(() => {
    setAnchorEl(null);
  }, []);

  const {
    entityMetadata: { value: entityMetadata, loading: entityMetadataLoading },
  } = useTechDocsReaderPage();

  const addons = useTechDocsAddons();

  const subheaderAddons = addons.renderComponentsByLocation(
    locations.Subheader,
  );

  const settingsAddons = addons.renderComponentsByLocation(locations.Settings);

  if (!subheaderAddons && !settingsAddons) return null;

  // No entity metadata = 404. Don't render subheader on 404.
  if (entityMetadataLoading === false && !entityMetadata) return null;

  return (
    <Toolbar classes={classes} {...toolbarProps}>
      <Box
        display="flex"
        justifyContent="flex-end"
        width="100%"
        flexWrap="wrap"
      >
        {subheaderAddons}
        {settingsAddons ? (
          <>
            <Tooltip title="Settings">
              <IconButton
                aria-controls="tech-docs-reader-page-settings"
                aria-haspopup="true"
                onClick={handleClick}
              >
                <SettingsIcon />
              </IconButton>
            </Tooltip>
            <Menu
              id="tech-docs-reader-page-settings"
              getContentAnchorEl={null}
              anchorEl={anchorEl}
              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
              open={Boolean(anchorEl)}
              onClose={handleClose}
              keepMounted
            >
              {settingsAddons}
            </Menu>
          </>
        ) : null}
      </Box>
    </Toolbar>
  );
}

export function Header() {
  const classes = useStyles();
  const mediaQuery = useMediaQueryContext();
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const location = useLocation();

  const toggleDrawer = (open) => (event) => {
    if (event && event.type === "keydown" && (event.key === "Tab" || event.key === "Shift")) {
      return;
    }

    setIsDrawerOpen(open);
  };

  return (
    <AppBar position="fixed" className={classes.appBar}>
      <Toolbar className={clsx(classes.toolbar, { container: !mediaQuery.smallScreen })}>
        {mediaQuery.smallScreen && (
          <>
            <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="open drawer" onClick={toggleDrawer(true)}>
              <MenuIcon />
            </IconButton>

            <NavDrawer toggleDrawer={toggleDrawer} isDrawerOpen={isDrawerOpen} />
          </>
        )}

        <div
          className={clsx(classes.logoContainer, {
            [classes.logoContainerSmall]: mediaQuery.smallScreen && !mediaQuery.phoneView
          })}
        >
          <Link to="/" className={classes.logoContainer}>
            <img src="/images/akashlytics_logo_compact.png" alt="Akashlytics logo" className={clsx(classes.logo, "App-logo")} />
          </Link>
        </div>

        {!mediaQuery.smallScreen && (
          <List component="nav" aria-labelledby="main navigation" className={classes.navDisplayFlex}>
            <Link to="/deploy" className={classes.linkText}>
              <ListItem className={classes.actionButtonListItem}>
                <Button
                  variant={location.pathname === "/deploy" ? "outlined" : "contained"}
                  className={clsx(classes.actionButtonBase, {
                    [classes.actionButton]: location.pathname !== "/deploy"
                  })}
                >
                  Deploy
                  <Box marginLeft=".5rem">
                    <CloudUploadIcon />
                  </Box>
                </Button>
              </ListItem>
            </Link>

            {navLinks.map(({ title, path }) => (
              <Link to={path} key={title} className={classes.linkText}>
                <ListItem button selected={location.pathname === path} classes={{ root: classes.navButton }}>
                  <ListItemText primary={title} />
                </ListItem>
              </Link>
            ))}
          </List>
        )}
      </Toolbar>
    </AppBar>
  );
}

withDynamicContent = (): StoryFnReactReturnType => {
    const useStyles = makeStyles({
        title: {},
        subtitle: {},
        info: {},
        liner: {
            top: 0,
            position: 'relative',
        },
        expanded: {
            '& $liner': {
                top: 64,
            },
        },
        collapsed: {
            '& $title': {
                fontSize: '1.25rem',
                fontWeight: 600,
            },
            '& $subtitle': {
                fontSize: 0,
            },
            '& $info': {
                fontSize: '1rem',
                fontWeight: 400,
                marginTop: '-0.25rem',
            },
        },
    });

    const classes = useStyles();
    const appBarGroupId = 'AppBar';
    const threeLinerGroupId = 'ThreeLiner';
    // AppBar props
    const expandedHeight = number('expandedHeight', 200, {}, appBarGroupId);
    const collapsedHeight = number('collapsedHeight', 64, {}, appBarGroupId);
    // ThreeLiner Props
    const title = text('title', 'title', threeLinerGroupId);
    const subtitle = text('subtitle', 'subtitle', threeLinerGroupId);
    const info = text('info', 'info', threeLinerGroupId);

    return (
        <AppBar
            expandedHeight={expandedHeight}
            collapsedHeight={collapsedHeight}
            classes={{ collapsed: classes.collapsed, expanded: classes.expanded }}
        >
            <Toolbar>
                <ThreeLiner
                    title={title}
                    subtitle={subtitle}
                    info={info}
                    animationDuration={300}
                    classes={{ title: classes.title, subtitle: classes.subtitle, info: classes.info }}
                    className={classes.liner}
                ></ThreeLiner>
            </Toolbar>
        </AppBar>
    );
}

export default function HubNavigationBar({
  handleChange,
  handleSearch,
  tabNumber,
}: Props) {
  let [searchString, setSearchString] = useState("")

  const NavItems = ["Hub Explore", "Hub List", "My Images", "My Favourites"]

  const SearchBar = styled.div`
    background-color: ${(props) => props.theme.palette.grey[100]};
    border-radius: 2px;
    cursor: pointer;
    min-width: 350px;
    display: flex;
  `

  const HubTabs = styled(Tabs)`
    flex-grow: 1;
  `

  const HubSearchIcon = styled(SearchIcon)`
    margin: 11px;
    margin-left: 20px;
  `

  const handleKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {
    if (event.key === "Enter") handleSearch(searchString)
  }
  return (
    <AppBar elevation={0} position={"static"}>
      <Toolbar>
        <HubTabs
          value={tabNumber}
          onChange={handleChange}
          aria-label="simple tabs example"
          textColor="secondary"
          indicatorColor="secondary"
        >
          {NavItems.map((NavItem, idx) => (
            <Tab label={NavItem} {...a11yProps(idx)} />
          ))}
        </HubTabs>
        <SearchBar>
          <HubSearchIcon onClick={(e) => handleSearch(searchString)} />
          <InputBase
            onKeyPress={handleKeyPress}
            autoFocus={true} //todo this is a hack. It looses focus after setSearchString gets triggered
            value={searchString}
            onChange={(e) => setSearchString(e.target.value)}
            placeholder="Search"
            fullWidth={true}
          />
        </SearchBar>
      </Toolbar>
    </AppBar>
  )
}

NeoDashboardPlaceholder = ({connected}) => {
    const content = (
        <div style={{zIndex: -99}}>
            <AppBar position="absolute" style={{
                zIndex: "auto",
                boxShadow: "none",
                transition: "width 125ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
            }
            }>
                <Toolbar style={{ paddingRight: 24, minHeight: "64px", background: '#0B297D', zIndex: 1201 }}>
                    <IconButton
                        edge="start"
                        color="inherit"
                        aria-label="open drawer"
                        style={
                            (open) ? {
                                display: 'none',
                            } : {
                                marginRight: 36,
                                marginLeft: -19,
                            }
                        }
                    >
                        <MenuIcon />
                    </IconButton>
                    <InputBase
                        disabled
                        id="center-aligned"
                        label="placeholder"
                        style={{ textAlign: 'center', fontSize: "22px", flexGrow: 1, color: "white" }}
                        placeholder="Dashboard Name..."
                        fullWidth
                        maxRows={4}
                        value={"NeoDash ⚡"}
                    />

                </Toolbar>
                <Toolbar style={{ zIndex: 10, minHeight: "50px", paddingLeft: "0px", paddingRight: "0px", background: "white" }}>
                    <div style={{
                        width: '100%', zIndex: -112, height: "48px", overflowX: "hidden", overflowY: "auto", background: "rgba(240,240,240)",
                        boxShadow: "2px 1px 10px 0px rgb(0 0 0 / 12%)",
                        borderBottom: "1px solid lightgrey"
                    }}>

                    </div>
                </Toolbar>
            </AppBar>
            <div style={{
                position: "absolute",
                width: "100%",
                height: "100%"
            }}>
                <Typography variant="h2" color="textSecondary" style={{
                    position: "absolute", top: "50%", left: "50%",
                    transform: "translate(-50%, -50%)"
                }}>
                    {!connected ? <CircularProgress color="inherit" /> :<></>}
                </Typography>
            </div>
        </div>
    );
    return content;
}

StyledToolbar = styled(Toolbar)({
  width: "100%",
  display: "flex",
  padding: 0,
  boxSizing: "border-box",
  justifyContent: "space-between",
  flexWrap: "wrap",
})

export default function ({
    children,
    location,
}: {
    children: NonNullable<React.ReactNode>
    location: any
}): React.ReactElement {
    const [theme, setTheme] = useState<'light' | 'dark'>('light')
    const path: string = location.pathname

    useEffect(() => {
        if (isTouchDevice()) document.documentElement.classList.add('touch')
    }, [])

    const muiTheme = createMuiTheme({
        palette: {
            type: theme,
            primary:
                theme === 'dark'
                    ? {
                          main: blue[300],
                      }
                    : undefined,
            secondary: {
                main: blue[800],
            },
        },
    })

    const isDesktop = useMediaQuery(muiTheme.breakpoints.up('sm'))

    return (
        <>
            <Helmet
                titleTemplate="%s | TL Reference"
                defaultTitle="TL Reference"
            />
            <MuiThemeProvider theme={muiTheme}>
                <>
                    <AppBar position="static" color="secondary">
                        <Toolbar>
                            {isDesktop ? (
                                <DesktopNavigation path={path} />
                            ) : (
                                <MobileNavigation path={path} />
                            )}
                            <GlobalSearchField isMobile={!isDesktop} />
                            <Tooltip title="Toggle dark theme">
                                <IconButton
                                    color="inherit"
                                    onClick={() =>
                                        setTheme(
                                            theme === 'dark' ? 'light' : 'dark'
                                        )
                                    }
                                >
                                    {theme === 'light' ? (
                                        <NightsStayIcon />
                                    ) : (
                                        <Brightness7Icon />
                                    )}
                                </IconButton>
                            </Tooltip>
                        </Toolbar>
                    </AppBar>
                    {children}
                </>
            </MuiThemeProvider>
        </>
    )
}

export default function Header() {
    const dispatch = useDispatch();
    const classes = useStyles();

    const apiKey = useSelector(selectApiKey);
    const apiKeyPresent = !!apiKey;
    const handleApiKeyDialogOpen = () => {
        dispatch(toggleApiKeyDialog(true));
    };
    const handleUndoClick = () => {
        dispatch(ActionCreators.undo());
    };
    const handleRedoClick = () => {
        dispatch(ActionCreators.redo());
    };

    return <AppBar position="static">
        <Container maxWidth={"lg"}>
            <Toolbar variant="regular" disableGutters={true}>
                <div className={classes.buttonGroup}>
                    <Typography variant="h6" color="inherit">
                        Prompts.ai
                    </Typography>
                </div>
                <div className={classes.buttonGroup}>
                    <IconButton onClick={handleApiKeyDialogOpen}><VpnKeyIcon color={apiKeyPresent ? "action" : "error"}/></IconButton>
                </div>
                <div className={classes.buttonGroup}>
                    <IconButton onClick={handleUndoClick}><UndoIcon/></IconButton>
                    <IconButton onClick={handleRedoClick}><RedoIcon/></IconButton>
                </div>
                <div className={classes.buttonGroup}>
                    <IconButton aria-label="GitHib" onClick={() => window.open('https://github.com/sevazhidkov/prompts-ai', '_blank')}>
                        <GitHubIcon fontSize={'small'}/>
                    </IconButton>
                </div>
            </Toolbar>
        </Container>
    </AppBar>
}

MainAppBar = observer((props: Props) => {
  const classes = useStyles();
  const connected = props.connectionContainer.connectionStatus;

  if (props.authContainer.hasCreatedVault && props.authContainer.isUnLocked) {
    return (
      <React.Fragment>
        <AppBar
          position="static"
          className={classes.root}
          color={'transparent'}
        >
          <Toolbar>
            <IconButton edge="start" component={Link} to={'/'}>
              <HomeIcon />
            </IconButton>
            <Button
              // Toggles connection status
              variant="outlined"
              className={classes.title}
              color={connected ? 'primary' : 'default'}
              size="small"
              onClick={() => {
                if (connected) {
                  props.connectionContainer.disconnectFromSite();
                } else {
                  props.connectionContainer.connectToSite();
                }
              }}
            >
              {connected ? 'Connected' : 'Disconnected'}
            </Button>
            <MoreMenu authContainer={props.authContainer} />
          </Toolbar>
        </AppBar>
        <div className={classes.toolbarMargin}></div>
      </React.Fragment>
    );
  } else {
    return <div className={classes.toolbarMargin}></div>;
  }
})