From 86c5b94f32cfa676dc6df921fc4485a4eaa0c8df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20L=C3=A1zaro?= <vlazaro@outlook.es>
Date: Fri, 3 Jul 2020 10:41:55 +0200
Subject: [PATCH] fix(drawer): animation when opening the Drawer

Previously, width was used in animation, this caused strange animation when opening the Drawer.
---
 desktop-app/app/components/Drawer/styles.css | 10 +++++-----
 desktop-app/app/containers/Browser/index.js  |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/desktop-app/app/components/Drawer/styles.css b/desktop-app/app/components/Drawer/styles.css
index adf2b6fa..045dc1d7 100644
--- a/desktop-app/app/components/Drawer/styles.css
+++ b/desktop-app/app/components/Drawer/styles.css
@@ -1,16 +1,16 @@
 .drawer {
-  width: 0;
+  width: 290px;
   overflow: hidden;
-  transition: width 0.2s;
+  transition: margin-left 0.2s;
   background: #252526;
+  margin: 0 10px 0 -290px;
+  padding: 5px 5px 0 5px;
 }
 
 .drawer.open {
-  width: 290px;
+  margin-left: 0;
   flex-shrink: 0;
   box-shadow: 5px 7px 5px 0px rgba(0, 0, 0, 0.75);
-  margin: 0 10px 0 0;
-  padding: 5px 5px 0 0;
 }
 
 .contentContainer {
diff --git a/desktop-app/app/containers/Browser/index.js b/desktop-app/app/containers/Browser/index.js
index 2133139c..f4baa7df 100644
--- a/desktop-app/app/containers/Browser/index.js
+++ b/desktop-app/app/containers/Browser/index.js
@@ -20,6 +20,7 @@ const Browser = ({browser}) => {
           display: 'flex',
           flexDirection: 'row',
           height: '100%',
+          overflowX: 'hidden',
         }}
       >
         <DrawerContainer />