JSFiddle - React, Tailwind, and code Playground
HTML
<nav class="burger-menu mobile-open">
<button class="burger-menu__btn-mobile">
<i class="fas fa-bars"></i>
<span>Menu</span>
</button>
<ul class="burger-menu__list">
<li class="burger-menu__item">
@@include('./partials/menu/_menu.html', {
"item": "contacts"
})
</li>
<li class="burger-menu__item">
@@include('./partials/menu/_menu.html', {
"item": "e-shop"
})
</li>
<li class="burger-menu__item">
@@include('./partials/menu/_menu.html', {
"item": "faq"
})
</li>
<li class="burger-menu__item">
@@include('./partials/menu/_menu.html', {
"item": "home"
})
</li>
</ul>
</nav>
JavaScript
var menuEl = document.querySelector('.burger-menu');
var btnEl = document.querySelector('.burger-menu__btn-mobile');
function toggleMenu() {
menuEl.classList.toggle('open');
}
btnEl.onclick = toggleMenu;