120 lines
No EOL
3.7 KiB
TypeScript
120 lines
No EOL
3.7 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";
|
|
|
|
const useStyles = makeStyles((theme: Theme) => ({
|
|
appBar: {
|
|
zIndex: theme.zIndex.drawer + 1,
|
|
},
|
|
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)
|
|
}
|
|
},
|
|
button: {
|
|
color: getSignatureAccentColour()
|
|
},
|
|
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 { mode, setMode } = useColorScheme();
|
|
|
|
const themeType = useThemeType();
|
|
const classes = useStyles()
|
|
|
|
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}
|
|
className={classNames(classes.button, sideIsOpen && classes.hide)}>
|
|
<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} />
|
|
</Box>
|
|
</Toolbar>
|
|
</AppBar>
|
|
)
|
|
} |