сделал анимацию 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) {
+// header 
-//     let thisButton = document.querySelector(button), 
-//         thisContent = document.querySelector(content),
-//         thisBlockheight = document.querySelector(blockheight);
 
-//     thisButton.onclick = function () {
+// header 
-//         let height = thisBlockheight.clientHeight;
 
-//         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 = '0px';
-            aside.style.width = 0;
-            
             
             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);
         }
     })
 }

index.html

@@ -115,7 +115,7 @@
                         </a>
                     </div>
                     <div class="mini-profile__item">
-                        <button class="mini-profile__button">
+                        <button class="mini-profile__button basket-open">
                             <img src="assets/img/svg/mini-profile/basket.svg" alt="" class="mini-profile__icon">
                         </button>
                     </div>
@@ -490,9 +490,9 @@
             </div>
         </main>
 
-        <div class="modal" style="display: none;">
+        <div class="modal">
             <aside class="modal__aside">
-                <div class="modal__item modal__filter" style="display: none;">
+                <div class="modal__item modal__filter">
                     <button class="modal__close">
                         <img src="assets/img/svg/main/black-x.svg" alt="">
                     </button>
@@ -500,7 +500,7 @@
                     <div class="modal__header">
                         <p class="modal__title">Фильтры</p>
                         <div class="modal__content">
-                            <div class="toggle active">
+                            <div class="toggle">
                                 <p class="toggle__title">
                                     ДЛЯ КОГО
                                 </p>
@@ -525,7 +525,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="toggle active">
+                            <div class="toggle">
                                 <p class="toggle__title">
                                     ТИП ПРОДУКЦИИ
                                 </p>
@@ -557,7 +557,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="toggle active">
+                            <div class="toggle">
                                 <p class="toggle__title">
                                     ВКУС
                                 </p>
@@ -613,7 +613,7 @@
                     </div>
                 </div>
 
-                <div class="modal__item modal__basket" style="display: none;">
+                <div class="modal__item modal__basket">
                     <button class="modal__close">
                         <img src="assets/img/svg/main/black-x.svg" alt="">
                     </button>