support multiple bottom items

packages/app/src/components/Layout/sidebar/index.jsx

@@ -107,6 +107,13 @@ const CustomRender = (props) => {
 	</div>
 }
 
+const handleRenderIcon = (icon) => {
+	if (typeof icon === "undefined") {
+		return null
+	}
+	return createIconRender(icon)
+}
+
 export default class Sidebar extends React.Component {
 	constructor(props) {
 		super(props)
@@ -119,32 +126,54 @@ export default class Sidebar extends React.Component {
 			isExpanded: () => this.state.expanded,
 			setCustomRender: this.setRender,
 			closeCustomRender: this.closeRender,
-			updateBackgroundItem: (children, props) => {
+			updateBottomItemProps: (id, newProps) => {
-				let updatedValue = this.state.backgroundItem
+				let updatedValue = this.state.bottomItems
 
-				if (typeof children !== "undefined") {
+				updatedValue = updatedValue.map((item) => {
-					updatedValue.children = children
+					if (item.id === id) {
-				}
+						item.props = {
-
+							...item.props,
-				if (typeof props !== "undefined") {
+							...newProps,
-					updatedValue.props = props
+						}
-				}
+					}
+				})
 
 				this.setState({
-					backgroundItem: updatedValue
+					bottomItems: updatedValue
 				})
 			},
-			setBackgroundItem: (children, props) => {
+			attachBottomItem: (id, children, options) => {
+				if (!id) {
+					throw new Error("ID is required")
+				}
+
+				if (!children) {
+					throw new Error("Children is required")
+				}
+
+				if (this.state.bottomItems.find((item) => item.id === id)) {
+					throw new Error("Item already exists")
+				}
+
+				let updatedValue = this.state.bottomItems
+
+				updatedValue.push({
+					id,
+					children,
+					...options
+				})
+
 				this.setState({
-					backgroundItem: {
+					bottomItems: updatedValue
-						children: children,
-						props: props,
-					},
 				})
 			},
-			clearBackgroundItem: () => {
+			removeBottomItem: (id) => {
+				let updatedValue = this.state.bottomItems
+
+				updatedValue = updatedValue.filter((item) => item.id !== id)
+
 				this.setState({
-					backgroundItem: null,
+					bottomItems: updatedValue
 				})
 			}
 		}
@@ -158,7 +187,8 @@ export default class Sidebar extends React.Component {
 
 			customRenderTitle: null,
 			customRender: null,
-			backgroundItem: null,
+
+			bottomItems: [],
 		}
 
 		// handle sidedrawer open/close
@@ -225,13 +255,6 @@ export default class Sidebar extends React.Component {
 	}
 
 	renderMenuItems(items) {
-		const handleRenderIcon = (icon) => {
-			if (typeof icon === "undefined") {
-				return null
-			}
-			return createIconRender(icon)
-		}
-
 		return items.map((item) => {
 			if (Array.isArray(item.children)) {
 				return <Menu.SubMenu
@@ -293,6 +316,8 @@ export default class Sidebar extends React.Component {
 
 	toggleExpanded = (to) => {
 		this.setState({ expanded: to ?? !this.state.expanded })
+
+		app.eventBus.emit("sidebar.expanded", to ?? !this.state.expanded)
 	}
 
 	toggleVisibility = (to) => {
@@ -382,16 +407,25 @@ export default class Sidebar extends React.Component {
 
 					<div key="bottom" className={classnames("app_sidebar_menu_wrapper", "bottom")}>
 						<Menu selectable={false} mode="inline" onClick={this.handleClick}>
-							<Menu.Item
+							{
-								{...this.state.backgroundItem?.props ?? {}}
+								this.state.bottomItems.map((item) => {
-								key="background_item"
+									if (item.noContainer) {
-								className={classnames("background_item", { ["active"]: this.state.backgroundItem })}
+										return React.createElement(item.children, item.childrenProps)
-								ignoreClick
+									}
-							>
+
-								{
+									return <Menu.Item
-									this.state.backgroundItem?.children
+										key={item.id}
-								}
+										className="extra_bottom_item"
-							</Menu.Item>
+										icon={handleRenderIcon(item.icon)}
+										disabled={item.disabled ?? false}
+										{...item.containerProps}
+									>
+										{
+											React.createElement(item.children, item.childrenProps)
+										}
+									</Menu.Item>
+								})
+							}
 							<Menu.Item key="search" icon={<Icons.Search />} >
 								<Translation>
 									{(t) => t("Search")}

packages/app/src/components/Layout/sidebar/index.less

@@ -35,6 +35,11 @@
 
 		.app_sidebar_menu_wrapper {
 			.ant-menu {
+				#sidebar_item_content {
+					opacity: 1;
+					width: 100%;
+				}
+
 				.ant-menu-item:not(.user_avatar) {
 					.ant-menu-title-content {
 						opacity: 1;
@@ -136,6 +141,11 @@
 
 			transition: all 150ms ease-in-out;
 
+			#sidebar_item_content {
+				opacity: 0;
+				width: 0;
+			}
+
 			.ant-menu-item {
 				display: inline-flex;
 
@@ -182,30 +192,6 @@
 		}
 	}
 
-	.background_item {
-		width: 100%;
-
-		opacity: 0;
-
-		transition: all 150ms ease-in-out;
-
-		padding-bottom: 10px;
-
-		background-color: transparent;
-
-		&:hover{
-			background-color: unset!important;
-		}
-
-		&:active{
-			background-color: unset!important;
-		}
-
-		&.active {
-			opacity: 1;
-		}
-	}
-
 	.render_content_wrapper {
 		display: flex;
 		flex-direction: column;