navigation menu open overlay

navigation-ii.js

class NavigationII{
    //1. Describe and initiate our object
    constructor() {
        this.openMenu = document.getElementById('open-menu')
        this.closeMenu = document.getElementById('close-menu')
        this.mobileMenu = document.getElementById('mobile-menu')
        this.htmlBody = document.getElementsByTagName('body')

        this.events()
    }

    // 2. Events
    events() {
        this.openMenu.addEventListener("click", () => this.openMenuOverlay())
        this.closeMenu.addEventListener("click", () => this.closeMenuOverlay())
    }

    // 3. methods (function, action...)
    openMenuOverlay(){
        this.mobileMenu.classList.remove("hidden")
        this.scrollToggle()
    }

    closeMenuOverlay(){
        this.mobileMenu.classList.add("hidden")
        this.scrollToggle()
    }

    scrollToggle() {
        if (this.htmlBody[0].style.overflow === '' || this.htmlBody[0].style.overflow === 'scroll') {
            this.htmlBody[0].style.overflow = 'hidden'
        } else {
            this.htmlBody[0].style.removeProperty('overflow')
        }

    }
}

export default NavigationII