From 7997dbc8c5fc617eccef5299d71d3f08ecd07d26 Mon Sep 17 00:00:00 2001
From: quangnhankie <nhantran@kie.io>
Date: Fri, 10 Sep 2021 11:36:32 +0700
Subject: [PATCH] fix: fix animation MenuNavigationProductList

---
 .../common/MenuFilter/MenuFilter.module.scss  |  4 +-
 .../MenuNavigationProductList.module.scss     | 41 +++++++++++++------
 .../MenuNavigationProductList.tsx             | 28 ++++++-------
 .../MenuSort/MenuSort.module.scss             |  9 +---
 4 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/src/components/common/MenuFilter/MenuFilter.module.scss b/src/components/common/MenuFilter/MenuFilter.module.scss
index 359ea28a8..c0810c4bd 100644
--- a/src/components/common/MenuFilter/MenuFilter.module.scss
+++ b/src/components/common/MenuFilter/MenuFilter.module.scss
@@ -16,12 +16,12 @@
         box-sizing: border-box;
         &::after{
             @apply absolute;
-            top: 110%;
+            bottom: -1rem;
             content: "";
             width: 100%;
             border-bottom: 1px solid var(--border-line);
         } 
-
+       
         li{
             margin: 1rem 0;
             padding:0;
diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
index 4d74774c6..3eeda052c 100644
--- a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
+++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
@@ -5,34 +5,49 @@
     }
 }
 .menuNavigationProductListMobile{
-   
-    // transform: translateY(-20%);
+    @apply relative transition-all duration-100;
     
+    @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-100 hidden;
-        background: rgba(0, 0, 0, 0.5);
+        @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;
diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx
index 87ab89f63..590368da4 100644
--- a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx
+++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx
@@ -33,21 +33,19 @@ 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={s.content}>
-                            <div className={s.head}>
-                                <h3>FILTER</h3>
-                                <div onClick={onClose}><IconHide/></div>
-                            </div>
-                            <MenuFilter categories={categories} heading="Categories" type="category" onChangeValue={handleValue}/>
-                            <MenuFilter categories={brands} heading="Brand" type="brand" onChangeValue={handleValue}/>
-                            <MenuFilter categories={featured} heading="Featured" type="featured" onChangeValue={handleValue}/>
-                            <MenuSort heading="SORT BY" type="sort" onChangeValue={handleValue}/>
-                            <div className={s.foot}>
-                                <ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
-                            </div>
+            <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>
+                            <div onClick={onClose}><IconHide/></div>
+                        </div>
+                        <MenuFilter categories={categories} heading="Categories" type="category" onChangeValue={handleValue}/>
+                        <MenuFilter categories={brands} heading="Brand" type="brand" onChangeValue={handleValue}/>
+                        <MenuFilter categories={featured} heading="Featured" type="featured" onChangeValue={handleValue}/>
+                        <MenuSort heading="SORT BY" type="sort" onChangeValue={handleValue}/>
+                        <div className={s.foot}>
+                            <ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
                         </div>
                     </div>
                 </div>
diff --git a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss
index c018a57b3..be232308a 100644
--- a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss
+++ b/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;