mobile menu ready

KristinaHranovska · Feb 14, 2024 · a7166fa · a7166fa
1 parent f0f5f5c
commit a7166fa
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git 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
@@ -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');