mobile meni karlo

mobile-menu-karlo.js

import {Power3, TweenMax} from 'gsap/TweenMax';
import $ from 'jquery';

export class MobileNav {

    constructor(options) {

        const _defaults = {
            mobileMenuTrigger: '.js-mobile-menu-trigger',
            mobileMenuClose: '.js-mobile-menu-close',
            mobileMenu: '.js-mobile-navigation',
        };

        this.defaults = Object.assign({}, _defaults, options);

        this.mobileMenuTrigger = document.querySelector(this.defaults.mobileMenuTrigger);
        this.mobileMenuClose = document.querySelector(this.defaults.mobileMenuClose);

        // this.mobileMenuTrigger.addEventListener('click', this.openNavMenu);
        // this.mobileMenuClose.addEventListener('clock', this.closeNavMenu(event));

        this.initClicks();

    }

    getMobileMenuTrigger() {
        return $(this.defaults.mobileMenuTrigger);
    }

    getMobileMenu() {
        return $(this.defaults.mobileMenu);
    }

    // region methods
    initClicks() {
        this.getMobileMenuTrigger().on('click', (ev) => {
            ev.preventDefault();
            ev.currentTarget.classList.contains('is-opened') ? this.closeNavMenu(ev.currentTarget) : this.openNavMenu(ev.currentTarget);
        });
    }

    openNavMenu() {

        TweenMax.to(this.getMobileMenu(), 0.5, {
            x: -305,
            ease: Power3.easeInOut,
            onComplete: () => {
                this.getMobileMenuTrigger().addClass('is-opened');
            },
        });

    }

    closeNavMenu(event) {

        event.preventDefault();

        TweenMax.to(this.getMobileMenu(), 0.5, {
            x: 0,
            ease: Power3.easeInOut,
            onComplete: () => {
                this.getMobileMenuTrigger().removeClass('is-opened');
            },
        });

    }

}