const rootElement = document.getElementById('header')
function Header() {
let hamburger;
let navLinks;
let nav;
let screenWidth = window.innerWidth;
React.useEffect(() => {
hamburger = document.querySelector('.hamburger');
//navLinks = document.querySelector('.menu-list-container');
navLinks = document.querySelector('.menu-horizontal');
nav = document.querySelector('nav');
screenWidth <= 768 ? setHamburger() : setNavViewLargeSize();
hamburger.addEventListener('click', function () {
navLinks.style.display === 'none' ? setCollapseSmallSize() : setHamburger();
});
window.addEventListener('resize', function () {
screenWidth = window.innerWidth;
screenWidth <= 768 ? setHamburger() : setNavViewLargeSize();
});
}, []);
const setNavViewLargeSize = () => {
navLinks.style.display = 'flex';
hamburger.style.display = 'none';
navLinks.style.flexDirection = "row";
navLinks.style.justifyContent = "space-around";
nav.style.height = "50px";
}
const setCollapseSmallSize = () => {
navLinks.style.display = 'block';
hamburger.style.display = 'block';
navLinks.style.flexDirection = "column";
nav.style.height = "440px";
}
const setHamburger = () => {
navLinks.style.display = 'none';
hamburger.style.display = 'block';
nav.style.height = "45px";
hamburger.style.backgroundColor = "#3c64ad";
}
return (
<>
)
}
ReactDOM.render(
,
rootElement
)