added floating mode

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,

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;

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>

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;