Add mobile-menu transition

KoptevAnton · Aug 5, 2024 · 64b74e9 · 64b74e9
1 parent 5d28dde
commit 64b74e9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/css/header.css b/src/css/header.css
@@ -220,14 +220,22 @@
 .modal {
   position: fixed;
   top: 0;
-  left: 0;
+  right: 0;
   width: 100%;
   height: 100%;
+  transform: translate(100%, -100%);
   z-index: 999;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.is-open-modal {
+  transform: translate(0%, 0%);
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
 }
 
 .mobile-menu-wrap {

diff --git a/src/js/header.js b/src/js/header.js
@@ -14,20 +14,20 @@ import {
 let isMenuOpen = false;
 
 mobileModalBtn.addEventListener('click', () => {
-  modal.classList.toggle('is-open');
+  modal.classList.toggle('is-open-modal');
   body.classList.toggle('no-scroll');
 });
 
 closeModalBtn.addEventListener('click', () => {
-  modal.classList.remove('is-open');
+  modal.classList.remove('is-open-modal');
   body.classList.toggle('no-scroll');
 });
 
 modal.addEventListener('click', evt => {
   if (evt.target.nodeName !== 'A') {
     return;
   }
-  modal.classList.remove('is-open');
+  modal.classList.remove('is-open-modal');
   body.classList.toggle('no-scroll');
 });