сделал анимацию aside

assets/css/gp-style-core.css

@@ -801,6 +801,8 @@ button{
   opacity: 0;
   transition: opacity .2s ease-out;
   pointer-events: none;
+
+  white-space: nowrap;
 }
 .modal.active{
   opacity: 1;
@@ -827,6 +829,9 @@ button{
   position: relative;
 
   display: none;
+  
+  filter: blur(10px);
+  transition: filter .2s ease-out;
 }
 .modal__item.active{
   display: flex;
@@ -1125,3 +1130,14 @@ button{
   color: var(--text-dark);
 }
 /* radio */
+
+
+@keyframes slidein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

assets/js/gp-main.js

@@ -1,38 +1,9 @@
 'use strict';
 
-// function toggleOpenX(button, content, blockheight) {
-//     let thisButton = document.querySelector(button), 
-//         thisContent = document.querySelector(content),
-//         thisBlockheight = document.querySelector(blockheight);
+// header 
 
-//     thisButton.onclick = function () {
-//         let height = thisBlockheight.clientHeight;
+// header 
 
-//         if (!thisContent.classList .contains('open')) {
-//             thisContent.style.height = `${height}px`;
-//             thisContent.classList .add('open');
-//         }else{
-//             thisContent.style.height = null;
-//             thisContent.classList .remove('open');
-//         }
-//     }
-// }
-
-
-
-
-// header start
-// toggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
-// toggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
-// header end
-
-// lang start
-// toggleOpenX('.lang__open','.lang__content','.lang__list');
-// lang end
-
-// toggle
-toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
-// toggle
 
 // checkbox 
 let checkbox = document.querySelectorAll('.checkbox');
@@ -53,15 +24,20 @@ checkbox.forEach(e => {
 
 // media
 modalOpen('.button--filter', '.modal__filter');
+modalOpen('.basket-open', '.modal__basket');
 modalClose('.modal__close');
 // media
 
+// toggle
+toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
+// toggle
 
 
 function modalOpen(buttonElement, contentElement){
     let modal = document.querySelector('.modal'),
         aside = document.querySelector('.modal__aside'),
-        elements = document.querySelectorAll(buttonElement);
+        elements = document.querySelectorAll(buttonElement),
+        device = window.screen.width;
 
     elements.forEach(e => {
         let thisContentElement = document.querySelector(contentElement);
@@ -73,7 +49,15 @@ function modalOpen(buttonElement, contentElement){
             let width = thisContentElement.clientWidth;
 
             setTimeout(() => {
-                aside.style.width = `${width}px`;
+                if (device <= 576) {
+                    aside.style.width = `${device}px`;
+                    thisContentElement.style.opacity = 1;
+                    thisContentElement.style.filter = 'blur(0px)';
+                }else{
+                    aside.style.width = `${width}px`;
+                    thisContentElement.style.opacity = 1;
+                    thisContentElement.style.filter = 'blur(0px)';
+                }
             }, 10);
         }
     })
@@ -87,15 +71,23 @@ function modalClose(buttonElement) {
 
     elements.forEach(e => {
         e.onclick = function () {            
-            modal.classList.remove('active');
-            aside.style.width = 0;
-            
+            aside.style.width = '0px';
             
             asideItems.forEach(e => {
                 if (e.classList.contains('active')) {
-                    e.classList.remove('active');
+                    e.style.filter  = 'blur(10px)';
                 }
-            })
+            });
+
+            setTimeout(() => {
+                asideItems.forEach(e => {
+                    if (e.classList.contains('active')) {
+                        e.classList.remove('active');
+                    }
+                });
+
+                modal.classList.remove('active');
+            }, 300);
         }
     })
 }