add mobile desktop transition animation from right side

goldipl · Jun 28, 2024 · d89b70b · d89b70b
1 parent d699674
commit d89b70b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/sass/common/_mobile_menu.scss b/sass/common/_mobile_menu.scss
@@ -718,10 +718,10 @@ html.body-locked {
       height: 10px;
     }
     .mobile-menu {
-      display: none;
+      display: flex;
       position: fixed;
       top: 0;
-      right: calc((100vw - 1728px) / 2);
+      right: -200vw;
       width: 480px;
       height: 100vh;
       background-color: $white;
@@ -730,7 +730,7 @@ html.body-locked {
       transition: 0.4s;
       overflow: hidden;
       &.active {
-        display: flex;
+        right: calc((100vw - 1728px) / 2);
       }
       &-wrapper {
         &__content {

diff --git a/sass/main.css b/sass/main.css
@@ -3167,10 +3167,10 @@ html.body-locked {
     height: 10px;
   }
   .header-2-0 .mobile-menu {
-    display: none;
+    display: flex;
     position: fixed;
     top: 0;
-    right: calc((100vw - 1728px) / 2);
+    right: -200vw;
     width: 480px;
     height: 100vh;
     background-color: #ffffff;
@@ -3180,7 +3180,7 @@ html.body-locked {
     overflow: hidden;
   }
   .header-2-0 .mobile-menu.active {
-    display: flex;
+    right: calc((100vw - 1728px) / 2);
   }
   .header-2-0 .mobile-menu-wrapper__content .second-lvl-menu-wrapper,
   .header-2-0 .mobile-menu-wrapper__content .menu-inner-third-lvl-content-wrapper {