From a544d557bbad09a53c6a558d3d70f702d084c3f1 Mon Sep 17 00:00:00 2001
From: srgooglo <srgooglo@ragestudio.net>
Date: Tue, 25 Oct 2022 14:42:16 +0000
Subject: [PATCH] improve style for sidedrawers

---
 .../components/Layout/sidedrawer/index.jsx    |  6 ++++++
 .../components/Layout/sidedrawer/index.less   | 20 +++++++++----------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/components/Layout/sidedrawer/index.jsx b/packages/app/src/components/Layout/sidedrawer/index.jsx
index 5e2a0732..1285ac7c 100755
--- a/packages/app/src/components/Layout/sidedrawer/index.jsx
+++ b/packages/app/src/components/Layout/sidedrawer/index.jsx
@@ -9,9 +9,11 @@ export const Sidedrawer = (props) => {
 	return <div
 		key={sidedrawerId}
 		id={sidedrawerId}
+		style={props.style}
 		className={
 			classnames("sidedrawer", {
 				"hided": !props.defaultVisible,
+				"first": props.first
 			})
 		}
 	>
@@ -114,6 +116,10 @@ export default class SidedrawerController extends React.Component {
 			{
 				key: id,
 				id: id,
+				first: drawers.length === 0,
+				style: {
+					zIndex: 100 - drawers.length,
+				},
 				allowMultiples: options.allowMultiples ?? false,
 				...options.props,
 				close: this.close,
diff --git a/packages/app/src/components/Layout/sidedrawer/index.less b/packages/app/src/components/Layout/sidedrawer/index.less
index 5ccd4057..88528d52 100755
--- a/packages/app/src/components/Layout/sidedrawer/index.less
+++ b/packages/app/src/components/Layout/sidedrawer/index.less
@@ -3,18 +3,14 @@
 .sidedrawers-wrapper {
     display: flex;
     flex-direction: row;
-
-    > div {
-        transform: translate(-50px, 0);
-    }
-
+    
     .sidedrawer {
         position: relative;
 
-        width: 30vw; // by default
+        width: auto; // by default
         height: 100vh;
 
-        min-width: 700px;
+        min-width: 400px;
 
         z-index: 20;
 
@@ -22,9 +18,9 @@
         border-radius: 0 @app_sidebar_borderRadius @app_sidebar_borderRadius 0;
 
         padding: 20px;
-        padding-left: 70px;
+        padding-left: 30px;
 
-        transform: translate(-50px, 0);
+        transform: translate(-20px, 0);
 
         overflow-x: hidden;
         overflow-y: overlay;
@@ -33,7 +29,11 @@
         transition: all 150ms ease-in-out;
 
         // create shadow on the right side
-        box-shadow   : 0 0 5px 4px rgba(0, 0, 0, 0.1) !important;
+        box-shadow: 0 0 5px 4px rgba(0, 0, 0, 0.1) !important;
+
+        &.first {
+            transform: translate(-10px, 0);
+        }
 
         &.hided {
             width: 0;