129 lines
No EOL
3.8 KiB
TypeScript
129 lines
No EOL
3.8 KiB
TypeScript
import { AppBar, Box, IconButton, Theme, Toolbar } from "@mui/material";
|
|
import { Menu } from "@mui/icons-material";
|
|
import { makeStyles } from "@mui/styles";
|
|
import { getDarkLogo, getLightLogo, getSignatureAccentColour, hasTransparentLogoBG, hideLogo } from "../services/whiteLabel";
|
|
import { useThemeType } from "../hooks/useThemeType";
|
|
import UserMenu from "../user/UserMenu";
|
|
import { useMobile } from "hooks";
|
|
import HeaderButtons from "./HeaderButtons";
|
|
import { useGlobalState } from "providers";
|
|
import SideNavigator from "navigation/SideNavigator";
|
|
import { useState } from "react";
|
|
import BottomNavigator from "navigation/BottomNavigator";
|
|
|
|
const useStyles = makeStyles((theme: Theme) => ({
|
|
appBar: {
|
|
zIndex: theme.zIndex.drawer + 1,
|
|
backgroundImage: "none", // This prevents de-saturation of header in dark mode
|
|
backgroundColor: "#272727"
|
|
},
|
|
toolbar: {
|
|
marginLeft: theme.spacing(0.5),
|
|
[theme.breakpoints.up("md")]: {
|
|
marginLeft: theme.spacing(1.5)
|
|
}
|
|
},
|
|
buttonContainer: {
|
|
marginRight: theme.spacing(0.5),
|
|
[theme.breakpoints.up("md")]: {
|
|
marginRight: theme.spacing(1.5)
|
|
},
|
|
color: getSignatureAccentColour() + " !important"
|
|
},
|
|
button: {
|
|
color: getSignatureAccentColour() + " !important"
|
|
},
|
|
hide: {
|
|
display: "none"
|
|
},
|
|
logoContainer: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
height: "56px",
|
|
justifyContent: "flex-start",
|
|
[theme.breakpoints.up("md")]: {
|
|
height: "64px"
|
|
}
|
|
},
|
|
logoLink: {
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderRadius: "5px",
|
|
backgroundColor: hasTransparentLogoBG()
|
|
? ""
|
|
: theme.palette.mode === "light"
|
|
? "#fff"
|
|
: "#0000"
|
|
},
|
|
HeaderLogo: {
|
|
objectFit: "cover",
|
|
height: "56px",
|
|
width: "auto",
|
|
padding: theme.spacing(1),
|
|
[theme.breakpoints.up("md")]: {
|
|
height: "64px"
|
|
}
|
|
},
|
|
appBarRight: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
marginLeft: theme.spacing(2),
|
|
marginRight: theme.spacing(1),
|
|
[theme.breakpoints.up("md")]: {
|
|
marginLeft: theme.spacing(3),
|
|
marginRight: theme.spacing(2)
|
|
}
|
|
},
|
|
}));
|
|
|
|
export default function Header() {
|
|
|
|
const themeType = useThemeType();
|
|
const classes = useStyles()
|
|
const isMobile = useMobile();
|
|
|
|
const [{ user, team }] = useGlobalState();
|
|
const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
|
|
|
|
const [navOpen, setNavOpen] = useState(false)
|
|
|
|
return (
|
|
<>
|
|
<AppBar position="fixed" className={classes.appBar}>
|
|
<Toolbar disableGutters className={classes.toolbar}>
|
|
<Box className={classes.buttonContainer}>
|
|
{!isMobile && (
|
|
<IconButton
|
|
color="inherit"
|
|
aria-label="Open side menu"
|
|
onClick={() => {setNavOpen(true)}}
|
|
style={{ color: getSignatureAccentColour() }}
|
|
className={classes.button}
|
|
>
|
|
<Menu />
|
|
</IconButton>
|
|
)}
|
|
</Box>
|
|
<Box flexGrow={1} marginLeft={0.5}>
|
|
{!hideLogo() && (
|
|
<div className={classes.logoContainer}>
|
|
<img
|
|
className={classes.HeaderLogo}
|
|
src={themeType === "light" ? getDarkLogo() : getLightLogo()}
|
|
alt={import.meta.env.REACT_APP_WEBSITE_TITLE}
|
|
/>
|
|
</div>
|
|
)}
|
|
</Box>
|
|
<Box className={classes.appBarRight}>
|
|
<UserMenu />
|
|
<HeaderButtons hasTeams={hasTeams} team={team} user={user} />
|
|
</Box>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<SideNavigator open={navOpen} onOpen={() => {setNavOpen(true)}} onClose={() => {setNavOpen(false)}} />
|
|
{isMobile && <BottomNavigator setNavOpen={() => {setNavOpen(true)}} sideIsOpen={navOpen} />}
|
|
</>
|
|
)
|
|
} |