From d793df1d40eaa4b052b80b18ad439a64a4dad05a Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Sat, 19 Nov 2022 04:56:56 +0000
Subject: [PATCH] added `floating` mode

---
 packages/app/src/components/Layout/sidebar/index.jsx     | 1 +
 packages/app/src/components/Layout/sidebar/index.less    | 4 ++++
 packages/app/src/components/Layout/sidedrawer/index.jsx  | 7 ++++++-
 packages/app/src/components/Layout/sidedrawer/index.less | 6 ++++++
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/Layout/sidebar/index.jsx b/packages/app/src/components/Layout/sidebar/index.jsx
index 21a73d15..449cf49c 100755
--- a/packages/app/src/components/Layout/sidebar/index.jsx
+++ b/packages/app/src/components/Layout/sidebar/index.jsx
@@ -227,6 +227,7 @@ export default class Sidebar extends React.Component {
 					classnames(
 						"app_sidebar",
 						{
+							["floating"]: window.app?.settings.get("sidebar.floating"),
 							["collapsed"]: this.state.visible && this.state.collapsed,
 							["elevated"]: this.state.visible && this.state.elevated,
 							["hidden"]: !this.state.visible,
diff --git a/packages/app/src/components/Layout/sidebar/index.less b/packages/app/src/components/Layout/sidebar/index.less
index 05a4518e..b81306b2 100755
--- a/packages/app/src/components/Layout/sidebar/index.less
+++ b/packages/app/src/components/Layout/sidebar/index.less
@@ -25,6 +25,10 @@
 	border-radius: 0 @app_sidebar_borderRadius @app_sidebar_borderRadius 0;
 	border: 1px solid var(--sidebar-background-color);
 
+	&.floating {
+		position: absolute;
+	}
+
 	&.collapsed {
 		width: 80px;
 		min-width: 80px;
diff --git a/packages/app/src/components/Layout/sidedrawer/index.jsx b/packages/app/src/components/Layout/sidedrawer/index.jsx
index 1285ac7c..da85c3d5 100755
--- a/packages/app/src/components/Layout/sidedrawer/index.jsx
+++ b/packages/app/src/components/Layout/sidedrawer/index.jsx
@@ -224,7 +224,12 @@ export default class SidedrawerController extends React.Component {
 
 	render() {
 		return <div
-			className="sidedrawers-wrapper"
+			className={classnames(
+				"sidedrawers-wrapper",
+					{
+						["floating-sidebar"]: window.app?.settings.get("sidebar.floating")
+					}
+				)}
 		>
 			{this.state.drawers}
 		</div>
diff --git a/packages/app/src/components/Layout/sidedrawer/index.less b/packages/app/src/components/Layout/sidedrawer/index.less
index 88528d52..fe5c5153 100755
--- a/packages/app/src/components/Layout/sidedrawer/index.less
+++ b/packages/app/src/components/Layout/sidedrawer/index.less
@@ -3,6 +3,12 @@
 .sidedrawers-wrapper {
     display: flex;
     flex-direction: row;
+
+    &.floating-sidebar {
+        z-index: 950;
+        position: absolute;
+        margin-left: @app_sidebar_collapsed_width;
+    }
     
     .sidedrawer {
         position: relative;