I have two different menu's that I want to show based if they are on
- phone, tablets landscape
- phone, tablets landscape portrait
- desktop
I want to do it in javascript and not CSS. So far I have:
//For tablets/phones in landscape
if (window.matchMedia("(orientation: landscape)").matches) {
return (
<MegaMenuContainer provider={provider}/>
);
}
//for desktop
else if (width > 768){
return (
<MegaMenuContainerDesktop provider={provider}/>
);
}
//for tablets/phones in portrait
else {
return (
<MegaMenuContainer provider={provider}/>
);
}
Problem is that in the code in the first IF statement, it will be true for tablets as I want it to be. Problem is that it will ALSO be true when people uses a desktop in landscape (which is true in most cases) and the mobile menu will be shown. Any help?