fix: fix animation MenuNavigationProductList

src/components/common/MenuFilter/MenuFilter.module.scss

@@ -16,7 +16,7 @@
         box-sizing: border-box;
         &::after{
             @apply absolute;
-            top: 110%;
+            bottom: -1rem;
             content: "";
             width: 100%;
             border-bottom: 1px solid var(--border-line);

src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss

@@ -5,34 +5,49 @@
     }
 }
 .menuNavigationProductListMobile{
+    @apply relative transition-all duration-100;
     
-    // transform: translateY(-20%);
-    
-    .menuNavigationProductModal{
-        @apply transition-all duration-100 hidden;
+    @screen md{
+        @apply hidden;
+    }
+    @screen xl{
+        @apply hidden;
+    }
+    &.isShow{
+        &::after{
+            content: "";
             background: rgba(0, 0, 0, 0.5);
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100vh;
+            position: fixed;
+            z-index: 9999;
+        }
+    }
+    .menuNavigationProductModal{
+        @apply transition-all duration-200;
         position: fixed;
         left: 0;
         top: 0;
         width: 100%;
-        height: 100%;
+        height: 100vh;
         z-index: 10000;
+        transform: translateY(100%);
 
-        &.isShow{
-            @apply block;
+        &.animation{
+            transform: translateY(0%)
         }
-    
         .content{
-            @apply  relative w-full hidden;
+            @apply  relative w-full h-full;
             margin-top: 3rem;
             padding-top: 8rem ;
-            padding-bottom: 5rem;
+            padding-bottom: 10rem;
             background-color: white;
-            overflow-x: hidden;
             overflow-y: auto;
-            height: 100%;
+            height: 100vh;
             border-radius: 2.4rem 2.4rem 0 0;
-            // transform: translateY();
             .head{
                 @apply flex justify-between fixed;
                 top:0;

src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx

@@ -33,9 +33,8 @@ const MenuNavigationProductList = ({categories,brands,featured,visible,onClose}:
                 <MenuNavigation categories={brands} heading="Brands"/>
                 <MenuNavigation categories={featured} heading="Featured"/>
             </div>
-            <div className={s.menuNavigationProductListMobile} >
-                <div className={classNames({ [s.menuNavigationProductModal] :true,[s.isShow]: visible})} onClick={onClose}>
-                    <div className={classNames({[s.hideAnimation]:true,[s.animation]: visible})}>
+            <div className={classNames({ [s.menuNavigationProductListMobile] :true,[s.isShow]: visible})}>
+                <div className={classNames({ [s.menuNavigationProductModal] :true,[s.animation]: visible})}>
                     <div className={s.content}>
                         <div className={s.head}>
                             <h3>FILTER</h3>
@@ -51,7 +50,6 @@ const MenuNavigationProductList = ({categories,brands,featured,visible,onClose}:
                     </div>
                 </div>
             </div>
-            </div>
         </>
     )
 }

src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss

@@ -11,14 +11,9 @@
         margin: 0.8rem 0;
     }
     .menuSortList{
+        margin-bottom: 2rem;
         box-sizing: border-box;
-        &::after{
-            @apply absolute;
-            top: 110%;
-            content: "";
-            width: 100%;
-            border-bottom: 1px solid var(--border-line);
-        } 
+        
         li{
             div{
              height: 4.8rem;