45 lines
1.0 KiB
JavaScript
45 lines
1.0 KiB
JavaScript
import PropTypes from "prop-types";
|
|
import { useMediaQuery } from "react-responsive";
|
|
import HeaderLogo from "./HeaderLogo";
|
|
import MenuButton from "./Buttons/MenuButton";
|
|
const Header = ({
|
|
theme = null,
|
|
large = false,
|
|
showMenu = true,
|
|
onMenuToggle = () => {},
|
|
menuToggled = false,
|
|
}) => {
|
|
const isLargeMobile = useMediaQuery({ maxWidth: 1200 });
|
|
return (
|
|
<>
|
|
<div className={`tb-header${isLargeMobile ? " tb-header-mobile" : ""}`}>
|
|
<HeaderLogo large={large} />
|
|
|
|
{showMenu && (
|
|
<MenuButton
|
|
theme={theme}
|
|
onToggle={onMenuToggle}
|
|
toggled={menuToggled}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="tb-top-gradient" />
|
|
</>
|
|
);
|
|
};
|
|
|
|
Header.propTypes = {
|
|
pageData: PropTypes.object,
|
|
theme: PropTypes.shape({
|
|
backgroundColor: PropTypes.any,
|
|
textColor: PropTypes.any,
|
|
}),
|
|
large: PropTypes.bool,
|
|
showMenu: PropTypes.bool,
|
|
visible: PropTypes.bool,
|
|
onMenuToggle: PropTypes.func,
|
|
menuToggled: PropTypes.bool,
|
|
};
|
|
|
|
export default Header;
|