From 8412ca6ecd7f174656b8cf867f3187439e81fc97 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Wed, 15 Sep 2021 14:25:03 +0700
Subject: [PATCH] :art: styles: cart drawer animation

:%s
---
 src/components/common/Banner/Banner.tsx                |  1 +
 .../common/DrawerCommon/DrawerCommon.module.scss       | 10 +++++++---
 src/components/common/DrawerCommon/DrawerCommon.tsx    |  3 ++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/common/Banner/Banner.tsx b/src/components/common/Banner/Banner.tsx
index e8c86f53e..410fded77 100644
--- a/src/components/common/Banner/Banner.tsx
+++ b/src/components/common/Banner/Banner.tsx
@@ -8,6 +8,7 @@ interface Props {
 
 const option = {
     slidesPerView: 1,
+    mode: 'free',
 }
 const Banner = memo(({ data }: Props) => {
     if (data.length === 1) {
diff --git a/src/components/common/DrawerCommon/DrawerCommon.module.scss b/src/components/common/DrawerCommon/DrawerCommon.module.scss
index fe42289f9..0fc8b5b35 100644
--- a/src/components/common/DrawerCommon/DrawerCommon.module.scss
+++ b/src/components/common/DrawerCommon/DrawerCommon.module.scss
@@ -8,19 +8,23 @@
     height: 100vh;
     width: 100%;
     z-index: 20000;
-    transform: translateX(110%);
+    transform: none;
 
+    &.hide {
+        .innerWrap {
+            background: none;
+        }
+        transform: translateX(110%);
+    }
     &.show {
         .innerWrap {
             background: rgba(0, 0, 0, 0.2);
             animation: animateBackground 0.8s;
         }
-        transform: none;
     }
 
     .innerWrap {
         @apply w-full;
-        background: none;
     }
     .inner {
         @apply flex flex-col bg-white;
diff --git a/src/components/common/DrawerCommon/DrawerCommon.tsx b/src/components/common/DrawerCommon/DrawerCommon.tsx
index 301e516c2..9e486dd23 100644
--- a/src/components/common/DrawerCommon/DrawerCommon.tsx
+++ b/src/components/common/DrawerCommon/DrawerCommon.tsx
@@ -22,7 +22,8 @@ const handleClickOut = (e: any) => {
   return (
     <div className={classNames({
       [s.drawerCommon]: true,
-      [s.show]: visible
+      [s.hide]: !visible,
+      [s.show]: visible,
     })}>
       <div className={s.innerWrap} onClick={handleClickOut}>
         <div className={s.inner} ref={refInner}>