I have a confusing issue where I want to update a portion of the state of the header when it gets to screen size large. I'm currently using tailwind so I have the following code:
Where when in mobile view, if the template is not hidden, and the screen size gets to large-- the state should automatically get updated with handleHideTemplates...
That's what I'm attempting to do. I understand with this the handle is fired immediately which I don't want...
in mobile view, if the person hits showTemplates, it hides templates immediately.
const handleHideTemplates = () => {
dispatch(setShowTemplates({ hidden: 'hidden' }));
dispatch(setTemplateMargin({ margin: '' }));
};
console.log('hidden', hidden);
return (
<header
className={`text-gray-500 text-semibold text-s fill-accent1
top-0 z-30 sticky lg:grid ${
'grid' ? handleHideTemplates() : null
} bg-templateBg px-8 ${margin}`}
>figured it out... instead of conditional inside class..
useEffect(() => {
const handleResize = () => {
if (window.innerWidth >= 1024) {
handleHideTemplates();
}
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);