update

chertik77 · Oct 1, 2023 · 05620d5 · 05620d5
1 parent 416f912
commit 05620d5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/src/js/header.js b/src/js/header.js
@@ -2,7 +2,9 @@ import { disablePageScroll, enablePageScroll } from 'scroll-lock';
 
 const headerBurgerIcon = document.querySelector('.js-header-burger-icon');
 const headerBurgerModal = document.querySelector('#js-header-modal');
+const headerCloseIcon = document.querySelector('.js-header-icon-close');
 document.addEventListener('click', onHeaderBurgerBtnClick);
+headerCloseIcon.style.display = 'none';
 
 function onHeaderBurgerBtnClick(e) {
   if (
@@ -12,7 +14,8 @@ function onHeaderBurgerBtnClick(e) {
   ) {
     headerBurgerModal.showModal();
     disablePageScroll();
-    headerBurgerIcon.firstElementChild.outerHTML = '<use href="./icon-close.svg"></use>';
+    headerBurgerIcon.style.display = 'none';
+    headerCloseIcon.style.display = 'block';
   } else {
     if (
       e.target.classList.contains('header-modal-container') ||
@@ -22,6 +25,7 @@ function onHeaderBurgerBtnClick(e) {
     }
     headerBurgerModal.close();
     enablePageScroll();
-    headerBurgerIcon.firstElementChild.outerHTML = '<use href="./icons.svg#icon-burger"></use>';
+    headerBurgerIcon.style.display = 'block';
+    headerCloseIcon.style.display = 'none';
   }
 }
diff --git a/src/partials/header.html b/src/partials/header.html
@@ -59,6 +59,29 @@
         <use href="./img/icons.svg#icon-burger"></use>
       </svg>
     </button>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      class="js-header-icon-close"
+    >
+      <path
+        d="M18 6L6 18"
+        stroke="#77AC63"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M6 6L18 18"
+        stroke="#77AC63"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
   </div>
 </header>
 <dialog id="js-header-modal" class="header-burger-modal">

diff --git a/src/public/icon-close.svg b/src/public/icon-close.svg