Hyva: How To Add Class in body tag while opening hamburger mobile menu in Hyva Magento2

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… 🙂