diff --git a/src/css/header.css b/src/css/header.css index 24bd7fa..c99b56d 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -5,6 +5,11 @@ width: 100%; } +.backdrop-button.active-link { + background: var(--white-color); + color: var(--text-dark); +} + .header-logo { font-weight: 700; font-size: 16px; diff --git a/src/js/burger-menu.js b/src/js/burger-menu.js index 40ac2ea..76411b4 100644 --- a/src/js/burger-menu.js +++ b/src/js/burger-menu.js @@ -1,6 +1,3 @@ -const favoritesButton = document.querySelector('.link-favorites'); -const homeButton = document.querySelector('.link-home'); - (() => { const refs = { openModalBtn: document.querySelector('.burger-menu-open'), @@ -14,7 +11,23 @@ const homeButton = document.querySelector('.link-home'); refs.openModalBtn.addEventListener('click', function () { toggleModal(); disableScroll(); + + //Для активної лінки + const homeButtons = document.getElementsByClassName('js-main-link-home'); + const favoritesButtons = document.getElementsByClassName('js-main-link-favorites'); + const currentPath = window.location.pathname; + const targetPage = 'favorites.html'; + + if (currentPath === '/' + targetPage) { + Array.from(favoritesButtons).forEach(button => button.classList.add('active-link')); + Array.from(homeButtons).forEach(button => button.classList.remove('active-link')); + } else { + Array.from(homeButtons).forEach(button => button.classList.add('active-link')); + Array.from(favoritesButtons).forEach(button => button.classList.remove('active-link')); + } + }); + refs.closeModalBtn.addEventListener('click', function () { toggleModal(); enableScroll(); @@ -43,6 +56,10 @@ const homeButton = document.querySelector('.link-home'); } })(); + +const favoritesButton = document.querySelector('.link-favorites'); +const homeButton = document.querySelector('.link-home'); + window.addEventListener('load', () => { if (window.location.pathname.endsWith('favorites.html')) { favoritesButton.classList.add('active-link');