diff --git a/packages/app/src/components/Layout/sidebar/index.jsx b/packages/app/src/components/Layout/sidebar/index.jsx
index b8644966..f71f0083 100755
--- a/packages/app/src/components/Layout/sidebar/index.jsx
+++ b/packages/app/src/components/Layout/sidebar/index.jsx
@@ -1,5 +1,5 @@
import React from "react"
-import { Menu, Avatar, Button } from "antd"
+import { Menu, Avatar, Button, Dropdown } from "antd"
import { Translation } from "react-i18next"
import classnames from "classnames"
@@ -182,6 +182,7 @@ export default class Sidebar extends React.Component {
visible: false,
elevated: false,
expanded: false,
+ dropdownOpen: false,
pathResolvers: null,
menus: null,
@@ -315,9 +316,31 @@ export default class Sidebar extends React.Component {
}
toggleExpanded = (to) => {
- this.setState({ expanded: to ?? !this.state.expanded })
+ to = to ?? !this.state.expanded
- app.eventBus.emit("sidebar.expanded", to ?? !this.state.expanded)
+ if (this.collapseDebounce) {
+ clearTimeout(this.collapseDebounce)
+ this.collapseDebounce = null
+ }
+
+ if (!to & this.state.dropdownOpen && !this.state._shouldCollapse) {
+ // FIXME: This is a walkaround for a bug in antd, causing when dropdown set to close, item click event is not fired
+ // The desing defines when sidebar should be collapsed, dropdown should be closed, but in this case, gonna to keep it open untils dropdown is closed
+ //this.setState({ dropdownOpen: false })
+
+ this.setState({ _shouldCollapse: true })
+ return false
+ }
+
+ if (!to) {
+ this.collapseDebounce = setTimeout(() => {
+ this.setState({ expanded: to })
+ }, window.app.cores.settings.get("autoCollapseDelay") ?? 500)
+ } else {
+ this.setState({ expanded: to })
+ }
+
+ app.eventBus.emit("sidebar.expanded", to)
}
toggleVisibility = (to) => {
@@ -333,13 +356,7 @@ export default class Sidebar extends React.Component {
if (window.app.cores.settings.is("collapseOnLooseFocus", false)) return
- clearTimeout(this.collapseDebounce)
-
- this.collapseDebounce = null
-
- if (!this.state.expanded) {
- this.toggleExpanded(true)
- }
+ this.toggleExpanded(true)
}
handleMouseLeave = () => {
@@ -347,10 +364,60 @@ export default class Sidebar extends React.Component {
if (window.app.cores.settings.is("collapseOnLooseFocus", false)) return
- if (this.state.expanded) {
- this.collapseDebounce = setTimeout(() => {
- this.toggleExpanded(false)
- }, window.app.cores.settings.get("autoCollapseDelay") ?? 500)
+ this.toggleExpanded(false)
+ }
+
+ onDropdownOpenChange = (to) => {
+ // this is another walkaround for a bug in antd, causing when dropdown set to close, item click event is not fired
+ if (this.state._shouldCollapse) {
+ this.setState({ _shouldCollapse: false })
+ this.toggleExpanded(false)
+ }
+
+ this.setState({ dropdownOpen: to })
+ }
+
+ generateDropdownItems = () => {
+ return [
+ {
+ key: "account",
+ label: <>
+