My code is simply trying to rotate the hamburger menu on open.
I have JS that toggles open class on button click. Which works fine. But this particular CSS (SCSS) code doesn't get compiled on npm run build
(NODE_ENV=production webpack --mode=production). This works fine running npm start
(NODE_ENV=development webpack serve --mode development). I am using SCSS, Tailwind and vanilla JS. I have added other SCSS in the same file and tested the JS which is also fine. What can I do to debug this issue? The CSS seems valid to me
.open .hamburger__top-bun {
transform: rotate(45deg);
}
.open .hamburger__bottom-bun {
transform: rotate(-45deg);
}
HTML
<button data-behaviour="navToggle" id="menuBtn" class="z-100 hamburger flex justify-center items-center lg:hidden focus:outline-none" type="button">
<span class="hamburger__top-bun"></span>
<span class="hamburger__bottom-bun"></span>
</button>
JS
const navToggle = document.querySelector('[data-behaviour="navToggle"]')
navToggle.addEventListener('click', function () {
const btn = document.getElementById('menuBtn');
const nav = document.getElementById('mobile-menu');
btn.classList.toggle('open');
nav.classList.toggle('flex');
nav.classList.toggle('hidden');
console.log(btn);
});
Via Active questions tagged javascript - Stack Overflow https://ift.tt/grMIEFY
Comments
Post a Comment