implement attached elements

packages/app/src/layout/sidebar/index.jsx

@@ -27,6 +27,7 @@ export default class Sidebar extends React.Component {
 			toggleVisibility: this.toggleVisibility,
 			toggleEdit: this.toggleEditMode,
 			toggleElevation: this.toggleElevation,
+			attachElement: this.attachElement,
 			isVisible: () => this.state.visible,
 			isEditMode: () => this.state.visible,
 			isCollapsed: () => this.state.collapsed,
@@ -44,6 +45,7 @@ export default class Sidebar extends React.Component {
 				top: [],
 			},
 			elevated: false,
+			additionalElements: [],
 		}
 
 		window.app.eventBus.on("edit_sidebar", () => this.toggleEditMode())
@@ -75,6 +77,12 @@ export default class Sidebar extends React.Component {
 		return window.app.settings.get("sidebarKeys")
 	}
 
+	attachElement = (element) => {
+		this.setState({
+			additionalElements: [...this.state.additionalElements, element],
+		})
+	}
+
 	appendItem = (item = {}) => {
 		const { position } = item
 
@@ -330,6 +338,10 @@ export default class Sidebar extends React.Component {
 					</div>
 				)}
 
+				{!this.state.editMode && <div key="additionalElements" className="additionalElements">
+					{this.state.additionalElements}
+				</div>}
+
 				{!this.state.editMode && (
 					<div key="bottom" className="app_sidebar_bottom">
 						<Menu selectable={false} mode="inline" theme={this.props.theme} onClick={this.handleClick}>