I am back with another tutorial.
In this tutorial, Today I will explain How To Add a Class in the body tag while opening the hamburger mobile menu in Hyva Magento2 using TailwindCSS and AlpineJS.
Override the below file in your theme:
vendor/hyva-themes/magento2-default-theme/Magento_Theme/templates/html/header/menu/mobile.phtml
Search @keydown.window.escape=”open=false” and add @click=”addClassToBodyTag()” code after that line.
Replace the below code:
<script>
'use strict';
const initMenuMobile<?= $escaper->escapeHtml($uniqueId) ?> = () => {
return {
mobilePanelActiveId: null,
open: false,
setActiveMenu(menuNode) {
Array.from(menuNode.querySelectorAll('a')).filter(link => {
return link.href === window.location.href.split('?')[0];
}).map(item => {
item.classList.add('underline');
item.closest('div.level-0') &&
item.closest('div.level-0').querySelector('a.level-0').classList.add('underline');
});
}
}
}
</script>With
<script>
'use strict';
const initMenuMobile<?= $escaper->escapeHtml($uniqueId) ?> = () => {
return {
mobilePanelActiveId: null,
open: false,
setActiveMenu(menuNode) {
Array.from(menuNode.querySelectorAll('a')).filter(link => {
return link.href === window.location.href.split('?')[0];
}).map(item => {
item.classList.add('underline');
item.closest('div.level-0') &&
item.closest('div.level-0').querySelector('a.level-0').classList.add('underline');
});
},
addClassToBodyTag() {
document.body.classList.toggle("nav-open");
}
}
}
</script>Now you can see a nav-open class in the body tag when you will open a menu in the Mobile view.
I hope this blog is easy to understand about How To Add a Class in the body tag while opening the hamburger mobile menu in Hyva Magento2 using TailwindCSS and AlpineJS. I hope you have got the above coding concepts. Now you can easily implement the above functionality in your Hyva project. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution.
Keep liking and sharing !!
More will be coming soon… 🙂
Hitesh 