From 48dc8a249330ceec3d3ca6e5cd58e165085f8197 Mon Sep 17 00:00:00 2001
From: srgooglo <srgooglo@ragestudio.net>
Date: Wed, 1 Jun 2022 03:15:44 +0200
Subject: [PATCH] support elevation

---
 packages/app/src/layout/sidebar/index.jsx  | 25 +++++++++++++++++++++-
 packages/app/src/layout/sidebar/index.less |  8 ++++++-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/layout/sidebar/index.jsx b/packages/app/src/layout/sidebar/index.jsx
index f2d10565..3f936489 100644
--- a/packages/app/src/layout/sidebar/index.jsx
+++ b/packages/app/src/layout/sidebar/index.jsx
@@ -26,6 +26,7 @@ export default class Sidebar extends React.Component {
 		this.controller = window.app["SidebarController"] = {
 			toggleVisibility: this.toggleVisibility,
 			toggleEdit: this.toggleEditMode,
+			toggleElevation: this.toggleElevation,
 			isVisible: () => this.state.visible,
 			isEditMode: () => this.state.visible,
 			isCollapsed: () => this.state.collapsed,
@@ -42,6 +43,7 @@ export default class Sidebar extends React.Component {
 				bottom: [],
 				top: [],
 			},
+			elevated: false,
 		}
 
 		window.app.eventBus.on("edit_sidebar", () => this.toggleEditMode())
@@ -49,6 +51,14 @@ export default class Sidebar extends React.Component {
 		window.app.eventBus.on("settingChanged.sidebar_collapse", (value) => {
 			this.toggleCollapse(value)
 		})
+
+		// handle sidedrawer open/close
+		window.app.eventBus.on("sidedrawer.hasDrawers", () => {
+			this.toggleElevation(true)
+		})
+		window.app.eventBus.on("sidedrawer.noDrawers", () => {
+			this.toggleElevation(false)
+		})
 	}
 
 	collapseDebounce = null
@@ -238,6 +248,10 @@ export default class Sidebar extends React.Component {
 		this.setState({ visible: to ?? !this.state.visible })
 	}
 
+	toggleElevation = (to) => {
+		this.setState({ elevated: to ?? !this.state.elevated })
+	}
+
 	onMouseEnter = () => {
 		if (window.app.settings.is("collapseOnLooseFocus", false)) {
 			return false
@@ -288,7 +302,16 @@ export default class Sidebar extends React.Component {
 				width={this.state.editMode ? 400 : 200}
 				collapsed={this.state.editMode ? false : this.state.collapsed}
 				onCollapse={() => this.props.onCollapse()}
-				className={classnames("sidebar", { ["edit_mode"]: this.state.editMode, ["hidden"]: !this.state.visible })}
+				className={
+					classnames(
+						"sidebar",
+						{
+							["edit_mode"]: this.state.editMode,
+							["hidden"]: !this.state.visible,
+							["elevated"]: this.state.elevated
+						}
+					)
+				}
 			>
 				<div className="app_sidebar_header">
 					<div className={classnames("app_sidebar_header_logo", { ["collapsed"]: this.state.collapsed })}>
diff --git a/packages/app/src/layout/sidebar/index.less b/packages/app/src/layout/sidebar/index.less
index 67ae8cb2..30cad8f1 100644
--- a/packages/app/src/layout/sidebar/index.less
+++ b/packages/app/src/layout/sidebar/index.less
@@ -2,12 +2,14 @@
 
 //  SIDEBAR
 .ant-layout-sider {
+	z-index       : 50;
+
 	background      : var(--sidebar-background-color) !important;
 	background-color: var(--sidebar-background-color) !important;
 
 	border-radius: 0 @app_sidebar_borderRadius @app_sidebar_borderRadius 0;
 	overflow     : hidden;
-	border       : 1px solid var(--sidebar-background-color) !important;
+	border       : 1px solid var(--sidebar-background-color);
 
 	transition: all 150ms ease-in-out;
 
@@ -17,6 +19,10 @@
 		background-color: transparent !important;
 		width           : 0 !important;
 	}
+
+	&.elevated {
+		box-shadow   : 0 0 5px 4px rgba(0, 0, 0, 0.1) !important;
+	}
 }
 
 .ant-menu-item {