$ResponsiveHeaderwithPureJS

by mtambulut

JavaScript

(function () {

    var billQuery = window.matchMedia('(max-width: 576px)');
    var billMenu = document.querySelector('.bill-menu');

    var isOpen = false;
    var billMenuLinks = Array.from(billMenu.querySelectorAll('a.bill-menu__link'));
    var openMenu = document.querySelector('.nav-bill-menu-dropdown');
    var selectedItem = 'Ăśyelik Bilgilerim';

    var selectedLinkText = billMenu.querySelector('#bill-menu-selected-item');
    var dropdownLinks = openMenu.querySelectorAll('.nav-bill-menu-dropdown__link a');
    console.dir(dropdownLinks);
    selectedLinkText.innerText = selectedItem;


    dropdownLinks.forEach(link => {
        link.addEventListener('click', function () {
            onChangeSelectedItem(link.innerText);
        });
    });

    function onChangeSelectedItem(sI) {
        selectedItem = sI;
        selectedLinkText.innerText = sI;
    }


    function a(billQuery) {
        if (billQuery.matches) {
            console.log('add event listener');
            billMenu.addEventListener('click', openMenuEvent);
            selectedLinkText.style.display = 'block';
            billMenuLinks.forEach(link => {
                link.style.display = 'none';
            });
        } else {
            console.log('remove event listener');
            billMenu.removeEventListener('click', openMenuEvent);
            selectedLinkText.style.display = 'none';
            isOpen = false;

            openMenu.style.display = isOpen ? 'block' : 'none';
            billMenuLinks.forEach(link => {
                link.style.display = 'block';
            });
        }


    }

    function openMenuEvent() {
        isOpen = !isOpen;
        openMenu.style.display = isOpen ? 'block' : 'none';
    }


    a(billQuery);
    billQuery.addListener(a);

})();