@material-ui/core AppBar TypeScript Examples

Source File: index.tsx From react-app-architecture with Apache License 2.0

6 votes

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

Source File: Toolbar.tsx From homebase-app with MIT License

6 votes

StyledAppBar = styled(AppBar)(({ theme }: { theme: Theme }) => ({
  boxShadow: "none",
  background: theme.palette.primary.dark,
  position: "sticky",

  ["@media (max-height:750px)"]: {
    position: "static",
  }
}))

Source File: AppHeaderBar.tsx From metro-fare with MIT License

6 votes

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

Source File: index.tsx From rugenerous-frontend with MIT License

6 votes

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

Source File: NewsAppBar.tsx From The-TypeScript-Workshop with MIT License

6 votes

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

Source File: index.tsx From lobis-frontend with MIT License

6 votes

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

Source File: index.tsx From community-repo with GNU General Public License v3.0

6 votes

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

Source File: HeaderBar.tsx From mo360-ftk with MIT License

6 votes

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

Source File: index.tsx From wonderland-frontend with MIT License

6 votes

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

Source File: DashboardHeader.tsx From neodash with Apache License 2.0

6 votes

NeoDashboardHeader = ({ open, standalone, dashboardTitle,
    handleDrawerOpen, setDashboardTitle, editable, connection, settings,
    onConnectionModalOpen, onDownloadImage }) => {

    const downloadImageEnabled = settings ? settings.downloadImageEnabled : false;
    const [dashboardTitleText, setDashboardTitleText] = React.useState(dashboardTitle);


    useEffect(() => {
        // Reset text to the dashboard state when the page gets reorganized.
        if (dashboardTitle !== dashboardTitleText) {
            setDashboardTitleText(dashboardTitle);
        }
    }, [dashboardTitle])

    const content = (
        <AppBar position="absolute" style={
            (open) ? {
                zIndex: "auto",
                boxShadow: "none",
                marginLeft: drawerWidth,
                width: `calc(100% - ${drawerWidth}px)`,
                transition: "width 125ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
            } : {
                zIndex: "auto",
                boxShadow: "none",
                transition: "width 125ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
            }
        }>
            <NeoDashboardHeaderTitleBar downloadImageEnabled={downloadImageEnabled} onDownloadImage={onDownloadImage}
            dashboardTitle={dashboardTitle} setDashboardTitle={setDashboardTitle} editable={editable} standalone={standalone} open={open}
                onConnectionModalOpen={onConnectionModalOpen} handleDrawerOpen={handleDrawerOpen} connection={connection}></NeoDashboardHeaderTitleBar>
            <NeoDashboardHeaderPageList open={open}></NeoDashboardHeaderPageList>
        </AppBar>
    );
    return content;
}

Source File: Appbar.tsx From DamnVulnerableCryptoApp with MIT License

6 votes

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

Source File: AppBar.tsx From shadowsocks-electron with GNU General Public License v3.0

6 votes

StyledAppBar = withStyles((theme: Theme) => (
  createStyles({
    root: {
      boxShadow: 'none',
      backgroundColor: theme.palette.type === 'dark' ? grey[900] : grey[200],
      color: theme.palette.type === "dark" ? 'rgba(255,255,255, .8)' : 'rgba(0, 0, 0, .8)',
    },
  })
))(AppBar)

Source File: Header.tsx From rusty-chat with MIT License

6 votes

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

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

Source File: index.tsx From aqualink-app with MIT License

6 votes

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

Source File: Topbar.tsx From knests 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>
        <Link href="/">
          <img
            alt="Logo"
            src="/images/logos/logo--white.svg"
          />
        </Link>
      </Toolbar>
    </AppBar>
  );
}

Source File: index.tsx From twilio-voice-notification-app with Apache License 2.0

6 votes

Header: React.FC = () => {
  const classes = useStyles();
  return (
    <AppBar position="static" className={classes.appBar}>
      <Box display="flex" alignItems="center">
        <Box ml={1} mr={1} display="flex">
          <TwilioLogo />
        </Box>
        <Typography variant="h6" component="h1">
          Voice Notifications Application
        </Typography>
        <Box ml={1} mt="6px" display="flex" alignItems="center">
          <Typography variant="subtitle2" component="span">
            <Box component="i" fontWeight="fontWeightLight">
              powered by Twilio
            </Box>
          </Typography>
        </Box>
      </Box>
    </AppBar>
  );
}

Source File: Nav.tsx From Wern-Fullstack-Template with MIT License

6 votes

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

Source File: NavigationContainer.tsx From Demae with MIT License

6 votes

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

Source File: _app.tsx From youtube-2020-june-material-ui-themes with MIT License

6 votes

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

Source File: HubNavigationBar.tsx From dashboard with Apache License 2.0

5 votes

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

Source File: Toolbar.tsx From homebase-app with MIT License

5 votes

StyledAppBar = styled(AppBar)(({ theme }: { theme: Theme }) => ({
  boxShadow: "none",
  background: theme.palette.primary.main,
}))

Source File: MainAppBar.tsx From signer with Apache License 2.0

5 votes

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

Source File: within-a-toolbar.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License

5 votes

withinToolbar = (): StoryFnReactReturnType => {
    const useStyles = makeStyles({
        root: {
            height: 40,
            minHeight: 'initial',
        },
        title: {
            color: Colors.gray[600],
            fontSize: 12,
            textAlign: getDirection() === 'rtl' ? 'left' : 'right',
        },
    });

    const menuItems: UserMenuItem[] = [
        {
            itemID: '1',
            title: 'Settings',
            icon: <Settings />,
            onClick: action("click 'Settings'"),
        },
        {
            itemID: '2',
            title: 'Contact Us',
            icon: <Email />,
            onClick: action("click 'Contact Us'"),
        },
        {
            itemID: '3',
            title: 'Log Out',
            divider: true,
            icon: <ExitToApp style={getLeftToRightIconTransform()} />,
            onClick: action("click 'Log Out'"),
        },
        {
            itemID: '4',
            title: 'v1.03.54',
            InfoListItemProps: {
                classes: useStyles(),
            },
        },
    ];

    const menuGroups = [
        {
            items: menuItems,
        },
    ];

    return (
        <div style={{ width: '80%', height: 150 }}>
            <AppBar position={'relative'} color={'primary'} style={{ marginTop: -32 }}>
                <Toolbar style={{ padding: '0 16px', minHeight: 'unset', height: '4rem' }}>
                    <Typography variant={'h6'}>Toolbar Title</Typography>
                    <Spacer flex={1} />
                    <UserMenu
                        avatar={<Avatar />}
                        menuGroups={menuGroups}
                        menuTitle={'Jane Doe'}
                        menuSubtitle={'Account Manager'}
                        onOpen={action('open')}
                        onClose={action('close')}
                    />
                </Toolbar>
            </AppBar>
            <div
                style={{
                    height: '100%',
                    backgroundColor: useDarkMode() ? Colors.black[900] : Colors.white[50],
                    padding: 16,
                }}
            >
                <Typography variant={'subtitle1'}>Body Content Goes Here</Typography>
            </div>
        </div>
    );
}

Source File: AppTabBar.tsx From homebase-app with MIT License

5 votes

StyledAppBar = styled(AppBar)(({ theme }) => ({
  paddingTop: "20px",
  boxShadow: "unset",
  borderBottom: `2px solid ${theme.palette.primary.light}`
}))

Source File: Header.tsx From storefront with MIT License

5 votes

Header: React.VFC = () => {
  const styles = useStyles();
  const { settings } = useSettings();
  const [open, toggleOpen] = useToggle(false);

  const { data: menu } = useMenuQuery({
    variables: { location: MenuLocationEnum.PRIMARY_NAVIGATION },
  });

  const { data: { cart } = { cart: undefined } } = useCartQuery({
    fetchPolicy: 'no-cache',
    ssr: false,
  });

  return (
    <AppBar color="default" position="relative">
      <Toolbar
        className={styles.toolbar}
        sx={{
          minHeight: { xs: 60, md: 110 },
          mx: 'auto',
          width: '100%',
        }}
      >
        <Box sx={{ display: { md: 'none' }, flexGrow: 1 }}>
          <IconButton aria-label="Menu" onClick={toggleOpen}>
            <Menu />
          </IconButton>
        </Box>
        <Link href="/" underline="none">
          <Logo className={styles.logo} aria-label={settings.title} />
        </Link>
        <Box
          sx={{
            alignItems: 'center',
            alignSelf: 'stretch',
            display: 'flex',
            flexGrow: 1,
            justifyContent: 'flex-end',
          }}
        >
          <Box sx={{ display: { xs: 'none', md: 'flex' }, height: '100%' }}>
            <HeaderMenu menu={menu} />
          </Box>
          <IconButton href="/cart" color="inherit" aria-label="Cart">
            <Badge badgeContent={cart?.contents?.itemCount}>
              <Cart />
            </Badge>
          </IconButton>
        </Box>
      </Toolbar>
      <Collapse unmountOnExit in={open} timeout="auto">
        <HeaderMenu menu={menu} />
      </Collapse>
    </AppBar>
  );
}

Source File: layout.tsx From mtcute with GNU Lesser General Public License v3.0

5 votes

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

Source File: DashboardPlaceholder.tsx From neodash with Apache License 2.0

5 votes

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

Source File: App.tsx From cognitive-search-static-web-apps-sample-ui with MIT License

5 votes

BottomBar: typeof AppBar = styled(AppBar)({
    top: 'auto',
    bottom: 0
})

Source File: Header.tsx From prompts-ai with MIT License

5 votes

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

@material-ui/core#AppBar TypeScript Examples