@material-ui/core#AppBar TypeScript Examples

The following examples show how to use @material-ui/core#AppBar. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: 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>
  );
}

Example #2

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

Example #3

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

Example #4

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

Example #5

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

Example #6

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

Example #7

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

Example #8

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

Example #9

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

Example #10

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

Example #11

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

Example #12

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)

Example #13

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

Example #14

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

Example #15

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

Example #16

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

Example #17

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

Example #18

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

Example #19

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

Example #20

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

Example #21

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

Example #22

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

Example #23

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

Example #24

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

Example #25

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

Example #26

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

Example #27

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

Example #28

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

Example #29

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