function mediaQuery(query) {
let $button = document.querySelector('#burguer-button'); let navItem = document.querySelector('.navbar-item'); let element = 'active'; if (query.matches) { $button.addEventListener('click', function() { toggleMenu(navItem, $button, element) }); } else { $button.removeEventListener('click', function() { toggleMenu(navItem, $button, element); }); }
}
function toggleMenu(navItem, $button, element) {
let ico = $button.querySelector('svg'); if (navItem.classList.contains(element)){ navItem.classList.remove(element); ico.classList.replace('fa-times-circle', 'fa-bars'); ico.setAttribute('data-icon', 'bars'); } else { navItem.classList.add(element); ico.classList.replace('fa-bars', 'fa-times-circle'); ico.setAttribute('data-icon', 'times-circle'); }
}
window.onload = function() {
let query = window.matchMedia('(max-width: 500px)'); query.addListener(mediaQuery); mediaQuery(query); let all = document.querySelectorAll('.icon'); for (let i = 1; i < all.length + 1; i ++) { let nav = document.querySelector('.nav-'+i); let $button = document.querySelector('#toggle-'+ i); let element = 'active_nav-'+i; $button.addEventListener('click', function() { toggleMenu(nav, $button, element); }); }
}