import "./Header.css"; import React, { useState } from "react"; import { AppBar, Toolbar, IconButton, Typography, List, ListItem, ListItemText, Button, Box } from "@material-ui/core"; import { makeStyles } from "@material-ui/core/styles"; import MenuIcon from "@material-ui/icons/Menu"; import { useMediaQueryContext } from "../../context/MediaQueryProvider"; import clsx from "clsx"; import { NavDrawer } from "../NavDrawer"; import { Link, useLocation } from "react-router-dom"; import { akashRedGradient } from "@src/shared/utils/colorUtils"; import CloudUploadIcon from "@material-ui/icons/CloudUpload"; const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1 }, appBar: { backgroundColor: "#242526" }, menuButton: { marginRight: theme.spacing(2), zIndex: 111 }, toolbar: { minHeight: 80, alignItems: "center" }, logoContainer: { display: "flex", alignItems: "center" }, logoContainerSmall: { flexGrow: 1, justifyContent: "center", position: "absolute", width: "100%", left: 0 }, logo: { height: "5rem" }, title: { flexGrow: 1, fontWeight: "bold", alignSelf: "baseline" }, titleSmall: { flexGrow: "initial" }, // nav navDisplayFlex: { display: "flex", justifyContent: "flex-end", flexGrow: 1 }, linkText: { textDecoration: "none", textTransform: "uppercase" }, navButton: { borderRadius: "5px" }, actionButtonListItem: { paddingTop: 0, paddingBottom: 0, height: "100%" }, actionButtonBase: { height: "100%", transition: "all .3s ease", minWidth: "120px" }, actionButton: { background: akashRedGradient, color: "#ffffff" } })); const navLinks = [ // { title: `deploy`, path: `/deploy` }, { title: `price compare`, path: `/price-compare` }, { title: `faq`, path: `/faq` } ]; 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> ); }