130 lines
No EOL
4.2 KiB
TypeScript
130 lines
No EOL
4.2 KiB
TypeScript
import { AppBar, Box, IconButton, Theme, Toolbar } from "@mui/material";
|
|
import { Menu } from "@mui/icons-material";
|
|
// import classNames from "classnames";
|
|
import { makeStyles } from "@mui/styles";
|
|
import { getDarkLogo, getLightLogo, getSignatureAccentColour, hasTransparentLogoBG, hideLogo } from "../services/whiteLabel";
|
|
// import { Link } from "react-router-dom";
|
|
import { useThemeType } from "../hooks/useThemeType";
|
|
import UserMenu from "../user/UserMenu";
|
|
import { useMobile } from "hooks";
|
|
import HeaderButtons from "./HeaderButtons";
|
|
import { useGlobalState } from "providers";
|
|
|
|
const useStyles = makeStyles((theme: Theme) => ({
|
|
appBar: {
|
|
zIndex: theme.zIndex.drawer + 1,
|
|
backgroundImage: "none", // This prevents de-saturation of header in dark mode
|
|
},
|
|
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)
|
|
}
|
|
},
|
|
}));
|
|
|
|
interface Props {
|
|
toggleTheme: () => void;
|
|
sideIsOpen: boolean;
|
|
openSide: () => void;
|
|
// teams: Team[];
|
|
// setTeams: React.Dispatch<React.SetStateAction<Team[]>>;
|
|
}
|
|
|
|
export default function Header(props: Props) {
|
|
|
|
// const { sideIsOpen, openSide, toggleTheme } = props;
|
|
const { openSide, toggleTheme } = props;
|
|
const themeType = useThemeType();
|
|
const classes = useStyles()
|
|
const isMobile = useMobile();
|
|
|
|
const [{ user, team }] = useGlobalState();
|
|
const hasTeams = user.hasFeature ? user.hasFeature("teams") : 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={openSide}
|
|
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 toggleTheme={toggleTheme} />
|
|
<HeaderButtons hasTeams={hasTeams} team={team} user={user} />
|
|
</Box>
|
|
</Toolbar>
|
|
</AppBar>
|
|
)
|
|
} |