import { hideScroll, restoreScroll } from './_helpers.js'

if (checkIfExists('.toggle-nav-btn')) {
  
const mobileNavBtn = document.querySelector('.toggle-nav-btn')
const mobileNav = document.querySelector('.categories__container')
const mobileNavOverlay = document.querySelector('.mobile-nav-overlay')

mobileNavBtn.addEventListener('click', function(e) {
    e.preventDefault()

    mobileNavBtn.classList.toggle('toggle')
    mobileNav.classList.toggle('show-mobile-nav')
    mobileNavOverlay.style.display = 'block'

    if (mobileNav.classList.contains('show-mobile-nav')) {
        hideScroll()
    } else {
        mobileNavOverlay.style.display = 'none'
        restoreScroll()
    }
})

mobileNavOverlay.addEventListener('click', function(e) {
    mobileNav.classList.remove('show-mobile-nav')
    mobileNavOverlay.style.display = 'none'
    mobileNavBtn.classList.remove('toggle')
    restoreScroll()
})
}